406 lines
8.1 KiB
Vue
406 lines
8.1 KiB
Vue
<template>
|
|
<div class="auth-page">
|
|
<div class="auth-container auth-container--small">
|
|
<div
|
|
v-motion
|
|
:initial="{ opacity: 0, y: 20 }"
|
|
:enter="{ opacity: 1, y: 0 }"
|
|
class="auth-content"
|
|
>
|
|
<!-- Logo -->
|
|
<div class="auth-logo">
|
|
<img src="/logo.svg" alt="MonacoUSA" />
|
|
<h1>MonacoUSA Portal</h1>
|
|
</div>
|
|
|
|
<!-- Step 1: Request Reset -->
|
|
<div v-if="!emailSent" class="reset-step">
|
|
<div class="auth-header">
|
|
<Icon name="lock" class="auth-header__icon" />
|
|
<h2>Forgot Your Password?</h2>
|
|
<p>No worries! Enter your email and we'll send you reset instructions.</p>
|
|
</div>
|
|
|
|
<form class="auth-form" @submit.prevent="handleResetRequest">
|
|
<FloatingInput
|
|
v-model="email"
|
|
label="Email Address"
|
|
type="email"
|
|
variant="glass"
|
|
leftIcon="mail"
|
|
helperText="Enter the email associated with your account"
|
|
:error="error"
|
|
required
|
|
/>
|
|
|
|
<MonacoButton
|
|
type="submit"
|
|
variant="primary"
|
|
size="lg"
|
|
block
|
|
:loading="loading"
|
|
>
|
|
Send Reset Instructions
|
|
</MonacoButton>
|
|
|
|
<MonacoButton
|
|
variant="ghost"
|
|
size="lg"
|
|
block
|
|
@click="goBack"
|
|
>
|
|
Back to Login
|
|
</MonacoButton>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Step 2: Email Sent Confirmation -->
|
|
<div v-else class="success-step">
|
|
<div class="success-icon">
|
|
<Icon name="mail" />
|
|
</div>
|
|
|
|
<div class="auth-header">
|
|
<h2>Check Your Email</h2>
|
|
<p>We've sent password reset instructions to:</p>
|
|
<p class="email-display">{{ email }}</p>
|
|
</div>
|
|
|
|
<div class="instructions">
|
|
<h3>What's next?</h3>
|
|
<ol>
|
|
<li>Check your email inbox (and spam folder)</li>
|
|
<li>Click the reset link in the email</li>
|
|
<li>Create your new password</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="resend-section">
|
|
<p>Didn't receive the email?</p>
|
|
<button
|
|
class="resend-button"
|
|
@click="handleResend"
|
|
:disabled="resendCooldown > 0"
|
|
>
|
|
{{ resendCooldown > 0 ? `Resend in ${resendCooldown}s` : 'Resend Email' }}
|
|
</button>
|
|
</div>
|
|
|
|
<MonacoButton
|
|
variant="primary"
|
|
size="lg"
|
|
block
|
|
@click="goBack"
|
|
>
|
|
Return to Login
|
|
</MonacoButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onUnmounted } from 'vue'
|
|
import FloatingInput from '~/components/ui/FloatingInput.vue'
|
|
import MonacoButton from '~/components/ui/MonacoButton.vue'
|
|
import Icon from '~/components/ui/Icon.vue'
|
|
|
|
const email = ref('')
|
|
const error = ref('')
|
|
const loading = ref(false)
|
|
const emailSent = ref(false)
|
|
const resendCooldown = ref(0)
|
|
let cooldownInterval: number | null = null
|
|
|
|
const handleResetRequest = async () => {
|
|
error.value = ''
|
|
loading.value = true
|
|
|
|
// Simulate API call
|
|
setTimeout(() => {
|
|
loading.value = false
|
|
emailSent.value = true
|
|
startResendCooldown()
|
|
}, 2000)
|
|
}
|
|
|
|
const handleResend = () => {
|
|
if (resendCooldown.value > 0) return
|
|
|
|
// Simulate resending email
|
|
console.log('Resending to:', email.value)
|
|
startResendCooldown()
|
|
}
|
|
|
|
const startResendCooldown = () => {
|
|
resendCooldown.value = 60
|
|
|
|
if (cooldownInterval) {
|
|
clearInterval(cooldownInterval)
|
|
}
|
|
|
|
cooldownInterval = setInterval(() => {
|
|
resendCooldown.value--
|
|
if (resendCooldown.value <= 0 && cooldownInterval) {
|
|
clearInterval(cooldownInterval)
|
|
cooldownInterval = null
|
|
}
|
|
}, 1000)
|
|
}
|
|
|
|
const goBack = () => {
|
|
window.location.href = '/auth/login'
|
|
}
|
|
|
|
onUnmounted(() => {
|
|
if (cooldownInterval) {
|
|
clearInterval(cooldownInterval)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.auth-page {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
|
|
padding: 2rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
// Background decoration
|
|
&::before,
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg,
|
|
rgba(220, 38, 38, 0.05) 0%,
|
|
rgba(220, 38, 38, 0.02) 100%);
|
|
}
|
|
|
|
&::before {
|
|
width: 500px;
|
|
height: 500px;
|
|
top: -250px;
|
|
left: -250px;
|
|
}
|
|
|
|
&::after {
|
|
width: 400px;
|
|
height: 400px;
|
|
bottom: -200px;
|
|
right: -200px;
|
|
}
|
|
}
|
|
|
|
.auth-container {
|
|
position: relative;
|
|
max-width: 500px;
|
|
width: 100%;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(20px);
|
|
border-radius: 24px;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
|
|
&--small {
|
|
max-width: 450px;
|
|
}
|
|
}
|
|
|
|
.auth-content {
|
|
padding: 3rem;
|
|
}
|
|
|
|
.auth-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
|
|
img {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: #dc2626;
|
|
}
|
|
}
|
|
|
|
.auth-header {
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
|
|
&__icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 64px;
|
|
height: 64px;
|
|
margin-bottom: 1rem;
|
|
background: linear-gradient(135deg,
|
|
rgba(220, 38, 38, 0.1) 0%,
|
|
rgba(220, 38, 38, 0.05) 100%);
|
|
border-radius: 16px;
|
|
color: #dc2626;
|
|
|
|
svg {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
margin: 0 0 0.75rem;
|
|
font-size: 1.75rem;
|
|
font-weight: 700;
|
|
color: #27272a;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
color: #6b7280;
|
|
line-height: 1.5;
|
|
}
|
|
}
|
|
|
|
.auth-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.success-step {
|
|
text-align: center;
|
|
}
|
|
|
|
.success-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 80px;
|
|
height: 80px;
|
|
margin-bottom: 1.5rem;
|
|
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
|
border-radius: 50%;
|
|
color: white;
|
|
animation: successPulse 2s ease-in-out infinite;
|
|
|
|
svg {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
}
|
|
|
|
@keyframes successPulse {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
|
|
}
|
|
50% {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 0 0 20px rgba(16, 185, 129, 0);
|
|
}
|
|
}
|
|
|
|
.email-display {
|
|
margin-top: 0.5rem;
|
|
padding: 0.75rem;
|
|
background: rgba(220, 38, 38, 0.05);
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
color: #dc2626;
|
|
}
|
|
|
|
.instructions {
|
|
margin: 2rem 0;
|
|
padding: 1.5rem;
|
|
background: rgba(107, 114, 128, 0.05);
|
|
border-radius: 12px;
|
|
text-align: left;
|
|
|
|
h3 {
|
|
margin: 0 0 1rem;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: #27272a;
|
|
}
|
|
|
|
ol {
|
|
margin: 0;
|
|
padding-left: 1.5rem;
|
|
|
|
li {
|
|
margin-bottom: 0.5rem;
|
|
color: #6b7280;
|
|
font-size: 0.875rem;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.resend-section {
|
|
margin: 2rem 0;
|
|
padding: 1.5rem;
|
|
background: linear-gradient(135deg,
|
|
rgba(220, 38, 38, 0.03) 0%,
|
|
rgba(220, 38, 38, 0.01) 100%);
|
|
border-radius: 12px;
|
|
|
|
p {
|
|
margin: 0 0 0.75rem;
|
|
font-size: 0.875rem;
|
|
color: #6b7280;
|
|
}
|
|
}
|
|
|
|
.resend-button {
|
|
padding: 0.5rem 1rem;
|
|
background: none;
|
|
border: 2px solid #dc2626;
|
|
border-radius: 8px;
|
|
color: #dc2626;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
|
|
&:hover:not(:disabled) {
|
|
background: #dc2626;
|
|
color: white;
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
// Responsive
|
|
@media (max-width: 640px) {
|
|
.auth-content {
|
|
padding: 2rem;
|
|
}
|
|
|
|
.auth-logo {
|
|
flex-direction: column;
|
|
|
|
h1 {
|
|
font-size: 1.25rem;
|
|
}
|
|
}
|
|
}
|
|
</style> |