RideAware/rideaware-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add linting, redesign pages, move css to files

Browse Source
This commit is contained in:
Cipher Vance
2026-01-21 07:32:34 -06:00
parent d3c1dabf64
commit b50d28be20
16 changed files with 6530 additions and 4466 deletions
Download Patch File Download Diff File Expand all files Collapse all files

635
src/components/UserLogin.vue
View File

@@ -1,46 +1,55 @@
<template>
<div class="login-container">
<div class="login-card">
<div class="card-header">
<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">Train with Focus. Ride with Awareness.</p>
<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="login-form">
<form @submit.prevent="handleLogin" class="form-modern">
<!-- Username Field -->
<div class="form-group">
<label for="username">Username</label>
<div class="input-wrapper">
<input
id="username"
v-model="form.username"
type="text"
placeholder="Enter your username"
required
:disabled="auth.loading"
autocomplete="username"
/>
<svg class="input-icon" viewBox="0 0 24 24" fill="none">
<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>
</div>
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">
<label for="password">Password</label>
<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"
@@ -49,8 +58,9 @@
<button
type="button"
@click="showPassword = !showPassword"
class="password-toggle"
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"/>
@@ -62,21 +72,59 @@
</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-me">
<label class="remember-checkbox">
<input v-model="rememberMe" type="checkbox" />
<span>Remember me</span>
<span>Keep me logged in on this device</span>
</label>
<RouterLink to="/password-reset" class="forgot-password">
Forgot password?
<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-primary">
<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"/>
@@ -84,34 +132,28 @@
</svg>
Logging in...
</span>
<span v-else>Login</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>
<!-- Error Message -->
<div v-if="auth.error" class="error-message">
<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>
<p class="error-title">Login Failed</p>
<p class="error-text">{{ auth.error }}</p>
</div>
</div>
<!-- Divider -->
<div class="divider">
<span>Or</span>
<div class="auth-divider">
<span>New to RideAware?</span>
</div>
<!-- Sign Up Link -->
<div class="signup-section">
<p>Don't have an account?</p>
<RouterLink to="/signup" class="signup-link">
Sign up now
<svg viewBox="0 0 24 24" fill="none">
<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>
@@ -128,7 +170,12 @@
<!-- Bottom Link -->
<div class="bottom-link">
<RouterLink to="/">Back to Home</RouterLink>
<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>
@@ -143,6 +190,7 @@ const auth = useAuth()
const showPassword = ref(false)
const rememberMe = ref(false)
const loginSuccess = ref(false)
const form = reactive({
username: '',
@@ -159,9 +207,13 @@ async function handleLogin() {
localStorage.removeItem('rememberMe')
localStorage.removeItem('username')
}
router.push('/dashboard')
loginSuccess.value = true
setTimeout(() => {
router.push('/dashboard')
}, 1000)
} catch (error) {
console.error('Login error:', error)
loginSuccess.value = false
}
}
</script>
@@ -172,45 +224,39 @@ async function handleLogin() {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 1rem;
background: var(--gradient-primary);
padding: var(--spacing-md);
position: relative;
overflow: hidden;
}
/* ============================================
LOGIN CARD
AUTH CARD
============================================ */
.login-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 2rem;
padding: 3rem;
max-width: 480px;
.auth-card {
max-width: 520px;
width: 100%;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.2);
animation: slideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
animation: slideUp var(--transition-slower) cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
z-index: 10;
}
/* ============================================
CARD HEADER
AUTH HEADER
============================================ */
.card-header {
.auth-header {
text-align: center;
margin-bottom: 2rem;
margin-bottom: var(--spacing-2xl);
}
.logo-wrapper {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
padding: 1.5rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 2rem;
color: white;
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;
@@ -223,43 +269,30 @@ async function handleLogin() {
}
h1 {
margin: 0 0 0.75rem 0;
font-size: 2rem;
font-weight: 800;
color: #1f2937;
animation: titleSlide 0.6s ease-out 0.3s both;
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: 0;
font-size: 1rem;
color: #6b7280;
font-weight: 500;
font-style: italic;
animation: subtitleFade 0.6s ease-out 0.4s both;
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;
}
/* ============================================
LOGIN FORM
FORM ENHANCEMENTS
============================================ */
.login-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
animation: formSlide 0.6s ease-out 0.5s both;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
label {
font-weight: 600;
color: #374151;
font-size: 0.95rem;
display: block;
.label-icon {
width: 18px;
height: 18px;
margin-right: var(--spacing-xs);
vertical-align: middle;
color: var(--color-primary);
}
.input-wrapper {
@@ -268,67 +301,31 @@ label {
align-items: center;
}
input {
width: 100%;
padding: 1rem 1rem 1rem 3rem;
border: 2px solid #e5e7eb;
border-radius: 1rem;
font-size: 1rem;
font-family: inherit;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: white;
box-sizing: border-box;
}
input:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
transform: translateY(-2px);
}
input:disabled {
background: #f9fafb;
cursor: not-allowed;
opacity: 0.6;
}
input::placeholder {
color: #9ca3af;
}
.input-icon {
.password-toggle-btn {
position: absolute;
left: 1rem;
width: 20px;
height: 20px;
color: #9ca3af;
pointer-events: none;
}
.password-toggle {
position: absolute;
right: 1rem;
right: 12px;
width: 24px;
height: 24px;
background: none;
border: none;
color: #9ca3af;
color: var(--color-text-secondary);
cursor: pointer;
transition: all 0.2s ease;
transition: all var(--transition-base);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
padding: 4px;
border-radius: 4px;
}
.password-toggle svg {
.password-toggle-btn svg {
width: 100%;
height: 100%;
}
.password-toggle:hover {
color: #667eea;
.password-toggle-btn:hover {
color: var(--color-primary);
background: rgba(0, 102, 204, 0.1);
}
/* ============================================
@@ -338,186 +335,124 @@ input::placeholder {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.9rem;
font-size: var(--font-size-sm);
flex-wrap: wrap;
gap: var(--spacing-sm);
}
.remember-me {
.remember-checkbox {
display: flex;
align-items: center;
gap: 0.5rem;
gap: var(--spacing-sm);
cursor: pointer;
color: #374151;
font-weight: 500;
color: var(--color-text-secondary);
font-weight: var(--font-weight-medium);
user-select: none;
}
.remember-me input {
width: auto;
padding: 0;
border: 2px solid #e5e7eb;
border-radius: 0.375rem;
.remember-checkbox input {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: #667eea;
margin: 0;
accent-color: var(--color-primary);
border: 2px solid var(--color-border);
border-radius: 4px;
}
.remember-me input:checked {
background: #667eea;
}
.forgot-password {
color: #667eea;
.forgot-link {
color: var(--color-primary);
text-decoration: none;
font-weight: 600;
transition: all 0.2s ease;
font-weight: var(--font-weight-semibold);
transition: all var(--transition-base);
}
.forgot-password:hover {
color: #764ba2;
.forgot-link:hover {
color: var(--color-primary-dark);
text-decoration: underline;
}
/* ============================================
SUBMIT BUTTON
BUTTON ENHANCEMENTS
============================================ */
.btn-primary {
.btn-modern-large {
width: 100%;
padding: 1.125rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 1rem;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
display: flex;
align-items: center;
justify-content: center;
min-height: 52px;
}
.btn-primary:hover:not(:disabled) {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}
.btn-primary:active:not(:disabled) {
transform: translateY(-1px);
}
.btn-primary:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
padding: 16px 32px;
font-size: var(--font-size-lg);
min-height: 56px;
}
.loading-content {
display: flex;
align-items: center;
gap: 0.75rem;
gap: var(--spacing-sm);
}
.spinner {
width: 20px;
height: 20px;
width: 22px;
height: 22px;
animation: spin 1s linear infinite;
}
/* ============================================
ERROR MESSAGE
INFO BOXES
============================================ */
.error-message {
.info-box {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: #fef2f2;
border: 2px solid #fecaca;
border-radius: 1rem;
color: #dc2626;
animation: slideInError 0.4s cubic-bezier(0.4, 0, 0.2, 1);
align-items: flex-start;
gap: var(--spacing-md);
}
.error-message svg {
width: 24px;
height: 24px;
.info-box svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.error-title {
margin: 0 0 0.25rem 0;
font-weight: 600;
font-size: 0.95rem;
}
.error-text {
margin: 0;
font-size: 0.85rem;
opacity: 0.9;
margin-top: 2px;
}
/* ============================================
DIVIDER
============================================ */
.divider {
.auth-divider {
position: relative;
text-align: center;
margin: 1.5rem 0;
margin: var(--spacing-2xl) 0 var(--spacing-xl) 0;
}
.divider::before {
.auth-divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #e5e7eb;
height: 2px;
background: var(--color-divider);
}
.divider span {
.auth-divider span {
position: relative;
background: white;
padding: 0 1rem;
color: #9ca3af;
font-size: 0.9rem;
font-weight: 500;
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);
}
/* ============================================
SIGNUP SECTION
AUTH FOOTER
============================================ */
.signup-section {
.auth-footer {
text-align: center;
}
.signup-section p {
margin: 0 0 0.75rem 0;
color: #6b7280;
font-size: 0.95rem;
.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);
}
.signup-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: #667eea;
text-decoration: none;
font-weight: 700;
transition: all 0.2s ease;
}
.signup-link svg {
width: 16px;
height: 16px;
transition: all 0.2s ease;
}
.signup-link:hover {
color: #764ba2;
gap: 0.75rem;
.auth-footer .btn-modern {
width: 100%;
}
/* ============================================
@@ -532,7 +467,7 @@ input::placeholder {
.decoration-blob {
position: absolute;
border-radius: 50%;
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.1);
animation: float 8s ease-in-out infinite;
}
@@ -566,23 +501,22 @@ input::placeholder {
============================================ */
.bottom-link {
position: absolute;
bottom: 2rem;
bottom: var(--spacing-2xl);
left: 50%;
transform: translateX(-50%);
z-index: 10;
}
.bottom-link a {
.bottom-link .btn-modern {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
color: white;
text-decoration: none;
font-weight: 500;
transition: all 0.2s ease;
opacity: 0.8;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.bottom-link a:hover {
opacity: 1;
text-decoration: underline;
.bottom-link .btn-modern:hover {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.5);
}
/* ============================================
@@ -642,17 +576,6 @@ input::placeholder {
}
}
@keyframes slideInError {
from {
transform: translateX(-20px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
@@ -676,81 +599,39 @@ input::placeholder {
============================================ */
@media (max-width: 640px) {
.login-container {
padding: 1rem;
padding: var(--spacing-md);
}
.login-card {
padding: 2rem;
border-radius: 1.5rem;
.auth-card {
padding: var(--spacing-xl);
}
.card-header {
margin-bottom: 1.5rem;
.auth-header {
margin-bottom: var(--spacing-lg);
}
.logo-wrapper {
width: 64px;
height: 64px;
margin-bottom: 1rem;
padding: 1rem;
margin-bottom: var(--spacing-md);
padding: var(--spacing-md);
}
h1 {
font-size: 1.75rem;
font-size: var(--font-size-3xl);
}
.subtitle {
font-size: 0.9rem;
}
.login-form {
gap: 1.25rem;
font-size: var(--font-size-sm);
}
.form-options {
flex-direction: column;
gap: 1rem;
align-items: flex-start;
}
.remember-me {
width: 100%;
}
.forgot-password {
width: 100%;
text-align: center;
}
input {
padding: 0.875rem 0.875rem 0.875rem 2.75rem;
font-size: 16px;
}
.input-icon {
left: 0.75rem;
}
.password-toggle {
right: 0.75rem;
}
.error-message {
flex-direction: column;
text-align: center;
}
.divider {
margin: 1.25rem 0;
}
.divider::before {
left: -50px;
right: -50px;
}
.signup-section p {
font-size: 0.9rem;
.auth-divider {
margin: var(--spacing-xl) 0 var(--spacing-md) 0;
}
.blob-1 {
@@ -769,18 +650,17 @@ input::placeholder {
}
.bottom-link a {
font-size: 0.9rem;
font-size: var(--font-size-sm);
}
}
@media (max-width: 480px) {
.login-card {
padding: 1.5rem;
border-radius: 1.25rem;
.auth-card {
padding: var(--spacing-lg);
}
.card-header {
margin-bottom: 1.25rem;
.auth-header {
margin-bottom: var(--spacing-md);
}
.logo-wrapper {
@@ -789,87 +669,26 @@ input::placeholder {
}
h1 {
font-size: 1.5rem;
font-size: var(--font-size-2xl);
}
.subtitle {
font-size: 0.85rem;
}
label {
font-size: 0.9rem;
}
.btn-primary {
padding: 1rem;
font-size: 0.95rem;
}
.form-options {
font-size: 0.85rem;
}
.remember-me,
.forgot-password {
font-size: 0.85rem;
}
.divider span {
font-size: 0.85rem;
padding: 0 0.75rem;
}
.signup-section p {
margin-bottom: 0.5rem;
}
.signup-link {
font-size: 0.9rem;
}
.error-message {
gap: 0.75rem;
padding: 0.75rem;
}
.error-message svg {
width: 20px;
height: 20px;
}
.error-title {
font-size: 0.9rem;
}
.error-text {
font-size: 0.8rem;
font-size: var(--font-size-sm);
}
.bottom-link {
bottom: 1rem;
}
.bottom-link a {
font-size: 0.85rem;
bottom: var(--spacing-md);
}
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
.login-card,
.auth-card,
.logo-wrapper,
h1,
.subtitle,
.login-form,
.error-message,
.decoration-blob {
animation: none;
}
input:focus,
.btn-primary:hover,
.password-toggle:hover {
transform: none;
}
}
</style>