File size: 7,175 Bytes
e4fd6e0 ae34acf e4fd6e0 9fc36aa e4fd6e0 9fc36aa e4fd6e0 9fc36aa e4fd6e0 | 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 132 133 134 135 136 137 138 139 140 141 142 143 144 | <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Forgot Password — ICH Screening</title>
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}" />
<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-192.png') }}" />
<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}" />
<meta name="description" content="Reset your ICH Screening account password."/>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}"/>
<link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}"/>
</head>
<body>
<div class="auth-page">
<!-- ── Left brand panel ── -->
<aside class="auth-brand">
<div class="auth-brand-logo">
<div class="auth-brand-icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
</svg>
</div>
<span class="auth-brand-name">ICH Screening</span>
</div>
<div class="auth-headline">
<h2>Secure <span class="grad">Account</span> Recovery</h2>
<p>We'll help you regain access to your account quickly and securely.</p>
</div>
<ul class="auth-features">
<li>
<span class="feat-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
</span>
Reset link sent to your email
</li>
<li>
<span class="feat-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
</span>
Secure token-based reset
</li>
<li>
<span class="feat-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
</span>
Link expires in 30 minutes
</li>
</ul>
<div class="auth-illustration">
<svg width="200" height="150" viewBox="0 0 200 150" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- envelope body -->
<rect x="20" y="55" width="160" height="88" rx="10" fill="#111c33" stroke="#243356" stroke-width="1.5"/>
<!-- envelope flap fold lines -->
<polyline points="20,55 100,108 180,55"
stroke="#1e3060" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<!-- envelope top edge highlight -->
<line x1="20" y1="55" x2="180" y2="55" stroke="#243356" stroke-width="1"/>
<!-- lock body — centered in envelope: cx=100, cy=90 -->
<rect x="85" y="88" width="30" height="24" rx="4"
fill="#6ea8fe" opacity=".92"/>
<!-- lock shackle -->
<path d="M90 88 v-8 a10 10 0 0 1 20 0 v8"
stroke="#6ea8fe" stroke-width="3" stroke-linecap="round" fill="none"/>
<!-- keyhole dot -->
<circle cx="100" cy="100" r="3" fill="#0c1427"/>
<!-- subtle glow around lock -->
<circle cx="100" cy="97" r="22" stroke="#6ea8fe" stroke-width="1" opacity=".12"/>
</svg>
</div>
</aside>
<!-- ── Right form panel ── -->
<main class="auth-form-panel">
<div class="auth-card" id="formCard">
<div class="auth-card-header">
<h2>Forgot your password?</h2>
<p>No problem — enter your email and we'll send you a reset link</p>
</div>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div class="auth-alerts">
{% for category, message in messages %}
<div class="alert alert-{{ category }}">
{% if category == 'error' %}
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
{% else %}
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
{% endif %}
{{ message }}
</div>
{% endfor %}
</div>
{% endif %}
{% endwith %}
<!-- Success state (shown via JS or flash) -->
<div id="successState" style="display:none; text-align:center; padding: 16px 0;">
<div style="width:64px;height:64px;border-radius:50%;background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.3);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#34d399" stroke-width="2.5"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
</div>
<h3 style="color:#e8ecf6;font-size:1.2rem;font-weight:800;margin-bottom:10px;">Check your inbox</h3>
<p style="color:#8ba0c4;font-size:.9rem;line-height:1.65;margin-bottom:24px;">
If that address is registered with us, a reset link is on its way. It expires in 30 minutes, so act quickly.
Don't see it? Check your spam or junk folder.
</p>
<a href="{{ url_for('auth.login') }}" class="btn-auth-submit" style="display:block;text-decoration:none;text-align:center;">
Back to Sign In
</a>
</div>
<form method="POST" class="auth-form" id="fpForm">
<div class="form-group">
<label for="email">Email address</label>
<div class="input-wrap">
<svg class="input-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
<input type="email" id="email" name="email" required autofocus
placeholder="your@email.com" autocomplete="email"/>
</div>
</div>
<button type="submit" class="btn-auth-submit">Send Reset Link</button>
</form>
<div class="auth-footer">
Remembered it after all? <a href="{{ url_for('auth.login') }}">Back to sign in</a>
</div>
</div>
</main>
</div>
<script src="{{ url_for('static', filename='js/forgot-password.js') }}" defer></script>
</body>
</html>
|