dkb
/
auth-service


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Auth Service</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="icon" href="img/favicon.png" type="image/png">
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Auth Service</h1>
            <button class="theme-toggle" id="themeToggle" onclick="toggleTheme()" title="Switch theme">
                <svg class="theme-icon sun-icon" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"/>
                </svg>
                <svg class="theme-icon moon-icon" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z"/>
                </svg>
            </button>
        </div>

        <div id="authSection">
            <div class="tab-container">
                <div class="tab active" onclick="switchTab('login')">Login</div>
                <div class="tab" onclick="switchTab('register')">Register</div>
            </div>

            <div class="form-container">
                <form class="form active" id="loginForm">
                    <div class="form-group">
                        <label for="loginUsername">Username</label>
                        <input type="text" id="loginUsername" name="username" required>
                    </div>
                    <div class="form-group">
                        <label for="loginPassword">Password</label>
                        <input type="password" id="loginPassword" name="password" required>
                    </div>
                    <button type="submit" class="submit-btn" id="loginBtn">Sign In</button>
                    <div class="forgot-password-link">
                        <a href="#" id="forgotPasswordLink">Forgot password</a>
                    </div>
                    <div id="loginMessage" class="message" style="display: none;"></div>
                </form>

                <form class="form" id="registerForm">
                    <div class="form-group">
                        <label for="registerUsername">Username</label>
                        <input type="text" id="registerUsername" name="username" required>
                    </div>
                    <div class="form-group">
                        <label for="registerEmail">Email (optional)</label>
                        <input type="text" id="registerEmail" name="email">
                    </div>
                    <div class="form-group">
                        <label for="registerPassword">Password</label>
                        <input type="password" id="registerPassword" name="password" required>
                    </div>
                    <button type="submit" class="submit-btn" id="registerBtn">Create Account</button>
                    <div id="registerMessage" class="message" style="display: none;"></div>
                </form>
            </div>
        </div>

        <div id="resetPasswordSection" style="display: none;">
            <div class="header">
                <h1>Reset Password</h1>
                <p>Enter your new password below</p>
            </div>

            <div class="form-container">
                <form class="form active" id="resetPasswordForm">
                    <div class="form-group">
                        <label for="resetNewPassword">New Password</label>
                        <input type="password" id="resetNewPassword" name="newPassword" required>
                    </div>
                    <div class="form-group">
                        <label for="resetConfirmPassword">Confirm New Password</label>
                        <input type="password" id="resetConfirmPassword" name="confirmPassword" required>
                    </div>
                    <button type="submit" class="submit-btn" id="resetPasswordBtn">Reset Password</button>
                    <div id="resetPasswordMessage" class="message" style="display: none;"></div>
                </form>
            </div>
        </div>

        <div id="userSection" class="user-info">
            <div class="user-details">
                <p><strong>Username:</strong> <span id="currentUsername"></span></p>
                <p><strong>Email:</strong> <span id="currentEmail"></span></p>
                <p><strong>User ID:</strong> <span id="currentUserId"></span></p>
                <p><strong>Roles:</strong> <span id="currentRoles"></span></p>
            </div>

            <div class="action-buttons">
                <button class="action-btn-circular" id="showEditProfileBtn" onclick="toggleEditProfileForm()" title="Edit Profile">
                    <svg class="action-icon" width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                    </svg>
                </button>
                <button class="action-btn-circular admin-btn-circular" id="adminPanelBtn" onclick="openAdminPanel()" style="display: none;" title="Admin Panel">
                    <svg class="action-icon" width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 1L3 5V11C3 16.55 6.84 21.74 12 23C17.16 21.74 21 16.55 21 11V5L12 1ZM12 7C13.1 7 14 7.9 14 9S13.1 11 12 11 10 10.1 10 9 10.9 7 12 7ZM18 15C16 13 12 13 12 13S8 13 6 15V13.5C6 11 9 10 12 10S18 11 18 13.5V15Z"/>
                    </svg>
                </button>
            </div>

            <div class="change-password-section" id="editProfileSection" style="display: none;">
                <h3>Edit Profile</h3>
                <form id="editProfileForm">
                    <div class="profile-section">
                        <h4>Email Address</h4>
                        <div class="form-group">
                            <label for="editEmail">Email</label>
                            <input type="email" id="editEmail" name="email" placeholder="Enter your email address">
                        </div>
                    </div>

                    <div class="profile-section">
                        <h4>Change Password</h4>
                        <div class="form-group">
                            <label for="newPassword">New Password</label>
                            <input type="password" id="newPassword" name="newPassword" placeholder="Leave empty to keep current password">
                        </div>
                        <div class="form-group">
                            <label for="confirmPassword">Confirm New Password</label>
                            <input type="password" id="confirmPassword" name="confirmPassword" placeholder="Confirm your new password">
                        </div>
                    </div>

                    <div class="security-section">
                        <h4>Security Verification</h4>
                        <div class="form-group">
                            <label for="currentPassword">Current Password</label>
                            <input type="password" id="currentPassword" name="currentPassword" required placeholder="Enter current password to verify changes">
                        </div>
                    </div>
                    <div class="form-buttons">
                        <button type="submit" class="submit-btn" id="editProfileBtn">Update Profile</button>
                    </div>
                    <div id="editProfileMessage" class="message" style="display: none;"></div>
                </form>
            </div>

            <button class="logout-btn" onclick="logout()">Logout</button>
        </div>
    </div>

    <script src="js/main.js"></script>
</body>
</html>