Reworked login page

flightscore/src/pages/auth/login-page.ts

@@ -3,54 +3,159 @@ import { customElement, state } from 'lit/decorators.js';
 import { apiPost } from '../../api/api';
 import '../../components/ui-link';
 
-
 @customElement('login-page')
 export class LoginPage extends LitElement {
   static styles = css`
     :host {
       flex: 1;
-    background: linear-gradient(
-      135deg,
-      var(--color-accent),
-      color-mix(in srgb, var(--color-accent) 30%, black)
-    );
-    background-size: cover;
-    background-position: center;
       display: flex;
       justify-content: center;
       align-items: center;
+      background:
+        radial-gradient(
+          ellipse at 30% 20%,
+          color-mix(in srgb, var(--color-accent) 15%, transparent) 0%,
+          transparent 50%
+        ),
+        radial-gradient(
+          ellipse at 70% 80%,
+          color-mix(in srgb, var(--color-accent) 10%, transparent) 0%,
+          transparent 50%
+        ),
+        var(--color-bg);
+      padding: 1.5rem;
     }
 
-  
+    .card {
-  .form {
       width: 100%;
-    max-width: 380px;
+      max-width: 400px;
       background: var(--color-bg-nav);
       border: 1px solid var(--color-border);
-    border-radius: 12px;
+      border-radius: 1rem;
-    padding: 2rem;
+      padding: 2.5rem 2rem 2rem;
       display: flex;
       flex-direction: column;
-    gap: 1rem;
+      gap: 1.25rem;
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
+      box-shadow:
+        0 1px 3px rgba(0, 0, 0, 0.08),
+        0 12px 40px rgba(0, 0, 0, 0.12);
+      backdrop-filter: blur(12px);
+    }
+
+    .header {
+      display: flex;
+      flex-direction: column;
+      gap: 0.35rem;
+      margin-bottom: 0.25rem;
+    }
+
+    .header h2 {
+      margin: 0;
+      font-size: 1.5rem;
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      color: var(--color-text);
+    }
+
+    .header p {
+      margin: 0;
+      font-size: 0.875rem;
+      color: color-mix(in srgb, var(--color-text) 60%, transparent);
+    }
+
+    .field {
+      display: flex;
+      flex-direction: column;
+      gap: 0.4rem;
+    }
+
+    label {
+      font-size: 0.8rem;
+      font-weight: 600;
+      letter-spacing: 0.02em;
+      color: color-mix(in srgb, var(--color-text) 70%, transparent);
+      text-transform: uppercase;
     }
 
     input {
       border: 1px solid var(--color-border);
-    border-radius: 6px;
+      border-radius: 0.5rem;
-    padding: 0.6rem;
+      padding: 0.65rem 0.75rem;
-    font-size: 1rem;
+      font-size: 0.95rem;
       background: var(--color-bg);
       color: var(--color-text);
+      outline: none;
+      transition:
+        border-color 0.25s ease,
+        box-shadow 0.25s ease;
     }
 
-  ui-button {
+    input::placeholder {
-    align-self: flex-end;
+      color: color-mix(in srgb, var(--color-text) 35%, transparent);
+    }
+
+    input:focus {
+      border-color: var(--color-accent);
+      box-shadow: 0 0 0 3px
+        color-mix(in srgb, var(--color-accent) 15%, transparent);
     }
 
     .error {
-    color: crimson;
+      color: #e5484d;
-    font-size: 0.9rem;
+      font-size: 0.85rem;
+      font-weight: 500;
+      padding: 0.5rem 0.75rem;
+      background: color-mix(in srgb, #e5484d 8%, transparent);
+      border: 1px solid color-mix(in srgb, #e5484d 25%, transparent);
+      border-radius: 0.5rem;
+    }
+
+    button {
+      margin-top: 0.25rem;
+      width: 100%;
+      padding: 0.7rem 1rem;
+      font-size: 0.95rem;
+      font-weight: 600;
+      letter-spacing: 0.01em;
+      color: #fff;
+      background: var(--color-accent);
+      border: none;
+      border-radius: 0.5rem;
+      cursor: pointer;
+      transition:
+        background 0.25s ease,
+        box-shadow 0.25s ease,
+        transform 0.15s ease,
+        opacity 0.25s ease;
+    }
+
+    button:hover:not(:disabled) {
+      background: color-mix(in srgb, var(--color-accent) 85%, black);
+      box-shadow: 0 4px 14px
+        color-mix(in srgb, var(--color-accent) 35%, transparent);
+    }
+
+    button:active:not(:disabled) {
+      transform: scale(0.98);
+    }
+
+    button:disabled {
+      opacity: 0.55;
+      cursor: not-allowed;
+    }
+
+    .footer {
+      text-align: center;
+      font-size: 0.875rem;
+      color: color-mix(in srgb, var(--color-text) 60%, transparent);
+      margin: 0;
+    }
+
+    .divider {
+      width: 100%;
+      height: 1px;
+      background: var(--color-border);
+      margin: 0.25rem 0;
     }
   `;
 
@@ -69,11 +174,13 @@ export class LoginPage extends LitElement {
       });
       localStorage.setItem('token', res.token);
       window.dispatchEvent(new CustomEvent('auth-changed'));
-      dispatchEvent(new CustomEvent('nav', {
+      dispatchEvent(
-        detail: { path: "/cc/" },
+        new CustomEvent('nav', {
+          detail: { path: '/cc/' },
           bubbles: true,
           composed: true,
-      }));
+        })
+      );
     } catch (e: any) {
       this.error = e.message || 'Login failed';
     } finally {
@@ -81,20 +188,50 @@ export class LoginPage extends LitElement {
     }
   }
 
+  private handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter') this.handleLogin();
+  }
+
   render() {
     return html`
-    <div class="form">
+      <div class="card">
-      <h2>Login</h2>
+        <div class="header">
-      <input type="email" placeholder="Email" .value=${this.email} @input=${(e: any)=> (this.email = e.target.value)}
+          <h2>Welcome back</h2>
+          <p>Sign in to your FlightScore account</p>
+        </div>
+
+        <div class="field">
+          <label>Email</label>
+          <input
+            type="email"
+            placeholder="you@example.com"
+            .value=${this.email}
+            @input=${(e: any) => (this.email = e.target.value)}
+            @keydown=${this.handleKeydown}
           />
-      <input type="password" placeholder="Password" .value=${this.password} @input=${(e: any)=> (this.password =
+        </div>
-        e.target.value)}
+
+        <div class="field">
+          <label>Password</label>
+          <input
+            type="password"
+            placeholder="Enter your password"
+            .value=${this.password}
+            @input=${(e: any) => (this.password = e.target.value)}
+            @keydown=${this.handleKeydown}
           />
+        </div>
+
         ${this.error ? html`<div class="error">${this.error}</div>` : null}
-      <ui-button ?disabled=${this.loading} @click=${this.handleLogin}>${this.loading ? 'Loading...' : 'Login'}</ui-button>
+
-      <p>
+        <button ?disabled=${this.loading} @click=${this.handleLogin}>
-        No account?
+          ${this.loading ? 'Signing in...' : 'Sign in'}
-        <ui-link href="/register">Register</ui-link>
+        </button>
+
+        <div class="divider"></div>
+
+        <p class="footer">
+          No account? <ui-link href="/register">Create one</ui-link>
         </p>
       </div>
     `;