Login page animations

.env.alpha

@@ -0,0 +1,15 @@
+APP_NAME=Lean 101 Clients API
+CLIENT_NAME=Hunter Premium Produce
+CLIENT_EMAIL=alex@lean-101.com
+CLIENT_PASSWORD=JBBwVCDqmPA7
+CLIENT_TENANT_ID=hunter-premium-produce
+ADMIN_NAME=Lean 101
+ADMIN_EMAIL=matt@lean-101.com
+ADMIN_PASSWORD=XgHvUju6BYQZ
+AUTH_SECRET=735895b72fcc87b601b1e68bb614b65c876cf7b4516c9a3872b0cc7a98dbde5f
+ORIGIN=https://clients.lean-101.com.au
+PUBLIC_API_BASE_URL=https://clients.lean-101.com.au
+INTERNAL_API_BASE_URL=http://backend:8000
+CORS_ALLOW_ORIGINS=https://clients.lean-101.com.au
+CLIENTS_APP_PORT=808
+DATABASE_URL=sqlite:////data/data_entry_app.db

.env.alpha.example

@@ -7,9 +7,9 @@ ADMIN_NAME=Lean 101
 ADMIN_EMAIL=admin@lean101.local
 ADMIN_PASSWORD=lean101-admin
 AUTH_SECRET=replace-with-a-long-random-secret
-ORIGIN=https://clients.lean-101.com
+ORIGIN=https://clients.lean-101.com.au
-PUBLIC_API_BASE_URL=https://clients.lean-101.com
+PUBLIC_API_BASE_URL=https://clients.lean-101.com.au
 INTERNAL_API_BASE_URL=http://backend:8000
-CORS_ALLOW_ORIGINS=https://clients.lean-101.com
+CORS_ALLOW_ORIGINS=https://clients.lean-101.com.au
 CLIENTS_APP_PORT=8081
 DATABASE_URL=sqlite:////data/data_entry_app.db

README.md

@@ -40,7 +40,7 @@ The frontend now supports:
 - `PUBLIC_API_BASE_URL` for browser requests
 - `INTERNAL_API_BASE_URL` for server-side SvelteKit requests inside Docker
 
-This is important for a same-domain deployment such as `https://clients.lean-101.com`, where the browser should call the public domain while the frontend container should call the backend container directly.
+This is important for a same-domain deployment such as `https://clients.lean-101.com.au`, where the browser should call the public domain while the frontend container should call the backend container directly.
 
 ### Example `/srv` deploy
 
@@ -56,7 +56,7 @@ This follows the same external pattern as your website container:
 
 - one compose project under `/srv/lean101-clients`
 - one host-facing port, `8081`, for the app
-- your existing public reverse proxy forwards `clients.lean-101.com` to `127.0.0.1:8081`
+- your existing public reverse proxy forwards `clients.lean-101.com.au` to `127.0.0.1:8081`
 
 If your server already has a host-level nginx handling domains and TLS, use `deploy/nginx/clients.lean-101.proxy.conf` as the upstream template and point the domain at `http://127.0.0.1:8081`.
 

deploy/nginx/clients.lean-101.proxy.conf

