Feat/totp (#45)

* wip

* feat: finalize totp gen code

* refactor: split login screen and forms

* feat: add totp logic and ui

* refactor: make totp pending expiry time fixed

* refactor: skip all checks when disable continue is enabled

* fix: fix cli not exiting on invalid input

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

@@ -0,0 +1,46 @@
+import { TextInput, PasswordInput, Button } from "@mantine/core";
+import { useForm, zodResolver } from "@mantine/form";
+import { LoginFormValues, loginSchema } from "../../schemas/login-schema";
+
+interface LoginFormProps {
+  isLoading: boolean;
+  onSubmit: (values: LoginFormValues) => void;
+}
+
+export const LoginForm = (props: LoginFormProps) => {
+  const { isLoading, onSubmit } = props;
+
+  const form = useForm({
+    mode: "uncontrolled",
+    initialValues: {
+      username: "",
+      password: "",
+    },
+    validate: zodResolver(loginSchema),
+  });
+
+  return (
+    <form onSubmit={form.onSubmit(onSubmit)}>
+      <TextInput
+        label="Username"
+        placeholder="user@example.com"
+        required
+        disabled={isLoading}
+        key={form.key("username")}
+        {...form.getInputProps("username")}
+      />
+      <PasswordInput
+        label="Password"
+        placeholder="password"
+        required
+        mt="md"
+        disabled={isLoading}
+        key={form.key("password")}
+        {...form.getInputProps("password")}
+      />
+      <Button fullWidth mt="xl" type="submit" loading={isLoading}>
+        Login
+      </Button>
+    </form>
+  );
+};

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

@@ -0,0 +1,72 @@
+import { Grid, Button } from "@mantine/core";
+import { GithubIcon } from "../../icons/github";
+import { GoogleIcon } from "../../icons/google";
+import { OAuthIcon } from "../../icons/oauth";
+import { TailscaleIcon } from "../../icons/tailscale";
+
+interface OAuthButtonsProps {
+  oauthProviders: string[];
+  isLoading: boolean;
+  mutate: (provider: string) => void;
+  genericName: string;
+}
+
+export const OAuthButtons = (props: OAuthButtonsProps) => {
+  const { oauthProviders, isLoading, 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={isLoading}
+          >
+            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={isLoading}
+          >
+            Github
+          </Button>
+        </Grid.Col>
+      )}
+      {oauthProviders.includes("tailscale") && (
+        <Grid.Col span="content">
+          <Button
+            radius="xl"
+            leftSection={<TailscaleIcon style={{ width: 14, height: 14 }} />}
+            variant="default"
+            onClick={() => mutate("tailscale")}
+            loading={isLoading}
+          >
+            Tailscale
+          </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={isLoading}
+          >
+            {genericName}
+          </Button>
+        </Grid.Col>
+      )}
+    </Grid>
+  );
+};

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

@@ -0,0 +1,40 @@
+import { Button, PinInput } from "@mantine/core";
+import { useForm, zodResolver } from "@mantine/form";
+import { z } from "zod";
+
+const schema = z.object({
+  code: z.string(),
+});
+
+type FormValues = z.infer<typeof schema>;
+
+interface TotpFormProps {
+  onSubmit: (values: FormValues) => void;
+  isLoading: boolean;
+}
+
+export const TotpForm = (props: TotpFormProps) => {
+  const { onSubmit, isLoading } = props;
+
+  const form = useForm({
+    mode: "uncontrolled",
+    initialValues: {
+      code: "",
+    },
+    validate: zodResolver(schema),
+  });
+
+  return (
+    <form onSubmit={form.onSubmit(onSubmit)}>
+      <PinInput
+        length={6}
+        type={"number"}
+        placeholder=""
+        {...form.getInputProps("code")}
+      />
+      <Button type="submit" mt="xl" loading={isLoading} fullWidth>
+        Verify
+      </Button>
+    </form>
+  );
+};