1245 lines
33 KiB
HTML
1245 lines
33 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Create Account | Sky Art Shop</title>
|
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
|
/>
|
|
<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=Poppins:wght@400;500;600;700&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--color-bg-main: #ffebeb;
|
|
--color-bg-secondary: #ffd0d0;
|
|
--color-bg-promotion: #f6ccde;
|
|
--color-accent: #fcb1d8;
|
|
--color-text-main: #202023;
|
|
}
|
|
|
|
body {
|
|
font-family: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
|
|
min-height: 100vh;
|
|
background: linear-gradient(
|
|
135deg,
|
|
#ffebeb 0%,
|
|
#ffd0d0 50%,
|
|
#f6ccde 100%
|
|
);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
/* Decorative elements */
|
|
.bg-decoration {
|
|
position: fixed;
|
|
border-radius: 50%;
|
|
filter: blur(60px);
|
|
opacity: 0.5;
|
|
z-index: 0;
|
|
}
|
|
|
|
.bg-decoration.one {
|
|
width: 400px;
|
|
height: 400px;
|
|
background: #fcb1d8;
|
|
top: -100px;
|
|
right: -100px;
|
|
}
|
|
|
|
.bg-decoration.two {
|
|
width: 300px;
|
|
height: 300px;
|
|
background: #f6ccde;
|
|
bottom: -50px;
|
|
left: -50px;
|
|
}
|
|
|
|
.bg-decoration.three {
|
|
width: 200px;
|
|
height: 200px;
|
|
background: #ffd0d0;
|
|
top: 40%;
|
|
left: 10%;
|
|
}
|
|
|
|
.auth-container {
|
|
width: 100%;
|
|
max-width: 480px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Logo Section */
|
|
.logo-section {
|
|
text-align: center;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.logo-wrapper {
|
|
width: 100px;
|
|
height: 100px;
|
|
margin: 0 auto 16px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 10px 40px rgba(252, 177, 216, 0.4),
|
|
0 0 0 6px rgba(255, 255, 255, 0.5);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.logo-wrapper img {
|
|
width: 75px;
|
|
height: 75px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.logo-section h1 {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--color-text-main);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.logo-section p {
|
|
color: #666;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Step Indicator */
|
|
.step-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.step-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: rgba(252, 177, 216, 0.4);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.step-dot.active {
|
|
background: var(--color-accent);
|
|
width: 28px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/* Form Card */
|
|
.form-card {
|
|
background: white;
|
|
border-radius: 24px;
|
|
padding: 36px 32px;
|
|
box-shadow: 0 20px 60px rgba(252, 177, 216, 0.25),
|
|
0 8px 20px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* Form Fields */
|
|
.form-group {
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.form-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 14px;
|
|
}
|
|
|
|
@media (max-width: 500px) {
|
|
.form-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
color: var(--color-text-main);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.input-field {
|
|
position: relative;
|
|
}
|
|
|
|
.input-field i.field-icon {
|
|
position: absolute;
|
|
left: 14px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #999;
|
|
font-size: 1rem;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.input-field input {
|
|
width: 100%;
|
|
padding: 13px 14px 13px 42px;
|
|
border: 2px solid #f0f0f0;
|
|
border-radius: 12px;
|
|
font-size: 0.95rem;
|
|
font-family: inherit;
|
|
transition: all 0.2s ease;
|
|
background: #fafafa;
|
|
}
|
|
|
|
.input-field input:focus {
|
|
outline: none;
|
|
border-color: var(--color-accent);
|
|
background: white;
|
|
box-shadow: 0 0 0 4px rgba(252, 177, 216, 0.15);
|
|
}
|
|
|
|
.input-field input:focus + i.field-icon,
|
|
.input-field input:focus ~ i.field-icon {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.input-field .toggle-password {
|
|
position: absolute;
|
|
right: 14px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: none;
|
|
border: none;
|
|
color: #999;
|
|
cursor: pointer;
|
|
padding: 4px;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.input-field .toggle-password:hover {
|
|
color: #666;
|
|
}
|
|
|
|
/* Password Strength */
|
|
.password-strength {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.strength-bar {
|
|
height: 4px;
|
|
background: #f0f0f0;
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.strength-fill {
|
|
height: 100%;
|
|
width: 0%;
|
|
transition: all 0.3s ease;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.strength-fill.weak {
|
|
width: 25%;
|
|
background: #ef4444;
|
|
}
|
|
.strength-fill.fair {
|
|
width: 50%;
|
|
background: #f59e0b;
|
|
}
|
|
.strength-fill.good {
|
|
width: 75%;
|
|
background: #10b981;
|
|
}
|
|
.strength-fill.strong {
|
|
width: 100%;
|
|
background: #059669;
|
|
}
|
|
|
|
.strength-text {
|
|
font-size: 0.75rem;
|
|
color: #666;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* Checkbox Options */
|
|
.checkbox-group {
|
|
margin: 18px 0;
|
|
}
|
|
|
|
.checkbox-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.checkbox-item input[type="checkbox"] {
|
|
width: 18px;
|
|
height: 18px;
|
|
accent-color: var(--color-accent);
|
|
cursor: pointer;
|
|
margin-top: 2px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.checkbox-item label {
|
|
font-size: 0.85rem;
|
|
color: #555;
|
|
cursor: pointer;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.checkbox-item label a {
|
|
color: #e85a9c;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.checkbox-item label a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Submit Button */
|
|
.btn-primary {
|
|
width: 100%;
|
|
padding: 15px;
|
|
background: linear-gradient(135deg, #fcb1d8 0%, #f6ccde 100%);
|
|
color: var(--color-text-main);
|
|
border: none;
|
|
border-radius: 12px;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.btn-primary::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
rgba(255, 255, 255, 0.4),
|
|
transparent
|
|
);
|
|
transition: left 0.5s;
|
|
}
|
|
|
|
.btn-primary:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 12px 28px rgba(252, 177, 216, 0.5);
|
|
}
|
|
|
|
.btn-primary:disabled {
|
|
opacity: 0.7;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
/* Spinner */
|
|
.spinner {
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid rgba(32, 32, 35, 0.2);
|
|
border-top-color: var(--color-text-main);
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
display: none;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* Social Buttons */
|
|
.divider {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 22px 0;
|
|
color: #999;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.divider::before,
|
|
.divider::after {
|
|
content: "";
|
|
flex: 1;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, #e0e0e0, transparent);
|
|
}
|
|
|
|
.divider span {
|
|
padding: 0 14px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.social-btns {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 10px;
|
|
}
|
|
|
|
.social-btn {
|
|
padding: 12px;
|
|
border: 2px solid #f0f0f0;
|
|
border-radius: 10px;
|
|
background: white;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.social-btn:hover {
|
|
border-color: var(--color-accent);
|
|
background: #fff9fc;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.social-btn.google {
|
|
color: #ea4335;
|
|
}
|
|
.social-btn.facebook {
|
|
color: #1877f2;
|
|
}
|
|
.social-btn.apple {
|
|
color: #000000;
|
|
}
|
|
|
|
/* Footer Link */
|
|
.form-footer {
|
|
text-align: center;
|
|
margin-top: 22px;
|
|
}
|
|
|
|
.form-footer p {
|
|
color: #666;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.form-footer a {
|
|
color: #e85a9c;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
margin-left: 4px;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.form-footer a:hover {
|
|
color: #d14485;
|
|
}
|
|
|
|
/* Toast Notification */
|
|
.toast {
|
|
position: fixed;
|
|
top: 24px;
|
|
right: 24px;
|
|
padding: 16px 24px;
|
|
border-radius: 12px;
|
|
color: white;
|
|
font-weight: 500;
|
|
font-size: 0.95rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
transform: translateX(120%);
|
|
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
z-index: 1000;
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.toast.show {
|
|
transform: translateX(0);
|
|
}
|
|
.toast.success {
|
|
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
|
}
|
|
.toast.error {
|
|
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
|
}
|
|
.toast.info {
|
|
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
|
}
|
|
|
|
/* Error State */
|
|
.input-field.error input {
|
|
border-color: #ef4444;
|
|
background: #fef2f2;
|
|
}
|
|
|
|
/* Verification Step */
|
|
.verification-view {
|
|
display: none;
|
|
}
|
|
|
|
.verification-view.active {
|
|
display: block;
|
|
}
|
|
|
|
.register-view.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.verification-icon {
|
|
width: 80px;
|
|
height: 80px;
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(252, 177, 216, 0.3) 0%,
|
|
rgba(246, 204, 222, 0.3) 100%
|
|
);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 20px;
|
|
font-size: 2rem;
|
|
color: #e85a9c;
|
|
}
|
|
|
|
.verification-text {
|
|
text-align: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.verification-text h3 {
|
|
font-size: 1.4rem;
|
|
font-weight: 700;
|
|
color: var(--color-text-main);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.verification-text p {
|
|
color: #666;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.verification-text .email-highlight {
|
|
color: #e85a9c;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Code Input */
|
|
.code-inputs {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.code-inputs input {
|
|
width: 48px;
|
|
height: 56px;
|
|
text-align: center;
|
|
font-size: 1.4rem;
|
|
font-weight: 600;
|
|
border: 2px solid #f0f0f0;
|
|
border-radius: 12px;
|
|
background: #fafafa;
|
|
transition: all 0.2s ease;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.code-inputs input:focus {
|
|
outline: none;
|
|
border-color: var(--color-accent);
|
|
background: white;
|
|
box-shadow: 0 0 0 4px rgba(252, 177, 216, 0.15);
|
|
}
|
|
|
|
.code-inputs input.filled {
|
|
border-color: var(--color-accent);
|
|
background: #fff9fc;
|
|
}
|
|
|
|
/* Resend Code */
|
|
.resend-section {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.resend-section p {
|
|
color: #666;
|
|
font-size: 0.85rem;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.resend-btn {
|
|
background: none;
|
|
border: none;
|
|
color: #e85a9c;
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
padding: 8px 16px;
|
|
border-radius: 8px;
|
|
transition: all 0.2s;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.resend-btn:hover:not(:disabled) {
|
|
background: rgba(252, 177, 216, 0.2);
|
|
}
|
|
|
|
.resend-btn:disabled {
|
|
color: #999;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.back-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: #666;
|
|
text-decoration: none;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
margin-top: 16px;
|
|
padding: 8px 16px;
|
|
border-radius: 8px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.back-btn:hover {
|
|
color: var(--color-text-main);
|
|
background: rgba(252, 177, 216, 0.15);
|
|
}
|
|
|
|
/* Back to home link */
|
|
.back-home {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.back-home a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: #666;
|
|
text-decoration: none;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
padding: 8px 16px;
|
|
border-radius: 8px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.back-home a:hover {
|
|
color: var(--color-text-main);
|
|
background: rgba(252, 177, 216, 0.2);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Background decorations -->
|
|
<div class="bg-decoration one"></div>
|
|
<div class="bg-decoration two"></div>
|
|
<div class="bg-decoration three"></div>
|
|
|
|
<!-- Toast Notification -->
|
|
<div class="toast" id="toast">
|
|
<i class="bi bi-check-circle"></i>
|
|
<span id="toastMessage">Message</span>
|
|
</div>
|
|
|
|
<div class="auth-container">
|
|
<!-- Logo Section -->
|
|
<div class="logo-section">
|
|
<div class="logo-wrapper">
|
|
<img
|
|
src="/uploads/cat-logo-only-1766962993568-201212396.png"
|
|
alt="Sky Art Shop"
|
|
/>
|
|
</div>
|
|
<h1>Join Sky Art Shop</h1>
|
|
<p>Create your account to start your creative journey</p>
|
|
</div>
|
|
|
|
<!-- Form Card -->
|
|
<div class="form-card">
|
|
<!-- Registration View -->
|
|
<div class="register-view" id="registerView">
|
|
<div class="step-indicator">
|
|
<div class="step-dot active" id="step1"></div>
|
|
<div class="step-dot" id="step2"></div>
|
|
</div>
|
|
|
|
<form id="signupForm" novalidate>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="firstName">First Name</label>
|
|
<div class="input-field">
|
|
<input
|
|
type="text"
|
|
id="firstName"
|
|
name="firstName"
|
|
placeholder="John"
|
|
required
|
|
/>
|
|
<i class="bi bi-person field-icon"></i>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="lastName">Last Name</label>
|
|
<div class="input-field">
|
|
<input
|
|
type="text"
|
|
id="lastName"
|
|
name="lastName"
|
|
placeholder="Doe"
|
|
required
|
|
/>
|
|
<i class="bi bi-person field-icon"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="email">Email Address</label>
|
|
<div class="input-field">
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
placeholder="you@example.com"
|
|
required
|
|
/>
|
|
<i class="bi bi-envelope field-icon"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="password">Password</label>
|
|
<div class="input-field">
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
name="password"
|
|
placeholder="Create a strong password"
|
|
required
|
|
/>
|
|
<i class="bi bi-lock field-icon"></i>
|
|
<button
|
|
type="button"
|
|
class="toggle-password"
|
|
onclick="togglePassword()"
|
|
>
|
|
<i class="bi bi-eye" id="toggleIcon"></i>
|
|
</button>
|
|
</div>
|
|
<div class="password-strength">
|
|
<div class="strength-bar">
|
|
<div class="strength-fill" id="strengthFill"></div>
|
|
</div>
|
|
<div class="strength-text" id="strengthText"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="checkbox-group">
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="newsletter" name="newsletter" />
|
|
<label for="newsletter"
|
|
>Send me exclusive offers and updates</label
|
|
>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="terms" name="terms" required />
|
|
<label for="terms"
|
|
>I agree to the <a href="/terms">Terms</a> and
|
|
<a href="/privacy">Privacy Policy</a></label
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn-primary" id="submitBtn">
|
|
<i class="bi bi-person-plus"></i>
|
|
<span id="btnText">Create Account</span>
|
|
<div class="spinner" id="spinner"></div>
|
|
</button>
|
|
</form>
|
|
|
|
<div class="divider">
|
|
<span>or sign up with</span>
|
|
</div>
|
|
|
|
<div class="social-btns">
|
|
<button
|
|
type="button"
|
|
class="social-btn google"
|
|
onclick="showToast('Google signup coming soon!', 'info')"
|
|
>
|
|
<i class="bi bi-google"></i>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="social-btn facebook"
|
|
onclick="showToast('Facebook signup coming soon!', 'info')"
|
|
>
|
|
<i class="bi bi-facebook"></i>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="social-btn apple"
|
|
onclick="showToast('Apple signup coming soon!', 'info')"
|
|
>
|
|
<i class="bi bi-apple"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="form-footer">
|
|
<p>Already have an account?<a href="/signin">Sign In</a></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Verification View -->
|
|
<div class="verification-view" id="verificationView">
|
|
<div class="verification-icon">
|
|
<i class="bi bi-envelope-check"></i>
|
|
</div>
|
|
|
|
<div class="verification-text">
|
|
<h3>Verify Your Email</h3>
|
|
<p>
|
|
We sent a 6-digit code to<br /><span
|
|
class="email-highlight"
|
|
id="verifyEmail"
|
|
>your@email.com</span
|
|
>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="step-indicator">
|
|
<div class="step-dot" id="vStep1"></div>
|
|
<div class="step-dot active" id="vStep2"></div>
|
|
</div>
|
|
|
|
<form id="verifyForm">
|
|
<div class="code-inputs" id="codeInputs">
|
|
<input
|
|
type="text"
|
|
maxlength="1"
|
|
pattern="[0-9]"
|
|
inputmode="numeric"
|
|
autocomplete="off"
|
|
/>
|
|
<input
|
|
type="text"
|
|
maxlength="1"
|
|
pattern="[0-9]"
|
|
inputmode="numeric"
|
|
autocomplete="off"
|
|
/>
|
|
<input
|
|
type="text"
|
|
maxlength="1"
|
|
pattern="[0-9]"
|
|
inputmode="numeric"
|
|
autocomplete="off"
|
|
/>
|
|
<input
|
|
type="text"
|
|
maxlength="1"
|
|
pattern="[0-9]"
|
|
inputmode="numeric"
|
|
autocomplete="off"
|
|
/>
|
|
<input
|
|
type="text"
|
|
maxlength="1"
|
|
pattern="[0-9]"
|
|
inputmode="numeric"
|
|
autocomplete="off"
|
|
/>
|
|
<input
|
|
type="text"
|
|
maxlength="1"
|
|
pattern="[0-9]"
|
|
inputmode="numeric"
|
|
autocomplete="off"
|
|
/>
|
|
</div>
|
|
|
|
<button type="submit" class="btn-primary" id="verifyBtn">
|
|
<i class="bi bi-check-circle"></i>
|
|
<span id="verifyBtnText">Verify Email</span>
|
|
<div class="spinner" id="verifySpinner"></div>
|
|
</button>
|
|
</form>
|
|
|
|
<div class="resend-section">
|
|
<p>Didn't receive the code?</p>
|
|
<button
|
|
type="button"
|
|
class="resend-btn"
|
|
id="resendBtn"
|
|
onclick="resendCode()"
|
|
>
|
|
Resend Code
|
|
</button>
|
|
</div>
|
|
|
|
<div style="text-align: center">
|
|
<a
|
|
href="#"
|
|
class="back-btn"
|
|
onclick="backToRegister(); return false;"
|
|
>
|
|
<i class="bi bi-arrow-left"></i> Back to registration
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="back-home">
|
|
<a href="/"><i class="bi bi-arrow-left"></i> Back to Shop</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let userEmail = "";
|
|
let resendTimer = 0;
|
|
|
|
function togglePassword() {
|
|
const passwordInput = document.getElementById("password");
|
|
const toggleIcon = document.getElementById("toggleIcon");
|
|
|
|
if (passwordInput.type === "password") {
|
|
passwordInput.type = "text";
|
|
toggleIcon.classList.remove("bi-eye");
|
|
toggleIcon.classList.add("bi-eye-slash");
|
|
} else {
|
|
passwordInput.type = "password";
|
|
toggleIcon.classList.remove("bi-eye-slash");
|
|
toggleIcon.classList.add("bi-eye");
|
|
}
|
|
}
|
|
|
|
function showToast(message, type = "success") {
|
|
const toast = document.getElementById("toast");
|
|
const toastMessage = document.getElementById("toastMessage");
|
|
const icon = toast.querySelector("i");
|
|
|
|
toastMessage.textContent = message;
|
|
toast.className = "toast " + type;
|
|
|
|
icon.className = "bi";
|
|
if (type === "success") icon.classList.add("bi-check-circle");
|
|
else if (type === "error") icon.classList.add("bi-exclamation-circle");
|
|
else if (type === "info") icon.classList.add("bi-info-circle");
|
|
|
|
toast.classList.add("show");
|
|
setTimeout(() => toast.classList.remove("show"), 4000);
|
|
}
|
|
|
|
// Password strength checker
|
|
document
|
|
.getElementById("password")
|
|
.addEventListener("input", function () {
|
|
const password = this.value;
|
|
const fill = document.getElementById("strengthFill");
|
|
const text = document.getElementById("strengthText");
|
|
|
|
let strength = 0;
|
|
if (password.length >= 8) strength++;
|
|
if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++;
|
|
if (/[0-9]/.test(password)) strength++;
|
|
if (/[^a-zA-Z0-9]/.test(password)) strength++;
|
|
|
|
fill.className = "strength-fill";
|
|
if (password.length === 0) {
|
|
text.textContent = "";
|
|
} else if (strength <= 1) {
|
|
fill.classList.add("weak");
|
|
text.textContent = "Weak password";
|
|
} else if (strength === 2) {
|
|
fill.classList.add("fair");
|
|
text.textContent = "Fair password";
|
|
} else if (strength === 3) {
|
|
fill.classList.add("good");
|
|
text.textContent = "Good password";
|
|
} else {
|
|
fill.classList.add("strong");
|
|
text.textContent = "Strong password";
|
|
}
|
|
});
|
|
|
|
// Registration form submission
|
|
document
|
|
.getElementById("signupForm")
|
|
.addEventListener("submit", async function (e) {
|
|
e.preventDefault();
|
|
|
|
const firstName = document.getElementById("firstName").value.trim();
|
|
const lastName = document.getElementById("lastName").value.trim();
|
|
const email = document.getElementById("email").value.trim();
|
|
const password = document.getElementById("password").value;
|
|
const newsletter = document.getElementById("newsletter").checked;
|
|
const terms = document.getElementById("terms").checked;
|
|
|
|
if (!firstName || !lastName) {
|
|
showToast("Please enter your full name", "error");
|
|
return;
|
|
}
|
|
|
|
if (!email || !email.includes("@")) {
|
|
showToast("Please enter a valid email", "error");
|
|
return;
|
|
}
|
|
|
|
if (password.length < 8) {
|
|
showToast("Password must be at least 8 characters", "error");
|
|
return;
|
|
}
|
|
|
|
if (!terms) {
|
|
showToast("Please agree to the terms and conditions", "error");
|
|
return;
|
|
}
|
|
|
|
const submitBtn = document.getElementById("submitBtn");
|
|
const btnText = document.getElementById("btnText");
|
|
const spinner = document.getElementById("spinner");
|
|
|
|
submitBtn.disabled = true;
|
|
btnText.style.display = "none";
|
|
submitBtn.querySelector("i").style.display = "none";
|
|
spinner.style.display = "block";
|
|
|
|
try {
|
|
const response = await fetch("/api/customers/signup", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
firstName,
|
|
lastName,
|
|
email,
|
|
password,
|
|
newsletterSubscribed: newsletter,
|
|
}),
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
userEmail = email;
|
|
showVerificationView();
|
|
showToast("Verification code sent!", "success");
|
|
startResendTimer();
|
|
} else {
|
|
showToast(data.message || "Registration failed", "error");
|
|
resetSubmitBtn();
|
|
}
|
|
} catch (error) {
|
|
console.error("Signup error:", error);
|
|
showToast("Connection error. Please try again.", "error");
|
|
resetSubmitBtn();
|
|
}
|
|
});
|
|
|
|
function resetSubmitBtn() {
|
|
const submitBtn = document.getElementById("submitBtn");
|
|
const btnText = document.getElementById("btnText");
|
|
const spinner = document.getElementById("spinner");
|
|
|
|
submitBtn.disabled = false;
|
|
btnText.style.display = "inline";
|
|
submitBtn.querySelector("i").style.display = "inline";
|
|
spinner.style.display = "none";
|
|
}
|
|
|
|
function showVerificationView() {
|
|
document.getElementById("registerView").classList.add("hidden");
|
|
document.getElementById("verificationView").classList.add("active");
|
|
document.getElementById("verifyEmail").textContent = userEmail;
|
|
|
|
const inputs = document.querySelectorAll("#codeInputs input");
|
|
setTimeout(() => inputs[0].focus(), 100);
|
|
}
|
|
|
|
function backToRegister() {
|
|
document.getElementById("registerView").classList.remove("hidden");
|
|
document.getElementById("verificationView").classList.remove("active");
|
|
resetSubmitBtn();
|
|
}
|
|
|
|
// Code input handling
|
|
const codeInputs = document.querySelectorAll("#codeInputs input");
|
|
codeInputs.forEach((input, index) => {
|
|
input.addEventListener("input", function () {
|
|
this.value = this.value.replace(/[^0-9]/g, "");
|
|
|
|
if (this.value) {
|
|
this.classList.add("filled");
|
|
if (index < codeInputs.length - 1) {
|
|
codeInputs[index + 1].focus();
|
|
}
|
|
} else {
|
|
this.classList.remove("filled");
|
|
}
|
|
});
|
|
|
|
input.addEventListener("keydown", function (e) {
|
|
if (e.key === "Backspace" && !this.value && index > 0) {
|
|
codeInputs[index - 1].focus();
|
|
codeInputs[index - 1].value = "";
|
|
codeInputs[index - 1].classList.remove("filled");
|
|
}
|
|
});
|
|
|
|
input.addEventListener("paste", function (e) {
|
|
e.preventDefault();
|
|
const pasteData = e.clipboardData
|
|
.getData("text")
|
|
.replace(/[^0-9]/g, "")
|
|
.slice(0, 6);
|
|
pasteData.split("").forEach((char, i) => {
|
|
if (codeInputs[i]) {
|
|
codeInputs[i].value = char;
|
|
codeInputs[i].classList.add("filled");
|
|
}
|
|
});
|
|
if (pasteData.length === 6) {
|
|
codeInputs[5].focus();
|
|
}
|
|
});
|
|
});
|
|
|
|
// Verification form submission
|
|
document
|
|
.getElementById("verifyForm")
|
|
.addEventListener("submit", async function (e) {
|
|
e.preventDefault();
|
|
|
|
const code = Array.from(codeInputs)
|
|
.map((i) => i.value)
|
|
.join("");
|
|
|
|
if (code.length !== 6) {
|
|
showToast("Please enter the complete 6-digit code", "error");
|
|
return;
|
|
}
|
|
|
|
const verifyBtn = document.getElementById("verifyBtn");
|
|
const verifyBtnText = document.getElementById("verifyBtnText");
|
|
const verifySpinner = document.getElementById("verifySpinner");
|
|
|
|
verifyBtn.disabled = true;
|
|
verifyBtnText.style.display = "none";
|
|
verifyBtn.querySelector("i").style.display = "none";
|
|
verifySpinner.style.display = "block";
|
|
|
|
try {
|
|
const response = await fetch("/api/customers/verify", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ email: userEmail, code }),
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
showToast("Email verified! Redirecting to login...", "success");
|
|
setTimeout(() => {
|
|
window.location.href = "/signin";
|
|
}, 1500);
|
|
} else {
|
|
showToast(data.message || "Invalid verification code", "error");
|
|
verifyBtn.disabled = false;
|
|
verifyBtnText.style.display = "inline";
|
|
verifyBtn.querySelector("i").style.display = "inline";
|
|
verifySpinner.style.display = "none";
|
|
|
|
codeInputs.forEach((input) => {
|
|
input.value = "";
|
|
input.classList.remove("filled");
|
|
});
|
|
codeInputs[0].focus();
|
|
}
|
|
} catch (error) {
|
|
console.error("Verify error:", error);
|
|
showToast("Connection error. Please try again.", "error");
|
|
verifyBtn.disabled = false;
|
|
verifyBtnText.style.display = "inline";
|
|
verifyBtn.querySelector("i").style.display = "inline";
|
|
verifySpinner.style.display = "none";
|
|
}
|
|
});
|
|
|
|
function startResendTimer() {
|
|
resendTimer = 60;
|
|
const resendBtn = document.getElementById("resendBtn");
|
|
resendBtn.disabled = true;
|
|
|
|
const interval = setInterval(() => {
|
|
resendTimer--;
|
|
resendBtn.textContent = `Resend in ${resendTimer}s`;
|
|
|
|
if (resendTimer <= 0) {
|
|
clearInterval(interval);
|
|
resendBtn.disabled = false;
|
|
resendBtn.textContent = "Resend Code";
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
async function resendCode() {
|
|
try {
|
|
const response = await fetch("/api/customers/resend-code", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ email: userEmail }),
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
showToast("New code sent!", "success");
|
|
startResendTimer();
|
|
} else {
|
|
showToast(data.message || "Failed to resend code", "error");
|
|
}
|
|
} catch (error) {
|
|
showToast("Connection error", "error");
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|