198 lines
9.5 KiB
HTML
198 lines
9.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1.0"/>
|
|
<title>Register — {{ branding.app_name }}</title>
|
|
<style>:root { --accent: {{ branding.primary_color }}; --accent-h: {{ branding.primary_color }}; }</style>
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap" rel="stylesheet"/>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet"/>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/password-strength.css') }}"/>
|
|
<style>
|
|
:root{
|
|
--bg:#f0f4f8;--surface:#ffffff;--border:#e2e8f0;--border2:#cbd5e1;
|
|
--accent:#2563eb;--accent-h:#1d4ed8;--text:#0f172a;--text2:#334155;--muted:#64748b;
|
|
--success:#059669;--success-bg:#ecfdf5;--success-border:#a7f3d0;
|
|
--warning:#d97706;--warning-bg:#fffbeb;
|
|
--danger:#dc2626;--danger-bg:#fef2f2;
|
|
}
|
|
*{box-sizing:border-box;margin:0;padding:0;}
|
|
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
|
|
.bg-grid{position:fixed;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:48px 48px;opacity:.6;pointer-events:none;}
|
|
.card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:40px;width:100%;max-width:500px;position:relative;z-index:1;box-shadow:0 4px 24px rgba(0,0,0,.08);}
|
|
.brand{text-align:center;margin-bottom:28px;}
|
|
.logo{width:46px;height:46px;background:var(--accent);border-radius:11px;display:flex;align-items:center;justify-content:center;font-family:'Space Mono',monospace;font-weight:700;font-size:15px;color:#fff;margin:0 auto 10px;box-shadow:0 2px 10px rgba(37,99,235,.3);}
|
|
h1{font-size:20px;font-weight:700;color:var(--text);}
|
|
.subtitle{font-size:13px;color:var(--muted);margin-top:4px;}
|
|
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
|
|
.form-group{margin-bottom:16px;}
|
|
label{display:block;font-size:12px;font-weight:600;letter-spacing:.4px;color:var(--text2);text-transform:uppercase;margin-bottom:6px;}
|
|
input,select{width:100%;background:#fff;border:1px solid var(--border);color:var(--text);border-radius:8px;padding:10px 13px;font-size:14px;font-family:inherit;transition:border-color .15s,box-shadow .15s;box-shadow:0 1px 3px rgba(0,0,0,.05);}
|
|
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.1);}
|
|
input::placeholder{color:#94a3b8;}
|
|
input.valid{border-color:var(--success);box-shadow:0 0 0 3px rgba(5,150,105,.08);}
|
|
input.invalid{border-color:var(--danger);box-shadow:0 0 0 3px rgba(220,38,38,.08);}
|
|
|
|
/* Register page renders the strength label/match message in the
|
|
monospace brand font; the shared stylesheet leaves font-family
|
|
unset so it inherits from the page. */
|
|
.pw-strength-label, .pw-match{font-family:'Space Mono',monospace;}
|
|
|
|
/* ── Submit ── */
|
|
.btn{width:100%;background:var(--accent);border:none;color:#fff;border-radius:9px;padding:12px;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s;font-family:inherit;margin-top:4px;box-shadow:0 2px 6px rgba(37,99,235,.3);}
|
|
.btn:hover{background:var(--accent-h);}
|
|
.btn:disabled{background:#93c5fd;cursor:not-allowed;box-shadow:none;}
|
|
.links{text-align:center;margin-top:18px;font-size:13px;color:var(--muted);}
|
|
.links a{color:var(--accent);}
|
|
.alert{border-radius:8px;padding:10px 13px;font-size:13px;margin-bottom:16px;}
|
|
.alert-danger{background:#fef2f2;color:#dc2626;border:1px solid #fecaca;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="bg-grid"></div>
|
|
<div class="card">
|
|
<div class="brand">
|
|
{% if branding.logo_stored_name %}
|
|
<img src="{{ url_for('auth.serve_logo', filename=branding.logo_stored_name) }}"
|
|
alt="{{ branding.app_name }}"
|
|
style="width:46px;height:46px;border-radius:11px;object-fit:contain;margin:0 auto 10px;display:block;background:var(--accent);padding:3px;box-shadow:0 2px 10px rgba(0,0,0,.15);"/>
|
|
{% else %}
|
|
<div class="logo">{{ branding.logo_initials[:2] }}</div>
|
|
{% endif %}
|
|
<h1>Create Account</h1>
|
|
<p class="subtitle">
|
|
Join {% if branding.company_name %}{{ branding.company_name }}{% else %}{{ branding.app_name }}{% endif %} to submit IT support requests
|
|
</p>
|
|
</div>
|
|
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% for cat, msg in messages %}
|
|
<div class="alert alert-{{ cat }}">{{ msg }}</div>
|
|
{% endfor %}
|
|
{% endwith %}
|
|
|
|
<form method="POST" id="reg-form">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
|
|
<div class="row">
|
|
<div class="form-group">
|
|
<label>Full Name *</label>
|
|
<input type="text" name="full_name" required placeholder="Jane Smith"/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Username *</label>
|
|
<input type="text" name="username" required placeholder="jsmith"/>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Work Email *</label>
|
|
<input type="email" name="email" required placeholder="jane.smith@company.com"/>
|
|
</div>
|
|
<div class="row">
|
|
<div class="form-group">
|
|
<label>Department</label>
|
|
<input type="text" name="department" placeholder="Finance"/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Phone</label>
|
|
<input type="text" name="phone" placeholder="+1 555 000 0000"/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Password with strength meter ── -->
|
|
<div class="form-group">
|
|
<label>Password *</label>
|
|
<div class="pw-wrap">
|
|
<input type="password" name="password" id="pw" required
|
|
maxlength="128"
|
|
placeholder="Min. 8 characters"
|
|
autocomplete="new-password"/>
|
|
<button type="button" class="pw-toggle" id="pw-toggle"
|
|
title="Show / hide password"
|
|
tabindex="-1">
|
|
<i class="bi bi-eye"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Strength bar -->
|
|
<div class="pw-strength-wrap" id="strength-wrap" style="display:none;">
|
|
<div class="pw-strength-track">
|
|
<div class="pw-strength-fill" id="strength-bar"></div>
|
|
</div>
|
|
<div class="pw-strength-label" id="strength-label"></div>
|
|
</div>
|
|
|
|
<!-- Rule checklist — mirrors server-side validate_password() rules -->
|
|
<div class="pw-rules" id="rules-box" style="display:none;" aria-live="polite" aria-atomic="true">
|
|
<div class="pw-rule unmet" id="rule-len">
|
|
<span class="ri"><i class="bi bi-circle"></i></span>
|
|
<span>8+ characters</span>
|
|
</div>
|
|
<div class="pw-rule unmet" id="rule-upper">
|
|
<span class="ri"><i class="bi bi-circle"></i></span>
|
|
<span>Uppercase letter</span>
|
|
</div>
|
|
<div class="pw-rule unmet" id="rule-digit">
|
|
<span class="ri"><i class="bi bi-circle"></i></span>
|
|
<span>Number</span>
|
|
</div>
|
|
<div class="pw-rule unmet" id="rule-special">
|
|
<span class="ri"><i class="bi bi-circle"></i></span>
|
|
<span>Special character</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Confirm password with match indicator ── -->
|
|
<div class="form-group">
|
|
<label>Confirm Password *</label>
|
|
<div class="pw-wrap">
|
|
<input type="password" name="confirm_password" id="pw2" required
|
|
maxlength="128"
|
|
placeholder="Repeat password"
|
|
autocomplete="new-password"/>
|
|
<button type="button" class="pw-toggle" id="pw2-toggle"
|
|
title="Show / hide password"
|
|
tabindex="-1">
|
|
<i class="bi bi-eye"></i>
|
|
</button>
|
|
</div>
|
|
<div class="pw-match" id="match-msg" aria-live="polite" aria-atomic="true"></div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn" id="submit-btn">
|
|
<i class="bi bi-person-plus" style="margin-right:6px;"></i>Create Account
|
|
</button>
|
|
</form>
|
|
<div class="links">Already have an account? <a href="{{ url_for('auth.login') }}">Sign in</a></div>
|
|
</div>
|
|
|
|
<script src="{{ url_for('static', filename='js/password-strength.js') }}"></script>
|
|
<script>
|
|
const pwStrength = PasswordStrength.init({
|
|
password : 'pw',
|
|
confirm : 'pw2',
|
|
strengthBar : 'strength-bar',
|
|
strengthLabel: 'strength-label',
|
|
strengthWrap : 'strength-wrap',
|
|
rulesWrap : 'rules-box',
|
|
rules: { len: 'rule-len', upper: 'rule-upper', digit: 'rule-digit', special: 'rule-special' },
|
|
matchMsg : 'match-msg',
|
|
toggles: [
|
|
{ input: 'pw', button: 'pw-toggle' },
|
|
{ input: 'pw2', button: 'pw2-toggle' },
|
|
],
|
|
onChange: updateSubmitState,
|
|
});
|
|
|
|
function updateSubmitState() {
|
|
const pw = document.getElementById('pw').value;
|
|
const pw2 = document.getElementById('pw2').value;
|
|
const btn = document.getElementById('submit-btn');
|
|
const match = pw === pw2 && pw2.length > 0;
|
|
// Disable only when the user has started typing in either field and
|
|
// criteria are not met — never disable before they've interacted.
|
|
const hasStarted = pw.length > 0 || pw2.length > 0;
|
|
btn.disabled = hasStarted && !(PasswordStrength.allRulesMet(pw) && match);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |