butler_ddochi/components/templates/components/_unarchived/_nav_250125.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 %}
    <!-- 회원정보 변경 버튼 -->
    <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>
    <!-- 로그아웃 버튼 -->
    <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">회원 가입후 권한 신청 메일을 보내주세요.</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>
          </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>
          <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>