Spaces:
Sleeping
Sleeping
File size: 6,662 Bytes
c024705 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 |
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>AIMHSA - Sign In</title>
<link rel="stylesheet" href="auth.css" />
</head>
<body>
<div class="auth-container">
<div class="auth-card">
<div class="auth-header">
<h1 class="brand">AIMHSA</h1>
<p class="subtitle">Mental Health Companion for Rwanda</p>
</div>
<form class="auth-form" id="loginForm" novalidate>
<div class="form-group">
<label for="loginEmail">Email Address</label>
<input type="email" id="loginEmail" name="loginEmail" autocomplete="email" required />
<div class="input-hint" id="emailHint" aria-live="polite"></div>
</div>
<div class="form-group">
<label for="loginPassword">Password</label>
<div class="password-field">
<input type="password" id="loginPassword" name="loginPassword" autocomplete="current-password" required />
<button type="button" class="toggle-password" id="togglePassword" aria-label="Show password" aria-pressed="false">👁️</button>
</div>
<div class="input-row">
<div class="password-meter" id="passwordMeter" aria-hidden="true">
<div class="password-meter-bar" id="passwordMeterBar"></div>
</div>
<div class="caps-lock" id="capsLockIndicator" hidden>Caps Lock is ON</div>
</div>
</div>
<div class="form-row">
<label class="remember-me">
<input type="checkbox" id="rememberMe" />
<span>Remember me</span>
</label>
<a class="forgot-link" id="forgotLink" href="#">Forgot password?</a>
</div>
<button type="submit" class="auth-btn" id="signInBtn">Sign In</button>
</form>
<div class="auth-links">
<p>Don't have an account? <a href="/register">Register</a></p>
</div>
<div class="auth-divider">
<span>or</span>
</div>
<button class="anonymous-btn" id="anonBtn">Continue as Guest</button>
<!-- Optional MFA Modal (shown only if server requests it) -->
<div class="modal" id="mfaModal" aria-hidden="true" role="dialog" aria-modal="true">
<div class="modal-backdrop" id="mfaBackdrop"></div>
<div class="modal-content" role="document">
<div class="modal-header">
<h2>Two-Factor Authentication</h2>
<button type="button" class="modal-close" id="mfaClose" aria-label="Close">✕</button>
</div>
<div class="modal-body">
<p>Enter the 6-digit code from your authenticator app or SMS.</p>
<div class="form-group">
<label for="mfaCode">One-Time Code</label>
<input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="6" id="mfaCode" autocomplete="one-time-code" />
</div>
<div class="modal-actions">
<button type="button" class="auth-btn" id="mfaVerifyBtn">Verify</button>
<button type="button" class="secondary-btn" id="mfaResendBtn">Resend code</button>
</div>
<div class="modal-message" id="mfaMessage" aria-live="polite"></div>
</div>
</div>
</div>
<!-- Forgot Password Modal -->
<div class="modal" id="fpModal" aria-hidden="true" role="dialog" aria-modal="true">
<div class="modal-backdrop" id="fpBackdrop"></div>
<div class="modal-content" role="document">
<div class="modal-header">
<h2>Reset your password</h2>
<button type="button" class="modal-close" id="fpClose" aria-label="Close">✕</button>
</div>
<div class="modal-body">
<div class="fp-step fp-step-1">
<p>Enter your email address to receive a reset code.</p>
<div class="form-group">
<label for="fpEmail">Email Address</label>
<input type="email" id="fpEmail" autocomplete="email" />
</div>
<div class="modal-actions">
<button type="button" class="auth-btn" id="fpRequestBtn">Send code</button>
</div>
</div>
<div class="fp-step fp-step-2 hidden">
<p>Enter the code and your new password.</p>
<div class="form-group">
<label for="fpCode">Reset Code</label>
<input type="text" id="fpCode" inputmode="numeric" maxlength="6" />
</div>
<div class="form-group">
<label for="fpNewPassword">New Password</label>
<input type="password" id="fpNewPassword" />
</div>
<div class="modal-actions">
<button type="button" class="auth-btn" id="fpApplyBtn">Reset password</button>
<button type="button" class="secondary-btn" id="fpResendBtn">Resend code</button>
</div>
</div>
<div class="modal-message" id="fpMessage" aria-live="polite"></div>
</div>
</div>
</div>
<div class="auth-footer">
<p>By continuing, you agree to our Terms of Service and Privacy Policy</p>
</div>
</div>
</div>
<script src="login.js?v=fp2"></script>
</body>
</html>
|