@@ -1,6 +1,6 @@
 server {
   listen 80;
-  server_name clients.lean-101.com;
+  server_name clients.lean-101.com.au;
 
   location / {
     proxy_pass http://127.0.0.1:8081;

docker-compose.alpha.yml

@@ -16,7 +16,7 @@ services:
       ADMIN_EMAIL: ${ADMIN_EMAIL:-admin@lean101.local}
       ADMIN_PASSWORD: ${ADMIN_PASSWORD:-lean101-admin}
       AUTH_SECRET: ${AUTH_SECRET:-change-me-in-production}
-      CORS_ALLOW_ORIGINS: ${CORS_ALLOW_ORIGINS:-https://clients.lean-101.com}
+      CORS_ALLOW_ORIGINS: ${CORS_ALLOW_ORIGINS:-https://clients.lean-101.com.au}
     volumes:
       - clients_app_data:/data
     healthcheck:
@@ -33,10 +33,10 @@ services:
       dockerfile: frontend/Dockerfile
     restart: unless-stopped
     environment:
-      ORIGIN: ${ORIGIN:-https://clients.lean-101.com}
+      ORIGIN: ${ORIGIN:-https://clients.lean-101.com.au}
       PORT: 3000
       HOST: 0.0.0.0
-      PUBLIC_API_BASE_URL: ${PUBLIC_API_BASE_URL:-https://clients.lean-101.com}
+      PUBLIC_API_BASE_URL: ${PUBLIC_API_BASE_URL:-https://clients.lean-101.com.au}
       INTERNAL_API_BASE_URL: ${INTERNAL_API_BASE_URL:-http://backend:8000}
       PUBLIC_API_PORT: ${PUBLIC_API_PORT:-8000}
     depends_on:

docker-compose.yml

@@ -16,7 +16,7 @@ services:
       ADMIN_EMAIL: ${ADMIN_EMAIL:-admin@lean101.local}
       ADMIN_PASSWORD: ${ADMIN_PASSWORD:-lean101-admin}
       AUTH_SECRET: ${AUTH_SECRET:-change-me-in-production}
-      CORS_ALLOW_ORIGINS: ${CORS_ALLOW_ORIGINS:-https://clients.lean-101.com}
+      CORS_ALLOW_ORIGINS: ${CORS_ALLOW_ORIGINS:-https://clients.lean-101.com.au}
     volumes:
       - clients_app_data:/data
     healthcheck:
@@ -33,10 +33,10 @@ services:
       dockerfile: frontend/Dockerfile
     restart: unless-stopped
     environment:
-      ORIGIN: ${ORIGIN:-https://clients.lean-101.com}
+      ORIGIN: ${ORIGIN:-https://clients.lean-101.com.au}
       PORT: 3000
       HOST: 0.0.0.0
-      PUBLIC_API_BASE_URL: ${PUBLIC_API_BASE_URL:-https://clients.lean-101.com}
+      PUBLIC_API_BASE_URL: ${PUBLIC_API_BASE_URL:-https://clients.lean-101.com.au}
       INTERNAL_API_BASE_URL: ${INTERNAL_API_BASE_URL:-http://backend:8000}
       PUBLIC_API_PORT: ${PUBLIC_API_PORT:-8000}
     depends_on:

frontend/src/routes/+page.svelte

@@ -32,6 +32,7 @@
   let password = $state('changeme');
   let isLoggingIn = $state(false);
   let loginError = $state('');
+  let passwordInput: HTMLInputElement | null = null;
   const currentYear = new Date().getFullYear();
   const appVersion = `v${packageInfo.version}`;
   const releaseStage = 'Alpha';
@@ -48,11 +49,37 @@
       clientSession.set(session);
     } catch (error) {
       loginError = error instanceof Error ? error.message : 'Unable to sign in';
+      triggerPasswordShake();
     } finally {
       isLoggingIn = false;
     }
   }
 
+  function triggerPasswordShake() {
+    if (typeof window === 'undefined' || !passwordInput) {
+      return;
+    }
+
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      return;
+    }
+
+    passwordInput.animate(
+      [
+        { transform: 'translateX(0)' },
+        { transform: 'translateX(-8px)' },
+        { transform: 'translateX(8px)' },
+        { transform: 'translateX(-6px)' },
+        { transform: 'translateX(6px)' },
+        { transform: 'translateX(0)' }
+      ],
+      {
+        duration: 360,
+        easing: 'cubic-bezier(0.36, 0.07, 0.19, 0.97)'
+      }
+    );
+  }
+
   function currency(value: number | null | undefined, digits = 2) {
     if (value === null || value === undefined) {
       return 'N/A';
@@ -325,9 +352,15 @@
           <input bind:value={email} type="email" autocomplete="username" placeholder="Email" />
         </label>
 
-        <label class="field">
+        <label class="field field-password" class:is-invalid={Boolean(loginError)}>
           <span>Password</span>
-          <input bind:value={password} type="password" autocomplete="current-password" placeholder="Password" />
+          <input
+            bind:this={passwordInput}
+            bind:value={password}
+            type="password"
+            autocomplete="current-password"
+            placeholder="Password"
+          />
         </label>
 
         <button class="primary-button auth-submit" type="submit" disabled={isLoggingIn}>
@@ -711,6 +744,7 @@
 
   .auth-card-login {
     width: min(100%, 39rem);
+    animation: login-card-enter 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
   }
 
   .auth-header {
@@ -886,6 +920,12 @@
     background: #fff;
   }
 
+  .field-password.is-invalid input {
+    border-color: rgba(160, 55, 55, 0.42);
+    box-shadow: 0 0 0 0.24rem rgba(160, 55, 55, 0.1);
+    background: #fff9f9;
+  }
+
   .auth-submit {
     width: 100%;
     min-height: 3.35rem;
@@ -943,6 +983,18 @@
     }
   }
 
+  @keyframes login-card-enter {
+    from {
+      opacity: 0;
+      transform: translateY(10px) scale(0.988);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
   .dashboard-intro,
   .workspace-banner,
   .dashboard-grid,
@@ -1716,6 +1768,12 @@
     }
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    .auth-card-login {
+      animation: none;
+    }
+  }
+
   @media (max-width: 860px) {
     .auth-stage {
       min-height: auto;