feat: make app configurable

site/src/pages/login-page.tsx

@@ -20,7 +20,7 @@ export const LoginPage = () => {
   }
 
   const schema = z.object({
-    email: z.string().email({ message: "Invalid email" }),
+    username: z.string(),
     password: z.string(),
   });
 
@@ -29,7 +29,7 @@ export const LoginPage = () => {
   const form = useForm({
     mode: "uncontrolled",
     initialValues: {
-      email: "",
+      username: "",
       password: "",
     },
     validate: zodResolver(schema),
@@ -42,7 +42,7 @@ export const LoginPage = () => {
     onError: () => {
       notifications.show({
         title: "Failed to login",
-        message: "Check your email and password",
+        message: "Check your username and password",
         color: "red",
       });
     },
@@ -68,12 +68,12 @@ export const LoginPage = () => {
       <Paper shadow="md" p={30} mt={30} radius="md" withBorder>
         <form onSubmit={form.onSubmit(handleSubmit)}>
           <TextInput
-            label="Email"
-            placeholder="you@example.com"
+            label="Username"
+            placeholder="tinyauth"
             required
             disabled={loginMutation.isLoading}
-            key={form.key("email")}
-            {...form.getInputProps("email")}
+            key={form.key("username")}
+            {...form.getInputProps("username")}
           />
           <PasswordInput
             label="Password"

site/src/pages/logout-page.tsx

@@ -7,7 +7,7 @@ import { Navigate } from "react-router";
 import { Layout } from "../components/layouts/layout";
 
 export const LogoutPage = () => {
-  const { isLoggedIn } = useUserContext();
+  const { isLoggedIn, username } = useUserContext();
 
   if (!isLoggedIn) {
     return <Navigate to="/login" />;
@@ -43,7 +43,8 @@ export const LogoutPage = () => {
           Logout
         </Text>
         <Text>
-          You are already logged in, click the button below to log out.
+          You are currently logged in as {username}, click the button below to
+          log out.
         </Text>
         <Button
           fullWidth

site/src/schemas/user-context-schema.ts

@@ -2,6 +2,7 @@ import { z } from "zod";
 
 export const userContextSchema = z.object({
   isLoggedIn: z.boolean(),
+  username: z.string(),
 });
 
 export type UserContextSchemaType = z.infer<typeof userContextSchema>;