Harshit Ghosh
feat: implement complete password recovery flow with OTP verification and transactional email templates.
9fc36aa | <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="color-scheme" content="light dark" /> | |
| <meta name="supported-color-schemes" content="light dark" /> | |
| <title>Reset your Password — ICH Screening</title> | |
| <style> | |
| {# ── Shared base: reset, layout, header, footer, dark theme ── #} | |
| {% include 'email/css/_base.css' %} | |
| {# ── Reset-specific: CTA button, warning box, expiry note ── #} | |
| {% include 'email/css/_reset.css' %} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="email-wrapper"> | |
| <table role="presentation" width="100%" cellpadding="0" cellspacing="0"> | |
| <tr> | |
| <td align="center"> | |
| <div class="email-container"> | |
| <!-- ═══════════ HEADER ═══════════ --> | |
| <div class="email-header"> | |
| <!-- Brand --> | |
| <table role="presentation" width="100%" cellpadding="0" cellspacing="0"> | |
| <tr> | |
| <td align="center"> | |
| <table role="presentation" cellpadding="0" cellspacing="0"> | |
| <tr> | |
| <td style="padding-right:10px; vertical-align:middle;"> | |
| <div class="brand-icon"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" | |
| stroke="#00d4ff" stroke-width="2.5" | |
| stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M22 12h-4l-3 9L9 3l-3 9H2"/> | |
| </svg> | |
| </div> | |
| </td> | |
| <td style="vertical-align:middle;"> | |
| <span class="brand-name">ICH Screening</span> | |
| </td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| </table> | |
| <!-- Shield / Lock SVG graphic --> | |
| <div style="margin: 20px auto 0; text-align: center;"> | |
| <svg width="68" height="68" viewBox="0 0 68 68" fill="none" | |
| xmlns="http://www.w3.org/2000/svg"> | |
| <circle cx="34" cy="34" r="32" | |
| fill="rgba(0,212,255,0.07)" | |
| stroke="rgba(0,212,255,0.35)" | |
| stroke-width="1.5"/> | |
| <path d="M34 16 L48 22 L48 34 C48 42.5 41.5 49.5 34 52 C26.5 49.5 20 42.5 20 34 L20 22 Z" | |
| fill="rgba(0,212,255,0.1)" | |
| stroke="#00d4ff" stroke-width="1.8" stroke-linejoin="round"/> | |
| <rect x="27" y="33" width="14" height="10" rx="2.5" | |
| fill="rgba(0,212,255,0.25)" stroke="#00d4ff" stroke-width="1.5"/> | |
| <path d="M29 33 L29 29.5 C29 26.5 39 26.5 39 29.5 L39 33" | |
| stroke="#00d4ff" stroke-width="1.5" stroke-linecap="round" fill="none"/> | |
| <circle cx="34" cy="37.5" r="1.5" fill="#00d4ff"/> | |
| <path d="M34 39 L34 41" stroke="#00d4ff" stroke-width="1.5" stroke-linecap="round"/> | |
| </svg> | |
| </div> | |
| <div class="header-title">Let's get you back in</div> | |
| <div class="header-subtitle">ICH Screening — Intracranial Hemorrhage Detection</div> | |
| </div> | |
| <!-- ═══════════ END HEADER ═══════════ --> | |
| <!-- ═══════════ BODY ═══════════ --> | |
| <div class="email-body"> | |
| <p class="greeting"> | |
| {% if recipient_name %}Hi <strong>{{ recipient_name }}</strong>,{% else %}Hi there,{% endif %}<br/><br/> | |
| We received a request to reset the password for your <strong>ICH Screening</strong> account. | |
| Use the button below to choose a new password — it only takes a moment. | |
| </p> | |
| <!-- CTA Button --> | |
| <div class="cta-wrap"> | |
| <a href="{{ reset_link }}" class="cta-button" id="reset-password-btn"> | |
| Reset My Password | |
| </a> | |
| </div> | |
| <!-- Expiry notice --> | |
| <div class="expiry-note"> | |
| This reset link is single-use and expires in <strong>30 minutes</strong> | |
| </div> | |
| <!-- Fallback link text --> | |
| <div class="cta-fallback" style="text-align: center;"> | |
| Button not working? Paste this link directly into your browser's address bar:<br/> | |
| <a href="{{ reset_link }}">{{ reset_link }}</a> | |
| </div> | |
| <hr class="divider"/> | |
| <!-- Warning --> | |
| <div class="warning-box"> | |
| <strong>Didn't request this?</strong> You can ignore this email — your password | |
| has not been changed and your account remains intact. If you keep receiving | |
| unexpected reset emails, consider reviewing your account security. | |
| </div> | |
| <p class="security-notice"> | |
| For your protection, this link expires automatically and can only be used once. | |
| Need a new link? Head back to the | |
| <a href="#" style="color: #718096;">Forgot Password</a> page and try again. | |
| </p> | |
| </div> | |
| <!-- ═══════════ END BODY ═══════════ --> | |
| <!-- ═══════════ FOOTER ═══════════ --> | |
| <div class="email-footer"> | |
| <div class="footer-brand">ICH Screening</div> | |
| <div class="footer-text"> | |
| This message was sent automatically. Replies to this address are not monitored.<br/> | |
| © {{ current_year }} ICH Screening — Intracranial Hemorrhage Detection Platform. | |
| </div> | |
| </div> | |
| <!-- ═══════════ END FOOTER ═══════════ --> | |
| </div><!-- /email-container --> | |
| </td> | |
| </tr> | |
| </table> | |
| </div> | |
| </body> | |
| </html> | |