694 lines
18 KiB
Vue
694 lines
18 KiB
Vue
<template>
|
|
<div class="login-container">
|
|
<div class="card-modern auth-card">
|
|
<div class="auth-header">
|
|
<div class="logo-wrapper">
|
|
<svg viewBox="0 0 24 24" fill="none">
|
|
<path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
|
|
<circle cx="12" cy="13" r="2" fill="currentColor"/>
|
|
</svg>
|
|
</div>
|
|
<h1>Welcome Back!</h1>
|
|
<p class="subtitle">Ready to track your training? Log in to continue your journey.</p>
|
|
</div>
|
|
|
|
<form @submit.prevent="handleLogin" class="form-modern">
|
|
<!-- Username Field -->
|
|
<div class="form-group-modern">
|
|
<label for="username" class="form-label-modern">
|
|
<svg class="label-icon" viewBox="0 0 24 24" fill="none">
|
|
<path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
|
|
</svg>
|
|
Username
|
|
</label>
|
|
<input
|
|
id="username"
|
|
v-model="form.username"
|
|
type="text"
|
|
class="form-input-modern"
|
|
placeholder="Enter your username"
|
|
required
|
|
:disabled="auth.loading"
|
|
autocomplete="username"
|
|
/>
|
|
<span class="form-helper-text">Your unique account identifier</span>
|
|
</div>
|
|
|
|
<!-- Password Field -->
|
|
<div class="form-group-modern">
|
|
<label for="password" class="form-label-modern">
|
|
<svg class="label-icon" viewBox="0 0 24 24" fill="none">
|
|
<rect x="5" y="11" width="14" height="10" rx="2" stroke="currentColor" stroke-width="2"/>
|
|
<path d="M8 11V7C8 5.93913 8.42143 4.92172 9.17157 4.17157C9.92172 3.42143 10.9391 3 12 3C13.0609 3 14.0783 3.42143 14.8284 4.17157C15.5786 4.92172 16 5.93913 16 7V11" stroke="currentColor" stroke-width="2"/>
|
|
</svg>
|
|
Password
|
|
</label>
|
|
<div class="input-wrapper">
|
|
<input
|
|
id="password"
|
|
v-model="form.password"
|
|
:type="showPassword ? 'text' : 'password'"
|
|
class="form-input-modern"
|
|
placeholder="Enter your password"
|
|
required
|
|
:disabled="auth.loading"
|
|
autocomplete="current-password"
|
|
/>
|
|
<button
|
|
type="button"
|
|
@click="showPassword = !showPassword"
|
|
class="password-toggle-btn"
|
|
:title="showPassword ? 'Hide password' : 'Show password'"
|
|
:aria-label="showPassword ? 'Hide password' : 'Show password'"
|
|
>
|
|
<svg v-if="showPassword" viewBox="0 0 24 24" fill="none">
|
|
<path d="M1 12S6 4 12 4C18 4 23 12 23 12S18 20 12 20C6 20 1 12 1 12Z" stroke="currentColor" stroke-width="2"/>
|
|
<circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
|
|
</svg>
|
|
<svg v-else viewBox="0 0 24 24" fill="none">
|
|
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20C7 20 2.73 16.46 1 11.64M9.9 4.24C10.94 4.09 11.97 4 12 4C17 4 21.27 7.54 23 12.35" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
<line x1="1" y1="1" x2="23" y2="23" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<span class="form-helper-text">Keep your account secure</span>
|
|
</div>
|
|
|
|
<!-- Remember Me & Forgot Password -->
|
|
<div class="form-options">
|
|
<label class="remember-checkbox">
|
|
<input v-model="rememberMe" type="checkbox" />
|
|
<span>Keep me logged in on this device</span>
|
|
</label>
|
|
<RouterLink to="/password-reset" class="forgot-link">
|
|
Forgot your password?
|
|
</RouterLink>
|
|
</div>
|
|
|
|
<!-- Info Box -->
|
|
<div class="info-box info-box-info">
|
|
<svg viewBox="0 0 24 24" fill="none">
|
|
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
|
|
<line x1="12" y1="8" x2="12" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
<line x1="12" y1="16" x2="12.01" y2="16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
<div>
|
|
<strong>Tip:</strong> For security, never share your login credentials. Use a strong, unique password.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error Message -->
|
|
<div v-if="auth.error" class="info-box info-box-danger">
|
|
<svg viewBox="0 0 24 24" fill="none">
|
|
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
|
|
<line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2"/>
|
|
<line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2"/>
|
|
</svg>
|
|
<div>
|
|
<div class="form-error-text">
|
|
<strong>Login Failed:</strong> {{ auth.error }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Success State -->
|
|
<div v-if="loginSuccess" class="info-box info-box-success">
|
|
<svg viewBox="0 0 24 24" fill="none">
|
|
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
|
|
<path d="m9 12 2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
<div>
|
|
<strong>Success!</strong> Redirecting to your dashboard...
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Login Button -->
|
|
<button type="submit" :disabled="auth.loading" class="btn-modern btn-modern-primary btn-modern-large">
|
|
<span v-if="auth.loading" class="loading-content">
|
|
<svg class="spinner" viewBox="0 0 24 24">
|
|
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none" opacity="0.25"/>
|
|
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none" stroke-dasharray="31.416" stroke-dashoffset="31.416" opacity="0.75"/>
|
|
</svg>
|
|
Logging in...
|
|
</span>
|
|
<span v-else>
|
|
<svg viewBox="0 0 24 24" fill="none" style="width: 20px; height: 20px;">
|
|
<path d="M15 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M10 17L15 12L10 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M15 12H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
Log In
|
|
</span>
|
|
</button>
|
|
</form>
|
|
|
|
<!-- Divider -->
|
|
<div class="auth-divider">
|
|
<span>New to RideAware?</span>
|
|
</div>
|
|
|
|
<!-- Sign Up Link -->
|
|
<div class="auth-footer">
|
|
<p>Don't have an account yet? Join the community!</p>
|
|
<RouterLink to="/signup" class="btn-modern btn-modern-secondary">
|
|
Create Free Account
|
|
<svg viewBox="0 0 24 24" fill="none" style="width: 20px; height: 20px;">
|
|
<line x1="5" y1="12" x2="19" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
<polyline points="12 5 19 12 12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</RouterLink>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Background Decorations -->
|
|
<div class="background-decoration">
|
|
<div class="decoration-blob blob-1"></div>
|
|
<div class="decoration-blob blob-2"></div>
|
|
<div class="decoration-blob blob-3"></div>
|
|
</div>
|
|
|
|
<!-- Bottom Link -->
|
|
<div class="bottom-link">
|
|
<RouterLink to="/" class="btn-modern btn-modern-secondary">
|
|
<svg viewBox="0 0 24 24" fill="none" style="width: 16px; height: 16px;">
|
|
<path d="M19 12H5M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
Back to Home
|
|
</RouterLink>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useAuth } from '@/composables/useAuth'
|
|
|
|
const router = useRouter()
|
|
const auth = useAuth()
|
|
|
|
const showPassword = ref(false)
|
|
const rememberMe = ref(false)
|
|
const loginSuccess = ref(false)
|
|
|
|
const form = reactive({
|
|
username: '',
|
|
password: ''
|
|
})
|
|
|
|
async function handleLogin() {
|
|
try {
|
|
await auth.login(form.username, form.password)
|
|
if (rememberMe.value) {
|
|
localStorage.setItem('rememberMe', 'true')
|
|
localStorage.setItem('username', form.username)
|
|
} else {
|
|
localStorage.removeItem('rememberMe')
|
|
localStorage.removeItem('username')
|
|
}
|
|
loginSuccess.value = true
|
|
setTimeout(() => {
|
|
router.push('/dashboard')
|
|
}, 1000)
|
|
} catch (error) {
|
|
console.error('Login error:', error)
|
|
loginSuccess.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.login-container {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--gradient-primary);
|
|
padding: var(--spacing-md);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ============================================
|
|
AUTH CARD
|
|
============================================ */
|
|
.auth-card {
|
|
max-width: 520px;
|
|
width: 100%;
|
|
animation: slideUp var(--transition-slower) cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* ============================================
|
|
AUTH HEADER
|
|
============================================ */
|
|
.auth-header {
|
|
text-align: center;
|
|
margin-bottom: var(--spacing-2xl);
|
|
}
|
|
|
|
.logo-wrapper {
|
|
width: 80px;
|
|
height: 80px;
|
|
margin: 0 auto var(--spacing-lg);
|
|
padding: var(--spacing-lg);
|
|
background: var(--gradient-primary);
|
|
border-radius: var(--radius-2xl);
|
|
color: var(--color-text-inverse);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
animation: logoFloat 0.8s ease-out 0.2s both;
|
|
}
|
|
|
|
.logo-wrapper svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0 0 var(--spacing-sm) 0;
|
|
font-size: var(--font-size-3xl);
|
|
font-weight: var(--font-weight-bold);
|
|
color: var(--color-text-primary);
|
|
animation: titleSlide var(--transition-slower) ease-out 0.3s both;
|
|
}
|
|
|
|
.subtitle {
|
|
margin: var(--spacing-sm) 0 0 0;
|
|
font-size: var(--font-size-base);
|
|
color: var(--color-text-secondary);
|
|
line-height: var(--line-height-relaxed);
|
|
animation: subtitleFade var(--transition-slower) ease-out 0.4s both;
|
|
}
|
|
|
|
/* ============================================
|
|
FORM ENHANCEMENTS
|
|
============================================ */
|
|
.label-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-right: var(--spacing-xs);
|
|
vertical-align: middle;
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.input-wrapper {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.password-toggle-btn {
|
|
position: absolute;
|
|
right: 12px;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: none;
|
|
border: none;
|
|
color: var(--color-text-secondary);
|
|
cursor: pointer;
|
|
transition: all var(--transition-base);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.password-toggle-btn svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.password-toggle-btn:hover {
|
|
color: var(--color-primary);
|
|
background: rgba(0, 102, 204, 0.1);
|
|
}
|
|
|
|
/* ============================================
|
|
FORM OPTIONS
|
|
============================================ */
|
|
.form-options {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: var(--font-size-sm);
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.remember-checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
cursor: pointer;
|
|
color: var(--color-text-secondary);
|
|
font-weight: var(--font-weight-medium);
|
|
user-select: none;
|
|
}
|
|
|
|
.remember-checkbox input {
|
|
width: 18px;
|
|
height: 18px;
|
|
cursor: pointer;
|
|
accent-color: var(--color-primary);
|
|
border: 2px solid var(--color-border);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.forgot-link {
|
|
color: var(--color-primary);
|
|
text-decoration: none;
|
|
font-weight: var(--font-weight-semibold);
|
|
transition: all var(--transition-base);
|
|
}
|
|
|
|
.forgot-link:hover {
|
|
color: var(--color-primary-dark);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ============================================
|
|
BUTTON ENHANCEMENTS
|
|
============================================ */
|
|
.btn-modern-large {
|
|
width: 100%;
|
|
padding: 16px 32px;
|
|
font-size: var(--font-size-lg);
|
|
min-height: 56px;
|
|
}
|
|
|
|
.loading-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.spinner {
|
|
width: 22px;
|
|
height: 22px;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
/* ============================================
|
|
INFO BOXES
|
|
============================================ */
|
|
.info-box {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.info-box svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* ============================================
|
|
DIVIDER
|
|
============================================ */
|
|
.auth-divider {
|
|
position: relative;
|
|
text-align: center;
|
|
margin: var(--spacing-2xl) 0 var(--spacing-xl) 0;
|
|
}
|
|
|
|
.auth-divider::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: var(--color-divider);
|
|
}
|
|
|
|
.auth-divider span {
|
|
position: relative;
|
|
background: var(--color-surface);
|
|
padding: 0 var(--spacing-lg);
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--font-size-base);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
/* ============================================
|
|
AUTH FOOTER
|
|
============================================ */
|
|
.auth-footer {
|
|
text-align: center;
|
|
}
|
|
|
|
.auth-footer p {
|
|
margin: 0 0 var(--spacing-md) 0;
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--font-size-base);
|
|
line-height: var(--line-height-relaxed);
|
|
}
|
|
|
|
.auth-footer .btn-modern {
|
|
width: 100%;
|
|
}
|
|
|
|
/* ============================================
|
|
BACKGROUND DECORATIONS
|
|
============================================ */
|
|
.background-decoration {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.decoration-blob {
|
|
position: absolute;
|
|
border-radius: var(--radius-full);
|
|
background: rgba(255, 255, 255, 0.1);
|
|
animation: float 8s ease-in-out infinite;
|
|
}
|
|
|
|
.blob-1 {
|
|
width: 400px;
|
|
height: 400px;
|
|
top: -10%;
|
|
left: -10%;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.blob-2 {
|
|
width: 300px;
|
|
height: 300px;
|
|
bottom: -5%;
|
|
right: -5%;
|
|
animation-delay: 2s;
|
|
}
|
|
|
|
.blob-3 {
|
|
width: 200px;
|
|
height: 200px;
|
|
top: 50%;
|
|
left: -5%;
|
|
animation-delay: 4s;
|
|
}
|
|
|
|
/* ============================================
|
|
BOTTOM LINK
|
|
============================================ */
|
|
.bottom-link {
|
|
position: absolute;
|
|
bottom: var(--spacing-2xl);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 10;
|
|
}
|
|
|
|
.bottom-link .btn-modern {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
backdrop-filter: blur(10px);
|
|
color: white;
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.bottom-link .btn-modern:hover {
|
|
background: rgba(255, 255, 255, 0.25);
|
|
border-color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
/* ============================================
|
|
ANIMATIONS
|
|
============================================ */
|
|
@keyframes slideUp {
|
|
from {
|
|
transform: translateY(50px);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes logoFloat {
|
|
0% {
|
|
transform: scale(0);
|
|
}
|
|
50% {
|
|
transform: scale(1.1);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes titleSlide {
|
|
from {
|
|
transform: translateY(20px);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes subtitleFade {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes formSlide {
|
|
from {
|
|
transform: translateY(20px);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% {
|
|
transform: translateY(0px) rotate(0deg);
|
|
}
|
|
50% {
|
|
transform: translateY(-30px) rotate(180deg);
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
RESPONSIVE DESIGN
|
|
============================================ */
|
|
@media (max-width: 640px) {
|
|
.login-container {
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.auth-card {
|
|
padding: var(--spacing-xl);
|
|
}
|
|
|
|
.auth-header {
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.logo-wrapper {
|
|
width: 64px;
|
|
height: 64px;
|
|
margin-bottom: var(--spacing-md);
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
h1 {
|
|
font-size: var(--font-size-3xl);
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.form-options {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.auth-divider {
|
|
margin: var(--spacing-xl) 0 var(--spacing-md) 0;
|
|
}
|
|
|
|
.blob-1 {
|
|
width: 300px;
|
|
height: 300px;
|
|
}
|
|
|
|
.blob-2 {
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
|
|
.blob-3 {
|
|
width: 150px;
|
|
height: 150px;
|
|
}
|
|
|
|
.bottom-link a {
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.auth-card {
|
|
padding: var(--spacing-lg);
|
|
}
|
|
|
|
.auth-header {
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.logo-wrapper {
|
|
width: 56px;
|
|
height: 56px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: var(--font-size-2xl);
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.bottom-link {
|
|
bottom: var(--spacing-md);
|
|
}
|
|
}
|
|
|
|
/* Accessibility */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.auth-card,
|
|
.logo-wrapper,
|
|
h1,
|
|
.subtitle,
|
|
.decoration-blob {
|
|
animation: none;
|
|
}
|
|
}
|
|
</style> |