lean101/data-entry-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Login page animations

Browse Source
This commit is contained in:
ponzischeme89
2026-04-30 21:38:54 +12:00
parent 373f7c47c0
commit 4f876372c2
7 changed files with 87 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.alpha
+15
View File
@@ -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
+3 -3
View File
@@ -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
PUBLIC_API_BASE_URL=https://clients.lean-101.com
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
CORS_ALLOW_ORIGINS=https://clients.lean-101.com.au
CLIENTS_APP_PORT=8081
DATABASE_URL=sqlite:////data/data_entry_app.db
README.md
+2 -2
View File
@@ -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 -1
View File
@@ -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
+3 -3
View File
@@ -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
+3 -3
View File
@@ -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
+60 -2
View File
@@ -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;