Save before testing router

usentrycoach.client/package-lock.json

@@ -8,6 +8,7 @@
       "name": "usentrycoach.client",
       "version": "0.0.0",
       "dependencies": {
+        "classnames": "^2.5.1",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "zod": "^3.25.23"
@@ -1781,6 +1782,11 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",

usentrycoach.client/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "classnames": "^2.5.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "zod": "^3.25.23"

usentrycoach.client/src/App.tsx

@@ -9,7 +9,7 @@ export default function App()
 
     if (!token)
     {
-        return <Login setToken={setToken} />
+        return <Login setToken={setToken} />;
     }
 
     return <ChatControl/>

usentrycoach.client/src/Components/Login.css

@@ -0,0 +1,84 @@
+/*#login-container*/
+/*{*/
+/*    top: 0;*/
+/*    left: 0;*/
+/*    position: absolute;*/
+/*    width: 100vw;*/
+/*    height: 100vh;*/
+/*    backdrop-filter: blur(5px);*/
+/*}*/
+
+form
+{
+    /*position: absolute;*/
+    /*left: 50vw;*/
+    /*top: 50vh;*/
+    /*transform: translate(-50%, -50%);*/
+    width: 120%;
+    height: auto;
+    display: flex;
+    gap: 1rem;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 25px 20px 25px;
+    border-radius: 10px;
+    border-color: #282828;
+    border-style: solid;
+    border-width: 2px;
+    background: #323232;
+    filter: drop-shadow(0px 0px 8px rgb(146, 97, 251));
+}
+
+.input-field
+{
+    width: 100%;
+}
+
+.register-row
+{
+    display: flex;
+    white-space-collapse: preserve;
+}
+
+.register-row a
+{
+    cursor: pointer;
+}
+
+form input
+{
+    padding: 0.4rem;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+label
+{
+    width: 100%;
+}
+
+label p
+{
+    justify-self: start;
+    display: block;
+    margin: 0;
+}
+
+#button-login
+{
+    width: 100%;
+    padding: 0.5em;
+}
+
+#login-error
+{
+    background: #bf830e;
+    border-radius: 5px;
+    width: 0; /* Collapses element so it doesn't affect parent width */
+    min-width: 100%; /* Expands element to parent width */
+}
+
+#login-error p {
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+}

usentrycoach.client/src/Components/Login.tsx

@@ -1,33 +1,62 @@
 import { useState, type FormEvent } from 'react';
 import { z } from 'zod/v4';
+import './Login.css';
+import classNames from "classnames";
 
 export default function Login({ setToken } : {setToken: (token: string) => void})
 {
-    const [username, setUsername] = useState<string>("");
+
+    const [email, setEmail] = useState<string>("");
     const [password, setPassword] = useState<string>("");
+    const [loginError, setLoginError] = useState<string | null>(null);
+    const [waiting, setWaiting] = useState(false);
 
     async function doLogin(event: FormEvent<HTMLFormElement>)
     {
+        setWaiting(true);
+
         event.preventDefault();
 
-        const token = await loginUser({username, password});
+        try 
+        {
+            const token = await loginUser({email, password});
+            setToken(token);
+        }
+        catch (e) 
+        {
+            console.error(e);
+            setLoginError("Ein fehler ist aufgetreten.");
+        }
 
-        setToken(token);
+        setWaiting(false);
     }
 
     return (
-        <div>
-            <form className="login-form" onSubmit={e => void doLogin(e)} method="action">
+        <div id="login-container">
+            <form className="login-form" onSubmit={e => void doLogin(e)} method="action" inert={waiting}>
+                <h2>
+                    Login
+                </h2>
+                {
+                    loginError ? (
+                        <div id="login-error">
+                            <p>{loginError}</p>
+                        </div>) : <></>
+                }
                 <label>
-                    Email:
-                    <input type="text" name="username" placeholder="Username" required onChange={event => setUsername(event.target.value)} />
+                    <p>Email:</p>
+                    <input type="email" className="form-field" name="email" autoComplete="email" /*required*/
+                           onChange={event => setEmail(event.target.value)} />
                 </label>
                 <label>
-                    Password:
-                    <input type="password" name="password" placeholder="Password" required onChange={event => setPassword(event.target.value)} />
+                    <p>Password:</p>
+                    <input type="password" name="password" autoComplete="current-password"
+                        /*required*/ onChange={event => setPassword(event.target.value)}  />
                 </label>
-
-                <button type="submit">Login</button>
+                <button className="button-submit" type="submit" id="button-login">{waiting ? "Please wait..." : "Login"}</button>
+                <div className="register-row">
+                    New? <a>Register here!</a>
+                </div>
             </form>
         </div>
     );
@@ -37,10 +66,39 @@ const LoginResponse = z.object({
    token: z.string()
 });
 
-async function loginUser(credentials : {username: string, password: string}): Promise<string>
+async function loginUser(credentials : {email: string, password: string}): Promise<string>
+{
+    const queryParams = new URLSearchParams({
+        useCookies: "true"
+    });
+
+    const url = `login?${queryParams.toString()}`;
+
+    // Get a session token for OpenAI Realtime API
+    const response = await fetch(url, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(credentials)
+    });
+
+    if (!response.ok)
+    {
+        throw new Error(response.statusText);
+        // 500: internal server error
+    }
+
+    //const responseJson:unknown = await response.json();
+    //const parsedToken = LoginResponse.parse(responseJson);
+
+    return "abc"; //parsedToken.token;
+}
+
+async function registerUser(credentials : {email: string, password: string}): Promise<string>
 {
     // Get a session token for OpenAI Realtime API
-    const response = await fetch('login', {
+    const response = await fetch('register', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json'

usentrycoach.client/src/index.css

@@ -43,12 +43,14 @@ button {
   font-weight: 500;
   font-family: inherit;
   background-color: #1a1a1a;
-  cursor: pointer;
   transition: border-color 0.25s;
 }
-button:hover {
+
+button:hover:not([disabled]) {
   border-color: #646cff;
+  cursor: pointer;
 }
+
 button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
@@ -66,3 +68,12 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+.button-submit {
+  background-color: #208ddb;
+}
+
+.button-submit:hover:not([disabled]) {
+  background-color: #3c9be0;
+  border-color: #c7e3f6;
+}

usentrycoach.client/tsconfig.app.json

@@ -17,8 +17,8 @@
 
     /* Linting */
     "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
+    //"noUnusedLocals": true,
+    //"noUnusedParameters": true,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true

usentrycoach.client/vite.config.ts

@@ -44,7 +44,7 @@ const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_H
     env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'https://localhost:7085';
 
 // Define a list of all existing backend routes.
-const backendRoutes = ['/login', '/ephemeral_token'];
+const backendRoutes = ['/login', '/register', '/ephemeral_token'];
 
 // For development, we have a node.js server running that delivers our frontend.
 // We have to configure proxies for the backend calls, so that node.js will forward them to the backend.