Fixed login, added clear storage button

apps/web/src/components/screens/login/form.tsx

@@ -3,7 +3,7 @@ import { Input } from "@tensamin/ui/cmp/input";
 import { Label } from "@tensamin/ui/cmp/label";
 import { useStorage } from "@tensamin/storage/context";
 import { log, toast } from "@tensamin/shared/log";
-import { Upload } from "lucide-react";
+import { File } from "lucide-react";
 import * as React from "react";
 import { z } from "zod";
 
@@ -34,7 +34,17 @@ function parseTuFileContent(rawFileContent: string): {
   userId: number;
   privateKey: string;
 } {
-  if (rawFileContent.length !== 92 || !rawFileContent.includes("::")) {
+  if (rawFileContent.trim().length === 0) {
+    throw new Error("File is empty");
+  } else if (!rawFileContent.includes("::")) {
+    throw new Error("Invalid file");
+  } else if (rawFileContent.split("::").length !== 2) {
+    throw new Error("Invalid file");
+  } else if (rawFileContent.split("::")[0].length === 0) {
+    throw new Error("Invalid file");
+  } else if (rawFileContent.split("::")[1].length === 0) {
+    throw new Error("Invalid file");
+  } else if (isNaN(Number(rawFileContent.split("::")[0]))) {
     throw new Error("Invalid file");
   }
 
@@ -77,7 +87,7 @@ export default function Form() {
 
         location.href = "/";
       } catch (error) {
-        log(0, "Login", "red", error);
+        log(0, "login", "red", error);
         toast("error", "Failed to load file");
       }
     },
@@ -115,7 +125,7 @@ export default function Form() {
         const parse = fetchedUser.shape.data.safeParse(data);
 
         if (!parse.success) {
-          log(0, "Login", "red", "Invalid response from server", parse.error);
+          log(0, "login", "red", "Invalid response from server", parse.error);
           toast("error", "Invalid response from server");
           return;
         }
@@ -128,7 +138,7 @@ export default function Form() {
 
         location.href = "/";
       } catch (error) {
-        log(0, "Login", "red", error);
+        log(0, "login", "red", error);
         toast("error", "Failed to fetch user data");
       }
     },
@@ -141,8 +151,8 @@ export default function Form() {
         onClick={() => uploadRef.current?.click()}
         className="flex flex-col gap-3 cursor-pointer w-55 aspect-square bg-input/13 hover:bg-input/30 transition-all duration-300 ease-in-out border-3 items-center justify-center rounded-lg"
       >
-        <Upload className="text-foreground" size={27} />
-        <p className="text-md">Upload .tu file</p>
+        <File className="text-foreground" size={27} />
+        <p className="text-md">Select .tu file</p>
       </div>
       <input
         accept=".tu"

apps/web/src/routes/screens/login.tsx

@@ -8,7 +8,7 @@ import CreateScreen from "@tensamin/ui/screens/util";
  */
 export default function Page() {
   return (
-    <CreateScreen>
+    <CreateScreen className="gap-5">
       <Form />
       <div className="flex">
         <a target="_blank" href="https://docs.tensamin.net/installation/#iota">

packages/ui/src/cmp/alert-dialog.tsx

@@ -0,0 +1,185 @@
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
+
+import { cn } from "../lib/utils"
+import { Button } from "./button"
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Popup.Props & {
+  size?: "default" | "sm"
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <Button
+      data-slot="alert-dialog-action"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Close.Props &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}

packages/ui/src/screens/error.tsx

@@ -1,5 +1,5 @@
 import Link from "../link";
-import CreateScreen from "./util";
+import CreateScreen, { StorageDestoryer } from "./util";
 
 /**
  * Executes Screen.
@@ -14,6 +14,7 @@ export default function Screen(props: { error: string; description: string }) {
         {props.description}
       </p>
       <Link label="status.tensamin.net" link="https://status.tensamin.net" />
+      <StorageDestoryer />
     </CreateScreen>
   );
 }

packages/ui/src/screens/loading.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import CreateScreen from "./util";
+import CreateScreen, { StorageDestoryer } from "./util";
 
 const DELAY = 250;
 
@@ -79,6 +79,7 @@ export default function Screen(props: ScreenProps) {
           }}
         />
       </div>
+      <StorageDestoryer />
     </CreateScreen>
   );
 }

packages/ui/src/screens/util.tsx

@@ -1,13 +1,19 @@
+import { cn } from "../lib/utils";
 import Controls from "@tensamin/tauri/controls";
 
 export default function CreateScreen({
   children,
+  className,
 }: {
   children: React.ReactNode;
+  className?: string;
 }) {
   return (
     <div
-      className="bg-background w-screen h-screen flex flex-col justify-center items-center"
+      className={cn(
+        "bg-background w-screen h-screen flex flex-col justify-center items-center",
+        className,
+      )}
       data-tauri-drag-region
     >
       <>
@@ -17,3 +23,59 @@ export default function CreateScreen({
     </div>
   );
 }
+
+import { Button } from "../cmp/button";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "../cmp/alert-dialog";
+import { useIsMobile } from "../lib/utils";
+
+export function StorageDestoryer() {
+  const isMobile = useIsMobile();
+  return (
+    <div className={cn("fixed p-5 bottom-0", isMobile ? "w-full" : "right-0")}>
+      <AlertDialog>
+        <AlertDialogTrigger
+          render={
+            <Button variant="destructive" className={isMobile ? "w-full" : ""}>
+              Clear storage
+            </Button>
+          }
+        />
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              Are you sure you want to clear storage?
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              This action cannot be undone. It will clear all your settings and
+              credentials.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogAction
+              onClick={async () => {
+                localStorage.clear();
+                for (const db of await indexedDB.databases()) {
+                  indexedDB.deleteDatabase(db.name!);
+                }
+                location.reload();
+              }}
+            >
+              Continue
+            </AlertDialogAction>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}