Feat/new UI (#153)

* wip

* feat: make forms functional

* feat: finalize pages

* chore: remove unused translations

* feat: app context

* feat: user context

* feat: finalize username login

* fix: use correct tab order in login form

* feat: add oauth logic

* chore: update readme and assets

* chore: rename docs back to assets

* feat: favicons

* feat: custom background image config option

* chore: add acknowledgements for background image

* feat: sanitize redirect URL

* feat: sanitize redirect URL on check

* chore: fix dependabot config

* refactor: bot suggestions

* fix: correctly redirect to app and check for untrusted redirects

* fix: run oauth auto redirect only when there is a redirect URI

* refactor: change select color

* fix: fix dockerfiles

* fix: fix hook rendering

* chore: remove translations cdn

* chore: formatting

* feat: validate api response against zod schema

* fix: use axios error instead of generic error in login page

frontend/src/components/auth/login-form.tsx

@@ -0,0 +1,81 @@
+import { useTranslation } from "react-i18next";
+import { Input } from "../ui/input";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "../ui/form";
+import { Button } from "../ui/button";
+import { loginSchema, LoginSchema } from "@/schemas/login-schema";
+
+interface Props {
+  onSubmit: (data: LoginSchema) => void;
+  loading?: boolean;
+}
+
+export const LoginForm = (props: Props) => {
+  const { onSubmit, loading } = props;
+  const { t } = useTranslation();
+
+  const form = useForm<LoginSchema>({
+    resolver: zodResolver(loginSchema),
+  });
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <FormField
+          control={form.control}
+          name="username"
+          render={({ field }) => (
+            <FormItem className="mb-4">
+              <FormLabel>{t("loginUsername")}</FormLabel>
+              <FormControl>
+                <Input
+                  placeholder={t("loginUsername")}
+                  disabled={loading}
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="password"
+          render={({ field }) => (
+            <FormItem className="mb-4">
+              <div className="relative">
+                <FormLabel className="mb-2">{t("loginPassword")}</FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder={t("loginPassword")}
+                    type="password"
+                    disabled={loading}
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+                <a
+                  href="/forgot-password"
+                  className="text-muted-foreground text-sm absolute right-0 bottom-10"
+                >
+                  {t("forgotPasswordTitle")}
+                </a>
+              </div>
+            </FormItem>
+          )}
+        />
+        <Button className="w-full" type="submit" loading={loading}>
+          {t("loginSubmit")}
+        </Button>
+      </form>
+    </Form>
+  );
+};

frontend/src/components/auth/login-forn.tsx

@@ -1,57 +0,0 @@
-import { TextInput, PasswordInput, Button, Anchor, Group, Text } from "@mantine/core";
-import { useForm, zodResolver } from "@mantine/form";
-import { LoginFormValues, loginSchema } from "../../schemas/login-schema";
-import { useTranslation } from "react-i18next";
-
-interface LoginFormProps {
-  isPending: boolean;
-  onSubmit: (values: LoginFormValues) => void;
-}
-
-export const LoginForm = (props: LoginFormProps) => {
-  const { isPending, onSubmit } = props;
-  const { t } = useTranslation();
-
-  const form = useForm({
-    mode: "uncontrolled",
-    initialValues: {
-      username: "",
-      password: "",
-    },
-    validate: zodResolver(loginSchema),
-  });
-
-  return (
-    <form onSubmit={form.onSubmit(onSubmit)}>
-      <TextInput
-        label={t("loginUsername")}
-        placeholder="Username"
-        disabled={isPending}
-        required
-        withAsterisk={false}
-        key={form.key("username")}
-        {...form.getInputProps("username")}
-      />
-      <Group justify="space-between" mb={5} mt="md">
-        <Text component="label" htmlFor=".password-input" size="sm" fw={500}>
-        {t("loginPassword")}
-        </Text>
-
-        <Anchor href="#" onClick={() => window.location.replace("/forgot-password")} pt={2} fw={500} fz="xs">
-          {t('forgotPasswordTitle')}
-        </Anchor>
-      </Group>
-      <PasswordInput
-        className="password-input"
-        placeholder="Password"
-        required
-        disabled={isPending}
-        key={form.key("password")}
-        {...form.getInputProps("password")}
-      />
-      <Button fullWidth mt="xl" type="submit" loading={isPending}>
-        {t("loginSubmit")}
-      </Button>
-    </form>
-  );
-};

frontend/src/components/auth/oauth-buttons.tsx

@@ -1,58 +0,0 @@
-import { Grid, Button } from "@mantine/core";
-import { GithubIcon } from "../../icons/github";
-import { GoogleIcon } from "../../icons/google";
-import { OAuthIcon } from "../../icons/oauth";
-
-interface OAuthButtonsProps {
-  oauthProviders: string[];
-  isPending: boolean;
-  mutate: (provider: string) => void;
-  genericName: string;
-}
-
-export const OAuthButtons = (props: OAuthButtonsProps) => {
-  const { oauthProviders, isPending, genericName, mutate } = props;
-  return (
-    <Grid mb="md" mt="md" align="center" justify="center">
-      {oauthProviders.includes("google") && (
-        <Grid.Col span="content">
-          <Button
-            radius="xl"
-            leftSection={<GoogleIcon style={{ width: 14, height: 14 }} />}
-            variant="default"
-            onClick={() => mutate("google")}
-            loading={isPending}
-          >
-            Google
-          </Button>
-        </Grid.Col>
-      )}
-      {oauthProviders.includes("github") && (
-        <Grid.Col span="content">
-          <Button
-            radius="xl"
-            leftSection={<GithubIcon style={{ width: 14, height: 14 }} />}
-            variant="default"
-            onClick={() => mutate("github")}
-            loading={isPending}
-          >
-            Github
-          </Button>
-        </Grid.Col>
-      )}
-      {oauthProviders.includes("generic") && (
-        <Grid.Col span="content">
-          <Button
-            radius="xl"
-            leftSection={<OAuthIcon style={{ width: 14, height: 14 }} />}
-            variant="default"
-            onClick={() => mutate("generic")}
-            loading={isPending}
-          >
-            {genericName}
-          </Button>
-        </Grid.Col>
-      )}
-    </Grid>
-  );
-};

frontend/src/components/auth/totp-form.tsx

@@ -1,40 +1,54 @@
-import { Button, PinInput } from "@mantine/core";
-import { useForm, zodResolver } from "@mantine/form";
-import { z } from "zod";
+import { Form, FormControl, FormField, FormItem } from "../ui/form";
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "../ui/input-otp";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { totpSchema, TotpSchema } from "@/schemas/totp-schema";
 
-const schema = z.object({
-  code: z.string(),
-});
-
-type FormValues = z.infer<typeof schema>;
-
-interface TotpFormProps {
-  onSubmit: (values: FormValues) => void;
-  isPending: boolean;
+interface Props {
+  formId: string;
+  onSubmit: (code: TotpSchema) => void;
+  loading?: boolean;
 }
 
-export const TotpForm = (props: TotpFormProps) => {
-  const { onSubmit, isPending } = props;
+export const TotpForm = (props: Props) => {
+  const { formId, onSubmit, loading } = props;
 
-  const form = useForm({
-    mode: "uncontrolled",
-    initialValues: {
-      code: "",
-    },
-    validate: zodResolver(schema),
+  const form = useForm<TotpSchema>({
+    resolver: zodResolver(totpSchema),
   });
 
   return (
-    <form onSubmit={form.onSubmit(onSubmit)}>
-      <PinInput
-        length={6}
-        type={"number"}
-        placeholder=""
-        {...form.getInputProps("code")}
-      />
-      <Button type="submit" mt="xl" loading={isPending} fullWidth>
-        Verify
-      </Button>
-    </form>
+    <Form {...form}>
+      <form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
+        <FormField
+          control={form.control}
+          name="code"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <InputOTP maxLength={6} disabled={loading} {...field}>
+                  <InputOTPGroup>
+                    <InputOTPSlot index={0} />
+                    <InputOTPSlot index={1} />
+                    <InputOTPSlot index={2} />
+                  </InputOTPGroup>
+                  <InputOTPSeparator />
+                  <InputOTPGroup>
+                    <InputOTPSlot index={3} />
+                    <InputOTPSlot index={4} />
+                    <InputOTPSlot index={5} />
+                  </InputOTPGroup>
+                </InputOTP>
+              </FormControl>
+            </FormItem>
+          )}
+        />
+      </form>
+    </Form>
   );
 };