wip

site/src/pages/login-page.tsx

@@ -20,7 +20,7 @@ export const LoginPage = () => {
   }
 
   const schema = z.object({
-    username: z.string(),
+    email: z.string().email(),
     password: z.string(),
   });
 
@@ -29,7 +29,7 @@ export const LoginPage = () => {
   const form = useForm({
     mode: "uncontrolled",
     initialValues: {
-      username: "",
+      email: "",
       password: "",
     },
     validate: zodResolver(schema),
@@ -42,7 +42,7 @@ export const LoginPage = () => {
     onError: () => {
       notifications.show({
         title: "Failed to login",
-        message: "Check your username and password",
+        message: "Check your email 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="Username"
-            placeholder="tinyauth"
+            label="Email"
+            placeholder="user@example.com"
             required
             disabled={loginMutation.isLoading}
-            key={form.key("username")}
-            {...form.getInputProps("username")}
+            key={form.key("email")}
+            {...form.getInputProps("email")}
           />
           <PasswordInput
             label="Password"
@@ -90,7 +90,7 @@ export const LoginPage = () => {
             type="submit"
             loading={loginMutation.isLoading}
           >
-            Sign in
+            Login
           </Button>
         </form>
       </Paper>

site/src/pages/logout-page.tsx

@@ -5,9 +5,10 @@ import axios from "axios";
 import { useUserContext } from "../context/user-context";
 import { Navigate } from "react-router";
 import { Layout } from "../components/layouts/layout";
+import { capitalize } from "../utils/utils";
 
 export const LogoutPage = () => {
-  const { isLoggedIn, username } = useUserContext();
+  const { isLoggedIn, email, oauth, provider } = useUserContext();
 
   if (!isLoggedIn) {
     return <Navigate to="/login" />;
@@ -43,8 +44,9 @@ export const LogoutPage = () => {
           Logout
         </Text>
         <Text>
-          You are currently logged in as <Code>{username}</Code>, click the
-          button below to log out.
+          You are currently logged in as <Code>{email}</Code>{" "}
+          {oauth && `using ${capitalize(provider)}`}. Click the button below to
+          log out.
         </Text>
         <Button
           fullWidth

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

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

site/src/utils/utils.ts

@@ -0,0 +1 @@
+export const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);