local login now functional

src/app/LocalAuthPlaceholder.tsx

@@ -1,25 +1,75 @@
-import { Box, Button, CssBaseline, Paper, Stack, Typography } from '@mui/material'
+import { Box, Button, CssBaseline, Paper, Stack, TextField, Typography } from '@mui/material'
 import { getName } from 'services/whiteLabel'
+import { useState } from 'react'
+import axios from 'axios'
 
 export type LocalAuthPlaceholderReason = 'unconfigured' | 'insecure_origin'
 
 interface Props {
-  /** Why cloud Auth0 was skipped — copy differs when env is set but the page is not a secure context (e.g. http://LAN IP). */
   reason?: LocalAuthPlaceholderReason
+  setToken?: (token: string) => void
 }
 
-/**
- * Shown when Auth0 is not used (missing config and/or non–secure context).
- * Replace with backend-driven login once local auth is implemented.
- */
 export default function LocalAuthPlaceholder(props: Props) {
-  const { reason = 'unconfigured' } = props
+  const { reason = 'unconfigured', setToken } = props
   const productName = getName()
 
+  const [mode, setMode] = useState<'login' | 'signup'>('login')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [name, setName] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const apiUrl = import.meta.env.VITE_APP_API_URL
+
+  const handleSignup = async () => {
+    setError('')
+    setLoading(true)
+    try {
+      const resp = await axios.post(`${apiUrl}/local-auth/signup`, { email, password, name })
+      const token = resp.data.token
+      if (token && setToken) {
+        localStorage.setItem('local_auth_token', token)
+        setToken(token)
+      }
+    } catch (err: any) {
+      setError(err.response?.data?.error || 'Signup failed')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleLogin = async () => {
+    setError('')
+    setLoading(true)
+    try {
+      const resp = await axios.post(`${apiUrl}/local-auth/login`, { email, password })
+      const token = resp.data.token
+      if (token && setToken) {
+        localStorage.setItem('local_auth_token', token)
+        setToken(token)
+      }
+    } catch (err: any) {
+      setError(err.response?.data?.error || 'Login failed')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (mode === 'signup') {
+      handleSignup()
+    } else {
+      handleLogin()
+    }
+  }
+
   const explanation =
     reason === 'insecure_origin'
-      ? 'This URL is not a secure context for cloud sign-in (Auth0 requires HTTPS, localhost, or 127.0.0.1). Use local account sign-in here instead once it is connected.'
-      : 'Cloud sign-in (Auth0) is not configured for this deployment. Local account sign-in will be available here.'
+      ? 'This URL is not a secure context for cloud sign-in. Use local account sign-in instead.'
+      : 'Local account sign-in for this deployment.'
 
   return (
     <>
@@ -35,25 +85,55 @@ export default function LocalAuthPlaceholder(props: Props) {
         }}
       >
         <Paper elevation={2} sx={{ maxWidth: 420, width: '100%', p: 4 }}>
-          <Stack spacing={3} alignItems="stretch">
-            <Typography variant="h5" component="h1">
-              {productName}
-            </Typography>
-            <Typography variant="body2" color="text.secondary">
-              {explanation}
-            </Typography>
-            <Stack spacing={1.5}>
-              <Button variant="contained" size="large" disabled>
-                Log in
+          <form onSubmit={handleSubmit}>
+            <Stack spacing={2} alignItems="stretch">
+              <Typography variant="h5" component="h1">
+                {productName}
+              </Typography>
+              <Typography variant="body2" color="text.secondary">
+                {explanation}
+              </Typography>
+              {mode === 'signup' && (
+                <TextField
+                  label="Name"
+                  value={name}
+                  onChange={e => setName(e.target.value)}
+                  fullWidth
+                />
+              )}
+              <TextField
+                label="Email"
+                type="email"
+                value={email}
+                onChange={e => setEmail(e.target.value)}
+                required
+                fullWidth
+              />
+              <TextField
+                label="Password"
+                type="password"
+                value={password}
+                onChange={e => setPassword(e.target.value)}
+                required
+                fullWidth
+              />
+              {error && (
+                <Typography variant="body2" color="error">
+                  {error}
+                </Typography>
+              )}
+              <Button variant="contained" size="large" type="submit" disabled={loading}>
+                {mode === 'signup' ? 'Sign up' : 'Log in'}
               </Button>
-              <Button variant="outlined" size="large" disabled>
-                Sign up
+              <Button
+                variant="text"
+                size="small"
+                onClick={() => { setMode(mode === 'login' ? 'signup' : 'login'); setError('') }}
+              >
+                {mode === 'login' ? 'Need an account? Sign up' : 'Already have an account? Log in'}
               </Button>
             </Stack>
-            <Typography variant="caption" color="text.secondary">
-              Buttons are placeholders until the backend login flow is wired up.
-            </Typography>
-          </Stack>
+          </form>
         </Paper>
       </Box>
     </>