478 lines
13 KiB
Cheetah
478 lines
13 KiB
Cheetah
{{define "onboarding-login"}}
|
|
<div class="onboarding-container">
|
|
<div class="onboarding-card">
|
|
<!-- Progress -->
|
|
<div class="onboarding-progress">
|
|
<div class="progress-step completed clickable" onclick="goToStep('/onboarding/product')">
|
|
<div class="progress-box">✓</div>
|
|
<span class="progress-label">Product</span>
|
|
</div>
|
|
<div class="progress-line completed"></div>
|
|
<div class="progress-step active">
|
|
<div class="progress-box">2</div>
|
|
<span class="progress-label">Account</span>
|
|
</div>
|
|
<div class="progress-line"></div>
|
|
<div class="progress-step">
|
|
<div class="progress-box">3</div>
|
|
<span class="progress-label">Details</span>
|
|
</div>
|
|
<div class="progress-line"></div>
|
|
<div class="progress-step">
|
|
<div class="progress-box">4</div>
|
|
<span class="progress-label">Terms</span>
|
|
</div>
|
|
<div class="progress-line"></div>
|
|
<div class="progress-step">
|
|
<div class="progress-box">5</div>
|
|
<span class="progress-label">Payment</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Header -->
|
|
<div class="onboarding-header">
|
|
<p class="label accent mb-3">Step 2 of 5</p>
|
|
<h1 class="mb-4">Create your vault</h1>
|
|
<p class="lead">Choose how you'd like to sign in.</p>
|
|
</div>
|
|
|
|
<!-- Social Login Grid -->
|
|
<div class="social-grid">
|
|
<button class="social-btn" onclick="socialLogin('google')">
|
|
<svg width="20" height="20" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
|
|
<span>Continue with Google</span>
|
|
</button>
|
|
|
|
<button class="social-btn" onclick="socialLogin('apple')">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.74.82 0 2.1-.93 3.72-.8 1.25.1 2.16.55 2.85 1.37-2.57 1.54-2.14 4.5.44 5.38-.49 1.37-1.03 2.74-1.09 2.28zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>
|
|
<span>Continue with Apple</span>
|
|
</button>
|
|
|
|
<button class="social-btn" onclick="socialLogin('meta')">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="#0866FF"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm3.5 15.5h-2.1v-3.3h-2.8v3.3H8.5v-7h2.1v3.1h2.8v-3.1h2.1v7z"/></svg>
|
|
<span>Continue with Meta</span>
|
|
</button>
|
|
|
|
<button class="social-btn" onclick="socialLogin('microsoft')">
|
|
<svg width="20" height="20" viewBox="0 0 21 21"><rect fill="#f25022" x="0" y="0" width="10" height="10"/><rect fill="#00a4ef" x="0" y="11" width="10" height="10"/><rect fill="#7fba00" x="11" y="0" width="10" height="10"/><rect fill="#ffb900" x="11" y="11" width="10" height="10"/></svg>
|
|
<span>Continue with Microsoft</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="divider-or">
|
|
<span>or</span>
|
|
</div>
|
|
|
|
<!-- Email Login -->
|
|
<form id="emailForm" class="email-form" onsubmit="return sendEmailCode(event)">
|
|
<div class="form-group">
|
|
<label class="form-label">Work email</label>
|
|
<input type="email" class="form-input" placeholder="you@company.com" required id="emailInput">
|
|
<p class="form-hint">We'll send a 6-digit verification code to this address.</p>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary btn-block">Send verification code</button>
|
|
</form>
|
|
|
|
<!-- 2FA Code Entry (shown after email submit) -->
|
|
<div id="codeEntry" class="code-entry hidden">
|
|
<p class="mb-4">We sent a code to <strong id="emailDisplay"></strong></p>
|
|
<div class="code-inputs">
|
|
<input type="text" maxlength="1" class="code-digit" data-index="0">
|
|
<input type="text" maxlength="1" class="code-digit" data-index="1">
|
|
<input type="text" maxlength="1" class="code-digit" data-index="2">
|
|
<input type="text" maxlength="1" class="code-digit" data-index="3">
|
|
<input type="text" maxlength="1" class="code-digit" data-index="4">
|
|
<input type="text" maxlength="1" class="code-digit" data-index="5">
|
|
</div>
|
|
<div class="code-actions">
|
|
<button class="btn-text" onclick="resendCode()">Resend code</button>
|
|
<span class="text-tertiary">·</span>
|
|
<button class="btn-text" onclick="useDifferentEmail()">Use different email</button>
|
|
</div>
|
|
<button class="btn btn-primary btn-block mt-6" onclick="verifyCode()">Verify & continue</button>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<p class="onboarding-footer">
|
|
By continuing, you agree to our <a href="/terms" class="text-accent">Terms of Service</a> and <a href="/privacy" class="text-accent">Privacy Policy</a>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.onboarding-container {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
padding: 48px 24px;
|
|
background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
|
|
}
|
|
|
|
.onboarding-container::after {
|
|
content: '';
|
|
flex: 1;
|
|
min-height: 24px;
|
|
}
|
|
|
|
.onboarding-card {
|
|
width: 100%;
|
|
max-width: 520px;
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: 48px;
|
|
box-shadow: 0 4px 24px rgba(0,0,0,0.06);
|
|
border: 1px solid var(--border);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.onboarding-progress {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.progress-step {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.progress-step.active .progress-dot {
|
|
background: var(--brand-black);
|
|
color: white;
|
|
}
|
|
|
|
.progress-step.completed .progress-dot {
|
|
background: var(--success);
|
|
color: white;
|
|
}
|
|
|
|
.progress-box {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 6px;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-tertiary);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.progress-step.active .progress-box {
|
|
background: var(--brand-black);
|
|
color: white;
|
|
border-color: var(--brand-black);
|
|
}
|
|
|
|
.progress-step.completed .progress-box {
|
|
background: var(--success);
|
|
color: white;
|
|
border-color: var(--success);
|
|
}
|
|
|
|
.progress-step.clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.progress-step.clickable:hover .progress-box {
|
|
border-color: var(--brand-black);
|
|
color: var(--text);
|
|
}
|
|
|
|
.progress-step.clickable:hover .progress-label {
|
|
color: var(--text);
|
|
}
|
|
|
|
.progress-label {
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: var(--text-tertiary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.progress-step.active .progress-label {
|
|
color: var(--text);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.progress-line {
|
|
width: 40px;
|
|
height: 2px;
|
|
background: var(--border);
|
|
margin: 0 8px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.onboarding-header {
|
|
text-align: center;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.logo-lockup-sm {
|
|
display: inline-flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo-lockup-sm .logo-lockup-square {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.logo-lockup-sm .logo-lockup-wordmark {
|
|
font-size: 24px;
|
|
letter-spacing: 0.15em;
|
|
}
|
|
|
|
.social-grid {
|
|
display: grid;
|
|
gap: 12px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.social-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 14px 16px;
|
|
border-radius: 10px;
|
|
border: 1px solid var(--border);
|
|
background: white;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.social-btn:hover {
|
|
border-color: var(--brand-black);
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.social-btn svg {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.divider-or {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
margin: 24px 0;
|
|
color: var(--text-tertiary);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.divider-or::before,
|
|
.divider-or::after {
|
|
content: '';
|
|
flex: 1;
|
|
height: 1px;
|
|
background: var(--border);
|
|
}
|
|
|
|
.email-form {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
padding: 14px 16px;
|
|
border-radius: 10px;
|
|
border: 1px solid var(--border);
|
|
font-size: 15px;
|
|
font-family: inherit;
|
|
transition: border-color 0.15s;
|
|
}
|
|
|
|
.form-input:focus {
|
|
outline: none;
|
|
border-color: var(--brand-black);
|
|
}
|
|
|
|
.form-hint {
|
|
font-size: 13px;
|
|
color: var(--text-tertiary);
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.btn-block {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.code-entry {
|
|
text-align: center;
|
|
}
|
|
|
|
.code-entry.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.code-inputs {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: center;
|
|
margin: 24px 0;
|
|
}
|
|
|
|
.code-digit {
|
|
width: 48px;
|
|
height: 56px;
|
|
border-radius: 10px;
|
|
border: 1px solid var(--border);
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.code-digit:focus {
|
|
outline: none;
|
|
border-color: var(--brand-black);
|
|
}
|
|
|
|
.code-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.btn-text {
|
|
background: none;
|
|
border: none;
|
|
color: var(--brand-black);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
padding: 4px;
|
|
}
|
|
|
|
.btn-text:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.onboarding-footer {
|
|
text-align: center;
|
|
font-size: 13px;
|
|
color: var(--text-tertiary);
|
|
margin-top: 32px;
|
|
}
|
|
|
|
.onboarding-footer a {
|
|
color: var(--brand-black);
|
|
font-weight: 500;
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.onboarding-card {
|
|
padding: 32px 24px;
|
|
border-radius: 0;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.onboarding-container {
|
|
padding: 0;
|
|
background: white;
|
|
}
|
|
|
|
.progress-line {
|
|
width: 24px;
|
|
}
|
|
|
|
.code-digit {
|
|
width: 40px;
|
|
height: 48px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
function goToStep(url) {
|
|
window.location.href = url;
|
|
}
|
|
|
|
function socialLogin(provider) {
|
|
// Redirect to OAuth
|
|
window.location.href = '/auth/' + provider + '/start';
|
|
}
|
|
|
|
function sendEmailCode(e) {
|
|
e.preventDefault();
|
|
const email = document.getElementById('emailInput').value;
|
|
document.getElementById('emailDisplay').textContent = email;
|
|
|
|
// Show code entry, hide email form
|
|
document.getElementById('emailForm').classList.add('hidden');
|
|
document.getElementById('codeEntry').classList.remove('hidden');
|
|
|
|
// Focus first digit
|
|
document.querySelector('.code-digit[data-index="0"]').focus();
|
|
|
|
// TODO: Actually send the email via API
|
|
console.log('Sending 2FA code to:', email);
|
|
|
|
return false;
|
|
}
|
|
|
|
// Auto-advance code inputs
|
|
document.querySelectorAll('.code-digit').forEach((input, index) => {
|
|
input.addEventListener('input', (e) => {
|
|
if (e.target.value.length === 1) {
|
|
const next = document.querySelector('.code-digit[data-index="' + (index + 1) + '"]');
|
|
if (next) next.focus();
|
|
}
|
|
});
|
|
|
|
input.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Backspace' && !e.target.value) {
|
|
const prev = document.querySelector('.code-digit[data-index="' + (index - 1) + '"]');
|
|
if (prev) prev.focus();
|
|
}
|
|
});
|
|
});
|
|
|
|
function verifyCode() {
|
|
const code = Array.from(document.querySelectorAll('.code-digit')).map(i => i.value).join('');
|
|
if (code.length === 6) {
|
|
window.location.href = '/onboarding/details';
|
|
}
|
|
}
|
|
|
|
function resendCode() {
|
|
const email = document.getElementById('emailDisplay').textContent;
|
|
console.log('Resending code to:', email);
|
|
// Show toast or feedback
|
|
}
|
|
|
|
function useDifferentEmail() {
|
|
document.getElementById('emailForm').classList.remove('hidden');
|
|
document.getElementById('codeEntry').classList.add('hidden');
|
|
document.getElementById('emailInput').focus();
|
|
}
|
|
</script>
|
|
{{end}}
|
|
</content> |