butler_ddochi/components/templates/components/_nav.html

<div class="container-fluid d-flex justify-content-between align-items-center">
  <h1 class="d-flex align-items-center fs-4 text-white mb-0">
    <a class="navbar-brand" href="/">
      <i class="fa-solid fa-dog"></i>
      DDoCHI</a>
  </h1>
  <!-- 로그인/로그아웃 및 회원가입 버튼 -->
  <ul class="navbar-nav flex-row">
    {% if user.is_authenticated and user.is_superuser %}
      <!-- 관리자 콘솔 버튼 -->
      <li class="nav-item me-3">
        <a href="/admin" target="_blank" class="btn btn-outline-warning mb-2">ADMIN</a>
      </li>
    {% endif %}
    {% if request.user.is_authenticated %}
      {% if request.user.username != "demo" %}
        <!-- 회원정보 변경 버튼 -->
        <li class="nav-item me-3">
          <button type="button" class="btn btn-outline-info mb-2" data-bs-toggle="modal" data-bs-target="#editProfileModal">Edit Profile</button>
        </li>
      {% endif %}
      <!-- 로그아웃 버튼 -->
      <li class="nav-item">
        <form method="post" action="{% url 'custom_auth:logout' %}">
          {% csrf_token %}
          <button type="submit" class="btn btn-outline-danger w-100">Logout</button>
        </form>
      </li>
    {% else %}
      <!-- 로그인 버튼 -->
      <li class="nav-item me-3">
        <button type="button" class="btn btn-outline-primary mb-2" data-bs-toggle="modal" data-bs-target="#loginModal">Login</button>
      </li>
      <!-- 회원가입 버튼 -->
      <li class="nav-item me-3">
        <button type="button" class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#signupModal">Sign Up</button>
      </li>
    {% endif %}
  </ul>
</div>

<!-- 로그인 모달 -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="loginModalLabel">Login</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- 로그인 실패 메시지 표시 -->
        {% if messages %}
          {% for message in messages %}
            <div class="alert alert-danger" role="alert">
              {{ message }}
            </div>
          {% endfor %}
        {% endif %}

        <!-- 로그인 폼 -->
        <form method="post" action="{% url 'custom_auth:login' %}">
          {% csrf_token %}
          <div class="mb-3">
            <label for="username" class="form-label">Username</label>
            <input type="text" class="form-control" id="username" name="username" required="required">
          </div>
          <div class="mb-3">
            <label for="password" class="form-label">Password</label>
            <input type="password" class="form-control" id="password" name="password" required="required">
          </div>
          <button type="submit" class="btn btn-primary w-100">Login</button>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- 회원가입 모달 -->
<div class="modal fade" id="signupModal" tabindex="-1" aria-labelledby="signupModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="signupModalLabel">Sign Up</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- 회원가입 폼 -->
        <form method="post" action="{% url 'custom_auth:signup' %}">
          {% csrf_token %}
          <div class="mb-3">
            <label for="usernameSignup" class="form-label">Username</label>
            <input type="text" class="form-control" id="usernameSignup" name="username" required="required">
          </div>
          <div class="mb-3">
            <label for="passwordSignup" class="form-label">Password</label>
            <input type="password" class="form-control" id="passwordSignup" name="password1" required="required">
          </div>
          <div class="mb-3">
            <label for="passwordConfirmSignup" class="form-label">Confirm Password</label>
            <input type="password" class="form-control" id="passwordConfirmSignup" name="password2" required="required">
          </div>
          <a href="{% url 'butler:privacy' %}" class="text-dark" target="_blank">개인정보 처리방침</a>
          <p class="text-danger">회원 가입후 권한 신청 메일(icurfer@gmail.com)을 보내주세요.</p>
          <p class="text-danger">회원 가입시 본 개인정보 처리방침에 동의하는 것으로 간주됩니다.</p>
          <button type="submit" class="btn btn-success w-100">Sign Up</button>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- 회원정보 변경 모달 -->
<div class="modal fade" id="editProfileModal" tabindex="-1" aria-labelledby="editProfileModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editProfileModalLabel">Edit Profile</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- 회원정보 변경 폼 -->
        <form method="post" action="{% url 'custom_auth:edit_profile' %}">
          {% csrf_token %}
          <div class="mb-3">
            <label for="emailEdit" class="form-label">Email</label>
            <input type="email" class="form-control" id="emailEdit" name="email" value="{{ request.user.email }}" required="required">
          </div>
          <div class="mb-3">
            <label for="nhncIdEdit" class="form-label">NHNC ID</label>
            <input type="text" class="form-control" id="nhncIdEdit" name="nhnc_id" value="{{ request.user.nhnc_id }}">
          </div>
          <div class="mb-3">
            <label for="nhncApiTenantIdEdit" class="form-label">NHNC API Tenant ID</label>
            <input type="text" class="form-control" id="nhncApiTenantIdEdit" name="nhnc_api_tenant_id" value="{{ request.user.nhnc_api_tenant_id }}">
          </div>
          <!-- 추가된 URL 필드 -->
          <div class="mb-3">
            <label for="urlGiteaEdit" class="form-label">Gitea URL</label>
            <input type="url" class="form-control" id="urlGiteaEdit" name="url_gitea" value="{{ request.user.url_gitea }}">
          </div>
          <div class="mb-3">
            <label for="urlHarborEdit" class="form-label">Harbor URL</label>
            <input type="url" class="form-control" id="urlHarborEdit" name="url_harbor" value="{{ request.user.url_harbor }}">
          </div>
          <div class="mb-3">
            <label for="urlArgoCDEdit" class="form-label">ArgoCD URL</label>
            <input type="url" class="form-control" id="urlArgoCDEdit" name="url_argocd" value="{{ request.user.url_argocd }}">
          </div>
          <div class="mb-3">
            <label for="urlWebIdeEdit" class="form-label">Web IDE URL</label>
            <input type="url" class="form-control" id="urlWebIdeEdit" name="url_web_ide" value="{{ request.user.url_web_ide }}">
          </div>
          <div class="mb-3">
            <label for="urlRancherEdit" class="form-label">Rancher URL</label>
            <input type="url" class="form-control" id="urlRancherEdit" name="url_rancher" value="{{ request.user.url_rancher }}">
          </div>
          <div class="mb-3">
            <label for="urlGrafanaEdit" class="form-label">Grafana URL</label>
            <input type="url" class="form-control" id="urlGrafanaEdit" name="url_grafana" value="{{ request.user.url_grafana }}">
          </div>
          <div class="mb-3">
            <label for="urlPrometheusEdit" class="form-label">Prometheus URL</label>
            <input type="url" class="form-control" id="urlPrometheusEdit" name="url_prometheus" value="{{ request.user.url_prometheus }}">
          </div>
          <div class="mb-3">
            <label for="urlOpensearchEdit" class="form-label">OpenSearch URL</label>
            <input type="url" class="form-control" id="urlOpensearchEdit" name="url_opensearch" value="{{ request.user.url_opensearch }}">
          </div>
          <div class="mb-3">
            <label for="urlKialiEdit" class="form-label">Kiali URL</label>
            <input type="url" class="form-control" id="urlKialiEdit" name="url_kiali" value="{{ request.user.url_kiali }}">
          </div>
          <div class="mb-3">
            <label for="urlNexusEdit" class="form-label">Nexus URL</label>
            <input type="url" class="form-control" id="urlNexusEdit" name="url_nexus" value="{{ request.user.url_nexus }}">
          </div>
          <div class="mb-3">
            <label for="urlMattermostEdit" class="form-label">Mattermost URL</label>
            <input type="url" class="form-control" id="urlMattermostEdit" name="url_mattermost" value="{{ request.user.url_mattermost }}">
          </div>
          <!-- 비밀번호 변경 -->
          <div class="mb-3">
            <label for="passwordEdit" class="form-label">새 비밀번호</label>
            <input type="password" class="form-control" id="passwordEdit" name="password">
          </div>
          <div class="mb-3">
            <label for="passwordConfirmEdit" class="form-label">비밀번호 확인</label>
            <input type="password" class="form-control" id="passwordConfirmEdit" name="password_confirm">
          </div>
          <button type="submit" class="btn btn-primary w-100">Save Changes</button>
        </form>
      </div>
    </div>
  </div>
</div>