feat: add login form

apps/frontend/src/app/dashboard/login/page.tsx

@@ -0,0 +1,5 @@
+import { LoginForm } from "src/components/login/LoginForm";
+
+export default async function Page() {
+  return <LoginForm />;
+}

apps/frontend/src/app/page.tsx

@@ -2,5 +2,5 @@ import { redirect } from "next/navigation";
 import { toPage } from "src/utils/next/toPage";
 
 export default async function Page() {
-  redirect(toPage("dashboard"));
+  redirect(toPage("accounts"));
 }

apps/frontend/src/components/login/LoginForm.tsx

@@ -1,12 +1,25 @@
+"use client";
+
 import Sheet from "@mui/joy/Sheet";
 import Typography from "@mui/joy/Typography";
 import FormControl from "@mui/joy/FormControl";
 import FormLabel from "@mui/joy/FormLabel";
 import Input from "@mui/joy/Input";
 import Button from "@mui/joy/Button";
-import Link from "@mui/joy/Link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { toPage } from "src/utils/next/toPage";
 
 export function LoginForm() {
+  const [email, setEmail] = useState("opentrader");
+  const [password, setPassword] = useState("");
+  const router = useRouter();
+
+  const handleLogin = () => {
+    window.localStorage.setItem("ADMIN_PASSWORD", password);
+    router.replace(toPage("grid-bot"));
+  };
+
   return (
     <Sheet
       sx={{
@@ -23,47 +36,42 @@ export function LoginForm() {
       variant="outlined"
     >
       <Typography component="h1" level="h4">
-        Welcome!
+        Welcome Trader!
       </Typography>
       <Typography level="body-sm">Sign in to continue.</Typography>
 
       <FormControl>
-        <FormLabel>Email</FormLabel>
+        <FormLabel>Username</FormLabel>
 
-        <Input name="email" placeholder="[email protected]" type="email" />
+        <Input
+          name="username"
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder="username"
+          type="text"
+          value={email}
+        />
       </FormControl>
 
       <FormControl>
         <FormLabel>Password</FormLabel>
 
-        <Input name="password" placeholder="password" type="password" />
+        <Input
+          name="password"
+          placeholder="password"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
       </FormControl>
 
       <Button
         sx={{
           mt: 1,
         }}
+        onClick={handleLogin}
       >
         Log in
       </Button>
-      <Button>Primary</Button>
-      <Button color="neutral">Secondary</Button>
-      <Button color="success">Success</Button>
-      <Button color="danger">Danger</Button>
-      <Button color="warning">Warning</Button>
-      <Button color="neutral" variant="soft">
-        Light
-      </Button>
-
-      <Typography
-        endDecorator={<Link href="/sign-up">Sign up</Link>}
-        fontSize="sm"
-        sx={{
-          alignSelf: "center",
-        }}
-      >
-        Don&apos;t have an account?
-      </Typography>
     </Sheet>
   );
 }

apps/frontend/src/providers/TrpcProvider.tsx

@@ -14,6 +14,9 @@ import { isTRPCError } from "src/ui/errors/utils";
 import { useTRPCErrorModal } from "src/ui/errors/api";
 import { tClient } from "src/lib/trpc/client";
 import { getBaseUrl } from "src/lib/trpc/getBaseUrl";
+import { isUnauthorizedError } from "src/ui/errors/utils/isUnauthorizedError";
+import { isLoginPage } from "src/utils/auth/isLoginPage";
+import { toPage } from "src/utils/next/toPage";
 
 export const TrpcProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
@@ -26,6 +29,11 @@ export const TrpcProvider: React.FC<{ children: React.ReactNode }> = ({
         queryCache: new QueryCache({
           onError: (error) => {
             if (isTRPCError(error)) {
+              if (isUnauthorizedError(error) && !isLoginPage()) {
+                window.location.href = toPage("login");
+                return;
+              }
+
               showErrorModal(error);
             }
           },

apps/frontend/src/ui/errors/utils/isUnauthorizedError.ts

@@ -0,0 +1,10 @@
+import { TRPC_ERROR_CODES_BY_KEY } from "@trpc/server/rpc";
+import type { TRPCApiError } from "src/ui/errors/types";
+
+export function isUnauthorizedError(error: TRPCApiError) {
+  return (
+    "code" in error.shape &&
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- shape is any
+    error.shape.code === TRPC_ERROR_CODES_BY_KEY.UNAUTHORIZED
+  );
+}

apps/frontend/src/utils/auth/isLoginPage.ts

@@ -0,0 +1,5 @@
+import { toPage } from "src/utils/next/toPage";
+
+export function isLoginPage() {
+  return window.location.pathname === toPage("login");
+}

apps/frontend/src/utils/next/toPage.ts

@@ -1,4 +1,5 @@
 const routes = {
+  login: "/dashboard/login",
   dashboard: "/dashboard",
   accounts: "/dashboard/accounts",
   "bot/:id": (botId: number) => {