OPC # 0001: Extract Clarity into standalone repo
This commit is contained in:
amadzarak
@@ -0,0 +1,2 @@
|
||||
node_modules/
|
||||
dist/
|
||||
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1 @@
|
||||
legacy-peer-deps=true
|
||||
@@ -0,0 +1,28 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import tseslint from 'typescript-eslint'
|
||||
|
||||
export default tseslint.config(
|
||||
{ ignores: ['dist'] },
|
||||
{
|
||||
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
},
|
||||
plugins: {
|
||||
'react-hooks': reactHooks,
|
||||
'react-refresh': reactRefresh,
|
||||
},
|
||||
rules: {
|
||||
...reactHooks.configs.recommended.rules,
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
},
|
||||
)
|
||||
@@ -0,0 +1,10 @@
|
||||
<Project Sdk="Microsoft.VisualStudio.JavaScript.Sdk/1.0.4110890">
|
||||
<PropertyGroup>
|
||||
<ShouldRunNpmInstall>false</ShouldRunNpmInstall>
|
||||
<ShouldRunBuildScript>false</ShouldRunBuildScript>
|
||||
</PropertyGroup>
|
||||
<ItemGroup>
|
||||
<Folder Include="src\Admin\" />
|
||||
<Folder Include="src\Onboarding\" />
|
||||
</ItemGroup>
|
||||
</Project>
|
||||
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/Aspire.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Aspire Starter</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+3713
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@blueprintjs/core": "^5.19.1",
|
||||
"@blueprintjs/icons": "^5.18.0",
|
||||
"keycloak-js": "^26.2.3",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-multistep": "^7.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.39.1",
|
||||
"@types/node": "^24.10.1",
|
||||
"@types/react": "^19.0.0",
|
||||
"@types/react-dom": "^19.0.0",
|
||||
"@vitejs/plugin-react": "^5.1.1",
|
||||
"eslint": "^9.39.1",
|
||||
"eslint-plugin-react-hooks": "^5.2.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.24",
|
||||
"globals": "^16.5.0",
|
||||
"typescript": "~5.9.3",
|
||||
"typescript-eslint": "^8.48.1",
|
||||
"vite": "^7.2.6"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 839 B |
@@ -0,0 +1,794 @@
|
||||
/* CSS Variables for theming */
|
||||
:root {
|
||||
--bg-gradient-start: #1a1a2e;
|
||||
--bg-gradient-end: #16213e;
|
||||
--card-bg: rgba(30, 30, 46, 0.95);
|
||||
--card-hover-shadow: rgba(0, 0, 0, 0.3);
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #e2e8f0;
|
||||
--text-tertiary: #cbd5e0;
|
||||
--accent-gradient-start: #7c92f5;
|
||||
--accent-gradient-end: #8b5ecf;
|
||||
--weather-card-bg: rgba(45, 45, 60, 0.8);
|
||||
--weather-card-border: rgba(255, 255, 255, 0.1);
|
||||
--section-title-color: #f7fafc;
|
||||
--date-color: #cbd5e0;
|
||||
--summary-color: #f7fafc;
|
||||
--temp-unit-color: #e2e8f0;
|
||||
--divider-color: #4a5568;
|
||||
--error-bg: rgba(220, 38, 38, 0.1);
|
||||
--error-border: #ef4444;
|
||||
--error-text: #fca5a5;
|
||||
--skeleton-bg-1: rgba(255, 255, 255, 0.05);
|
||||
--skeleton-bg-2: rgba(255, 255, 255, 0.1);
|
||||
--tile-min-height: 120px;
|
||||
--tile-gap: 0.75rem;
|
||||
--cta-height: 3rem;
|
||||
--card-inner-gap: 1rem;
|
||||
--focus-color: #a78bfa;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--bg-gradient-start: #f0f4ff;
|
||||
--bg-gradient-end: #e0e7ff;
|
||||
--card-bg: rgba(255, 255, 255, 0.98);
|
||||
--card-hover-shadow: rgba(0, 0, 0, 0.15);
|
||||
--text-primary: #1a202c;
|
||||
--text-secondary: #2d3748;
|
||||
--text-tertiary: #4a5568;
|
||||
--accent-gradient-start: #5b6fd8;
|
||||
--accent-gradient-end: #6b46a3;
|
||||
--weather-card-bg: rgba(255, 255, 255, 0.9);
|
||||
--weather-card-border: rgba(102, 126, 234, 0.15);
|
||||
--section-title-color: #1a202c;
|
||||
--date-color: #2d3748;
|
||||
--summary-color: #1a202c;
|
||||
--temp-unit-color: #4a5568;
|
||||
--divider-color: #cbd5e0;
|
||||
--error-bg: #fee;
|
||||
--error-border: #dc2626;
|
||||
--error-text: #991b1b;
|
||||
--skeleton-bg-1: #f0f0f0;
|
||||
--skeleton-bg-2: #e0e0e0;
|
||||
--tile-min-height: 120px;
|
||||
--tile-gap: 0.75rem;
|
||||
--cta-height: 3rem;
|
||||
--card-inner-gap: 1rem;
|
||||
--focus-color: #5b21b6;
|
||||
}
|
||||
}
|
||||
|
||||
/* Root container */
|
||||
#root {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Accessibility utilities */
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
/* App container */
|
||||
.app-container {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.app-header {
|
||||
padding: 2.5rem 2rem 1.5rem;
|
||||
text-align: center;
|
||||
animation: fadeInDown 0.6s ease-out;
|
||||
}
|
||||
|
||||
.logo-link {
|
||||
display: inline-block;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.logo-link:focus-visible {
|
||||
outline: 3px solid var(--accent-gradient-end);
|
||||
outline-offset: 8px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 5rem;
|
||||
width: auto;
|
||||
transition: transform 300ms ease, filter 300ms ease;
|
||||
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
|
||||
}
|
||||
|
||||
.app-title {
|
||||
font-size: 2.75rem;
|
||||
font-weight: 700;
|
||||
margin: 1.25rem 0 0.5rem;
|
||||
background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.app-subtitle {
|
||||
font-size: 1.05rem;
|
||||
color: var(--text-tertiary);
|
||||
margin: 0;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* Main content */
|
||||
.main-content {
|
||||
flex: 1;
|
||||
max-width: 1400px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0rem 2rem 2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Card styles */
|
||||
.card {
|
||||
background: var(--card-bg);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 1rem;
|
||||
padding: 1.25rem 1.5rem;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
color: var(--text-primary);
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
border: 1px solid var(--weather-card-border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--card-inner-gap);
|
||||
}
|
||||
|
||||
/* Section styles */
|
||||
.demo-section {
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
.weather-section {
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
animation-delay: 0.1s;
|
||||
flex: 1;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 0;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: var(--section-title-color);
|
||||
}
|
||||
|
||||
/* Counter area */
|
||||
.counter-card .section-header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.counter-panel {
|
||||
background: var(--weather-card-bg);
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid var(--weather-card-border);
|
||||
padding: 1.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--tile-gap);
|
||||
min-height: var(--tile-min-height);
|
||||
backdrop-filter: blur(10px);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.counter-value-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.25rem;
|
||||
flex: 1;
|
||||
margin-bottom: var(--tile-gap);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.counter-label {
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--text-tertiary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.counter-value {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
background: linear-gradient(135deg, var(--accent-gradient-start) 0%, var(--accent-gradient-end) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.increment-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
background: linear-gradient(135deg, var(--accent-gradient-start) 0%, var(--accent-gradient-end) 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0 1.5rem;
|
||||
height: var(--cta-height);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
|
||||
width: 100%;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.increment-button:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.increment-button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.increment-button:focus-visible {
|
||||
outline: 3px solid var(--accent-gradient-end);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.increment-icon {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.increment-button:hover .increment-icon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* Toggle switch */
|
||||
.toggle-switch {
|
||||
display: flex;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.25rem;
|
||||
gap: 0.25rem;
|
||||
border: 1px solid var(--weather-card-border);
|
||||
margin: 0;
|
||||
padding: 0.25rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.toggle-switch legend {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
.toggle-switch {
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
border: none;
|
||||
border-radius: 0.375rem;
|
||||
padding: 0 1rem;
|
||||
height: 2.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
min-width: 3rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toggle-option[aria-pressed="true"] {
|
||||
background: linear-gradient(135deg, var(--accent-gradient-start) 0%, var(--accent-gradient-end) 100%);
|
||||
color: white;
|
||||
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.toggle-option[aria-pressed="false"]:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
.toggle-option[aria-pressed="false"]:hover {
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-option:focus-visible {
|
||||
outline: 3px solid var(--focus-color);
|
||||
outline-offset: 2px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Refresh button */
|
||||
.refresh-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
background: linear-gradient(135deg, var(--accent-gradient-start) 0%, var(--accent-gradient-end) 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0 1.5rem;
|
||||
height: var(--cta-height);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
|
||||
min-width: 140px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.refresh-button:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.refresh-button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.refresh-button:focus-visible {
|
||||
outline: 3px solid var(--focus-color);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.refresh-icon {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.refresh-icon.spinning {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
/* Error message */
|
||||
.error-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
background-color: var(--error-bg);
|
||||
border-left: 4px solid var(--error-border);
|
||||
color: var(--error-text);
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
margin: 1rem 0;
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* Loading skeleton */
|
||||
.loading-skeleton {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.skeleton-row {
|
||||
height: 80px;
|
||||
background: linear-gradient(90deg, var(--skeleton-bg-1) 25%, var(--skeleton-bg-2) 50%, var(--skeleton-bg-1) 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s infinite;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
/* Weather grid */
|
||||
.weather-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.weather-card {
|
||||
background: var(--weather-card-bg);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid var(--weather-card-border);
|
||||
backdrop-filter: blur(10px);
|
||||
min-height: var(--tile-min-height);
|
||||
}
|
||||
|
||||
.weather-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.weather-card:focus-within {
|
||||
outline: 2px solid var(--focus-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.weather-date {
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
color: var(--date-color);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.weather-summary {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 500;
|
||||
color: var(--summary-color);
|
||||
min-height: 1.5rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.weather-temps {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.75rem;
|
||||
margin-top: 0.5rem;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid var(--weather-card-border);
|
||||
}
|
||||
|
||||
.temp-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.temp-value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, var(--accent-gradient-start) 0%, var(--accent-gradient-end) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.temp-unit {
|
||||
font-size: 0.75rem;
|
||||
color: var(--temp-unit-color);
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 1024px) {
|
||||
.main-content {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
.app-footer {
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.app-footer nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.app-footer a {
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: color 0.3s ease, border-color 0.3s ease;
|
||||
border-bottom: 2px solid transparent;
|
||||
font-size: 0.875rem;
|
||||
padding-bottom: 0.125rem;
|
||||
}
|
||||
|
||||
.app-footer a:hover {
|
||||
color: var(--text-primary);
|
||||
border-bottom-color: var(--text-primary);
|
||||
}
|
||||
|
||||
.app-footer a:focus-visible {
|
||||
outline: 3px solid var(--focus-color);
|
||||
outline-offset: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 1024px) {
|
||||
.main-content {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.app-footer {
|
||||
padding: 1.5rem 0;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
backdrop-filter: blur(10px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.app-footer > * {
|
||||
max-width: 1400px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 2rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.app-footer a {
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: color 0.3s ease, transform 0.3s ease;
|
||||
border-bottom: 2px solid transparent;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.app-footer a:hover {
|
||||
color: var(--text-primary);
|
||||
border-bottom-color: var(--text-primary);
|
||||
}
|
||||
|
||||
.app-footer a:focus-visible {
|
||||
outline: 2px solid var(--text-primary);
|
||||
outline-offset: 4px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.github-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.github-link:focus-visible {
|
||||
outline: 3px solid var(--focus-color);
|
||||
outline-offset: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.github-link img {
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
.github-link img {
|
||||
filter: brightness(0) invert(0);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.github-link:hover img {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.github-link:hover img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
:root {
|
||||
--cta-height: 2.75rem;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
padding: 1.5rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.app-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.app-subtitle {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toggle-switch {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.toggle-option {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.refresh-button {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
padding: 0 1.25rem;
|
||||
}
|
||||
|
||||
.weather-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.weather-card {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.app-footer {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.app-footer > * {
|
||||
flex-direction: column;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.github-link {
|
||||
order: -1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced motion support */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* High contrast mode support */
|
||||
@media (prefers-contrast: high) {
|
||||
.card {
|
||||
border: 2px solid currentColor;
|
||||
}
|
||||
|
||||
.weather-card {
|
||||
border: 1px solid currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
/* Focus visible support for better keyboard navigation */
|
||||
*:focus-visible {
|
||||
outline: 3px solid var(--accent-gradient-end);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { getKeycloak } from './keycloak'
|
||||
import { OnboardingPage } from './Onboarding'
|
||||
import { ProfilePreview } from './Profile/ProfilePreview'
|
||||
import './App.css'
|
||||
|
||||
type ProfileState = 'loading' | 'onboarding' | 'ready'
|
||||
|
||||
async function fetchProfileState(): Promise<ProfileState> {
|
||||
const keycloak = getKeycloak()
|
||||
await keycloak.updateToken(30)
|
||||
const res = await fetch('/api/profile', {
|
||||
headers: { Authorization: `Bearer ${keycloak.token}` },
|
||||
})
|
||||
if (res.status === 404) return 'onboarding'
|
||||
if (res.ok) return 'ready'
|
||||
throw new Error(`Unexpected status ${res.status}`)
|
||||
}
|
||||
|
||||
function App() {
|
||||
const [state, setState] = useState<ProfileState>('loading')
|
||||
|
||||
useEffect(() => {
|
||||
fetchProfileState().then(setState).catch(() => setState('onboarding'))
|
||||
}, [])
|
||||
|
||||
if (state === 'loading') return <p>Loading…</p>
|
||||
|
||||
if (state === 'onboarding')
|
||||
return <OnboardingPage onComplete={() => setState('ready')} />
|
||||
|
||||
return <ProfilePreview onLogout={() => getKeycloak().logout()} />
|
||||
}
|
||||
|
||||
export default App
|
||||
@@ -0,0 +1,11 @@
|
||||
import { OnboardingPage } from './OnboardingPage'
|
||||
|
||||
type BackgroundWizardProps = {
|
||||
onComplete: () => void
|
||||
}
|
||||
|
||||
function BackgroundWizard({ onComplete }: BackgroundWizardProps) {
|
||||
return <OnboardingPage onComplete={onComplete} />
|
||||
}
|
||||
|
||||
export default BackgroundWizard
|
||||
@@ -0,0 +1,89 @@
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 2rem 1rem;
|
||||
background:
|
||||
radial-gradient(circle at 15% 20%, rgba(52, 152, 219, 0.22), transparent 45%),
|
||||
radial-gradient(circle at 80% 75%, rgba(46, 204, 113, 0.2), transparent 45%),
|
||||
linear-gradient(160deg, #f4f7fb 0%, #e8eef7 100%);
|
||||
}
|
||||
|
||||
.card {
|
||||
width: min(700px, 100%);
|
||||
display: grid;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin: 0;
|
||||
color: #5f6b7c;
|
||||
}
|
||||
|
||||
.stepTabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.tab,
|
||||
.tabActive {
|
||||
border: 1px solid #c8d1e0;
|
||||
border-radius: 999px;
|
||||
padding: 0.35rem 0.9rem;
|
||||
background: #ffffff;
|
||||
color: #394b59;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.tabActive {
|
||||
border-color: #106ba3;
|
||||
color: #106ba3;
|
||||
background: #edf6ff;
|
||||
}
|
||||
|
||||
.formGrid {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.reviewRow {
|
||||
border-top: 1px solid #d8e1ec;
|
||||
padding-top: 0.75rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.reviewTitle {
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.reviewGrid {
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr;
|
||||
gap: 0.25rem 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,242 @@
|
||||
import React, { useEffect, useMemo, useState, type ReactNode } from 'react'
|
||||
import { Button, Callout, Card, FormGroup, H2, H5, InputGroup, Intent, ProgressBar } from '@blueprintjs/core'
|
||||
import MultiStep, { type SignalParent, useMultiStep } from 'react-multistep'
|
||||
import { getKeycloak } from '../keycloak'
|
||||
import styles from './OnboardingPage.module.css'
|
||||
|
||||
type OnboardingPayload = {
|
||||
firstName: string
|
||||
middleName: string
|
||||
lastName: string
|
||||
ssn: string
|
||||
}
|
||||
|
||||
type StepProps = {
|
||||
signalParent?: SignalParent
|
||||
title?: ReactNode
|
||||
value: OnboardingPayload
|
||||
onChange: (updates: Partial<OnboardingPayload>) => void
|
||||
onSubmit?: () => Promise<void>
|
||||
isSubmitting?: boolean
|
||||
error?: string | null
|
||||
}
|
||||
|
||||
interface OnboardingPageProps {
|
||||
onComplete: () => void
|
||||
}
|
||||
|
||||
function StepChrome({ children, onSubmit, isSubmitting = false }: { children: ReactNode; onSubmit?: () => Promise<void>; isSubmitting?: boolean }) {
|
||||
const { activeStep, stepCount, steps, currentStepValid, next, previous, goToStep } = useMultiStep()
|
||||
const isLastStep = activeStep === stepCount - 1
|
||||
const progress = ((activeStep + 1) / stepCount) * 100
|
||||
|
||||
const handleAdvance = async () => {
|
||||
if (!isLastStep) {
|
||||
next()
|
||||
return
|
||||
}
|
||||
if (onSubmit) {
|
||||
await onSubmit()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className={styles.card} elevation={2}>
|
||||
<div className={styles.header}>
|
||||
<H2 className={styles.title}>Finish Your Profile</H2>
|
||||
<p className={styles.subtitle}>We only need a few details to complete onboarding.</p>
|
||||
<ProgressBar value={progress / 100} animate stripes={false} />
|
||||
</div>
|
||||
|
||||
<div className={styles.stepTabs}>
|
||||
{steps.map(step => (
|
||||
<button
|
||||
key={step.index}
|
||||
type="button"
|
||||
className={step.index === activeStep ? styles.tabActive : styles.tab}
|
||||
onClick={() => goToStep(step.index)}
|
||||
>
|
||||
{(step.title as React.ReactNode) ?? `Step ${step.index + 1}`}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div>{children}</div>
|
||||
|
||||
<div className={styles.actions}>
|
||||
<Button disabled={activeStep === 0 || isSubmitting} onClick={previous}>
|
||||
Back
|
||||
</Button>
|
||||
<Button
|
||||
intent={Intent.PRIMARY}
|
||||
loading={isSubmitting}
|
||||
disabled={!currentStepValid || isSubmitting}
|
||||
onClick={() => void handleAdvance()}
|
||||
>
|
||||
{isLastStep ? 'Complete Onboarding' : 'Continue'}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
function NameStep({ signalParent, value, onChange }: StepProps) {
|
||||
useEffect(() => {
|
||||
signalParent?.({ isValid: value.firstName.trim().length > 0 })
|
||||
}, [signalParent, value.firstName])
|
||||
|
||||
return (
|
||||
<StepChrome>
|
||||
<div className={styles.formGrid}>
|
||||
<FormGroup label="First name" labelFor="firstName" labelInfo="*">
|
||||
<InputGroup
|
||||
id="firstName"
|
||||
value={value.firstName}
|
||||
onValueChange={nextValue => onChange({ firstName: nextValue })}
|
||||
placeholder="Ada"
|
||||
autoFocus
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup label="Middle name (optional)" labelFor="middleName">
|
||||
<InputGroup
|
||||
id="middleName"
|
||||
value={value.middleName}
|
||||
onValueChange={nextValue => onChange({ middleName: nextValue })}
|
||||
placeholder="Lovelace"
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup label="SSN" labelFor="ssn" labelInfo="*">
|
||||
<InputGroup
|
||||
id="ssn"
|
||||
value={value.ssn}
|
||||
onValueChange={nextValue => onChange({ ssn: nextValue })}
|
||||
placeholder="XXX-XX-XXXX"
|
||||
type="password"
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
</StepChrome>
|
||||
)
|
||||
}
|
||||
|
||||
function ReviewStep({ signalParent, value, onChange, onSubmit, isSubmitting = false, error = null }: StepProps) {
|
||||
useEffect(() => {
|
||||
const isValid =
|
||||
value.firstName.trim().length > 0 &&
|
||||
value.lastName.trim().length > 0 &&
|
||||
value.ssn.trim().length > 0
|
||||
signalParent?.({ isValid })
|
||||
}, [signalParent, value.firstName, value.lastName, value.ssn])
|
||||
|
||||
return (
|
||||
<StepChrome onSubmit={onSubmit} isSubmitting={isSubmitting}>
|
||||
<div className={styles.formGrid}>
|
||||
<FormGroup label="Last name" labelFor="lastName" labelInfo="*">
|
||||
<InputGroup
|
||||
id="lastName"
|
||||
value={value.lastName}
|
||||
onValueChange={nextValue => onChange({ lastName: nextValue })}
|
||||
placeholder="Byron"
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
|
||||
<div className={styles.reviewRow}>
|
||||
<H5 className={styles.reviewTitle}>Review</H5>
|
||||
<div className={styles.reviewGrid}>
|
||||
<span>First</span>
|
||||
<span>{value.firstName || '-'}</span>
|
||||
<span>Middle</span>
|
||||
<span>{value.middleName || '-'}</span>
|
||||
<span>Last</span>
|
||||
<span>{value.lastName || '-'}</span>
|
||||
<span>SSN</span>
|
||||
<span>{'•'.repeat(value.ssn.length) || '-'}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<Callout intent={Intent.DANGER} title="Could not save profile">
|
||||
{error}
|
||||
</Callout>
|
||||
)}
|
||||
</StepChrome>
|
||||
)
|
||||
}
|
||||
|
||||
export function OnboardingPage({ onComplete }: OnboardingPageProps) {
|
||||
const [form, setForm] = useState<OnboardingPayload>({
|
||||
firstName: '',
|
||||
middleName: '',
|
||||
lastName: '',
|
||||
ssn: '',
|
||||
})
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const payload = useMemo(
|
||||
() => ({
|
||||
firstName: form.firstName.trim(),
|
||||
middleName: form.middleName.trim(),
|
||||
lastName: form.lastName.trim(),
|
||||
ssn: form.ssn.trim(),
|
||||
}),
|
||||
[form.firstName, form.middleName, form.lastName, form.ssn],
|
||||
)
|
||||
|
||||
const handleChange = (updates: Partial<OnboardingPayload>) => {
|
||||
setForm(current => ({ ...current, ...updates }))
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
setIsSubmitting(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const keycloak = getKeycloak()
|
||||
await keycloak.updateToken(30)
|
||||
const response = await fetch('/api/profile/onboarding', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${keycloak.token}`,
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
})
|
||||
|
||||
if (response.ok || response.status === 409) {
|
||||
onComplete()
|
||||
return
|
||||
}
|
||||
|
||||
let message = `Status ${response.status}`
|
||||
const data = (await response.json().catch(() => null)) as { message?: string } | null
|
||||
if (data?.message) {
|
||||
message = data.message
|
||||
}
|
||||
setError(message)
|
||||
} catch (submitError) {
|
||||
setError(submitError instanceof Error ? submitError.message : 'Unexpected error')
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<MultiStep initialStep={0} onValidationError={() => setError('Please complete required fields before continuing.')}>
|
||||
<NameStep title="Identity" value={form} onChange={handleChange} />
|
||||
<ReviewStep
|
||||
title="Finalize"
|
||||
value={form}
|
||||
onChange={handleChange}
|
||||
onSubmit={handleSubmit}
|
||||
isSubmitting={isSubmitting}
|
||||
error={error}
|
||||
/>
|
||||
</MultiStep>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export { OnboardingPage } from './OnboardingPage'
|
||||
@@ -0,0 +1,126 @@
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
padding: 2.5rem;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.2rem 0.65rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 500;
|
||||
background: #dcfce7;
|
||||
color: #15803d;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: #16a34a;
|
||||
}
|
||||
|
||||
.fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 1rem;
|
||||
color: #111;
|
||||
padding: 0.55rem 0.75rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 6px;
|
||||
background: #f9fafb;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border: none;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.meta {
|
||||
font-size: 0.8rem;
|
||||
color: #9ca3af;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.logout {
|
||||
padding: 0.55rem 1.25rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.logout:hover {
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #dc2626;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { getKeycloak } from '../keycloak'
|
||||
import styles from './ProfilePreview.module.css'
|
||||
|
||||
interface Profile {
|
||||
id: string
|
||||
keycloakSubject: string
|
||||
firstName: string
|
||||
middleName: string
|
||||
lastName: string
|
||||
onboardingComplete: boolean
|
||||
createdAt: string
|
||||
tenant: string
|
||||
}
|
||||
|
||||
interface Props {
|
||||
onLogout: () => void
|
||||
}
|
||||
|
||||
export function ProfilePreview({ onLogout }: Props) {
|
||||
const [profile, setProfile] = useState<Profile | null>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
async function load() {
|
||||
try {
|
||||
const keycloak = getKeycloak()
|
||||
await keycloak.updateToken(30)
|
||||
const res = await fetch('/api/profile', {
|
||||
headers: { Authorization: `Bearer ${keycloak.token}` },
|
||||
})
|
||||
if (!res.ok) throw new Error(`Status ${res.status}`)
|
||||
setProfile(await res.json())
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : 'Failed to load profile')
|
||||
}
|
||||
}
|
||||
load()
|
||||
}, [])
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.card}>
|
||||
<p className={styles.error}>Error: {error}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!profile) {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.card}>
|
||||
<p>Loading profile…</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.card}>
|
||||
<div className={styles.header}>
|
||||
<h1 className={styles.title}>Profile Preview</h1>
|
||||
<p className={styles.subtitle}>
|
||||
Decrypted PII read back from the database via the API
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.badge}>
|
||||
<span className={styles.dot} />
|
||||
Decryption successful
|
||||
</div>
|
||||
|
||||
<div className={styles.fields}>
|
||||
<div className={styles.field}>
|
||||
<span className={styles.label}>First Name</span>
|
||||
<span className={styles.value}>{profile.firstName}</span>
|
||||
</div>
|
||||
{profile.middleName && (
|
||||
<div className={styles.field}>
|
||||
<span className={styles.label}>Middle Name</span>
|
||||
<span className={styles.value}>{profile.middleName}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.field}>
|
||||
<span className={styles.label}>Last Name</span>
|
||||
<span className={styles.value}>{profile.lastName}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr className={styles.divider} />
|
||||
|
||||
<div className={styles.meta}>
|
||||
<span>Profile ID: {profile.id}</span>
|
||||
<span>Subject: {profile.keycloakSubject}</span>
|
||||
<span>Tenant: {profile.tenant || '(none)'}</span>
|
||||
<span>Created: {new Date(profile.createdAt).toLocaleString()}</span>
|
||||
<span>
|
||||
Onboarding complete: {profile.onboardingComplete ? 'Yes' : 'No'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className={styles.actions}>
|
||||
<button className={styles.logout} onClick={onLogout}>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* Reset and base styles */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Remove default Vite styles that conflict with our design */
|
||||
h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import Keycloak from 'keycloak-js'
|
||||
|
||||
// Keycloak instance is created dynamically after fetching /api/config from the server.
|
||||
// This is necessary because the realm is per-tenant and unknown at build time.
|
||||
let _keycloak: Keycloak | null = null
|
||||
|
||||
export interface TenantConfig {
|
||||
keycloakUrl: string
|
||||
realm: string
|
||||
clientId: string
|
||||
}
|
||||
|
||||
export async function loadTenantConfig(): Promise<TenantConfig> {
|
||||
const res = await fetch('/api/config')
|
||||
if (!res.ok) throw new Error(`Failed to load tenant config: ${res.status}`)
|
||||
return res.json()
|
||||
}
|
||||
|
||||
export function createKeycloak(cfg: TenantConfig): Keycloak {
|
||||
_keycloak = new Keycloak({
|
||||
url: cfg.keycloakUrl,
|
||||
realm: cfg.realm,
|
||||
clientId: cfg.clientId,
|
||||
})
|
||||
return _keycloak
|
||||
}
|
||||
|
||||
// Use this everywhere instead of the default import.
|
||||
// Guaranteed non-null after main.tsx calls createKeycloak().
|
||||
export function getKeycloak(): Keycloak {
|
||||
if (!_keycloak) throw new Error('Keycloak not initialised yet')
|
||||
return _keycloak
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import '@blueprintjs/core/lib/css/blueprint.css'
|
||||
import '@blueprintjs/icons/lib/css/blueprint-icons.css'
|
||||
import './index.css'
|
||||
import App from './App.tsx'
|
||||
import { loadTenantConfig, createKeycloak } from './keycloak.ts'
|
||||
|
||||
loadTenantConfig()
|
||||
.then(cfg => {
|
||||
const keycloak = createKeycloak(cfg)
|
||||
return keycloak.init({ onLoad: 'login-required', pkceMethod: 'S256', checkLoginIframe: false })
|
||||
})
|
||||
.then(() => {
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Failed to initialise app:', err)
|
||||
document.getElementById('root')!.innerHTML =
|
||||
`<pre style="color:red;padding:2rem">Failed to initialise: ${err}</pre>`
|
||||
})
|
||||
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2022",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
resolve: {
|
||||
dedupe: ['react', 'react-dom'],
|
||||
},
|
||||
optimizeDeps: {
|
||||
include: ['react-multistep'],
|
||||
},
|
||||
server: {
|
||||
proxy: {
|
||||
// Proxy API calls to the app service
|
||||
'/api': {
|
||||
target: process.env.SERVER_HTTPS || process.env.SERVER_HTTP,
|
||||
changeOrigin: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user