Initiliazation

full/Angel-client/src/sign_in.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { useToast } from "./hooks/use-toast";
+import { invoke } from "@tauri-apps/api/core";
+import { useNavigate } from "react-router-dom";
+
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { validate_password } from "./global";
+
+const formSchema = z.object({
+  username: z.string().min(3, {
+    message: "Username must be at least 3 characters long.",
+  }),
+  password: z
+    .string()
+    .min(8, {
+      message: "Password must be at least 8 characters long.",
+    })
+    .refine(async (password) => await validate_password(password), {
+      message:
+        "Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character.",
+    }),
+});
+
+const Sign_in = () => {
+  const nav = useNavigate();
+  const form = useForm({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      username: "",
+      password: "",
+    },
+  });
+  const { toast } = useToast();
+
+  async function onSubmit(_values: any) {
+    const version: string = await invoke("get_app_version");
+    toast({
+      title: "Success: Signed in",
+      description: `Loading Angel Panel v${version}...`,
+    });
+
+    setTimeout(() => {
+      nav("/dash");
+    }, 2500);
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center login-box">
+      <div className="bg-white p-8 rounded-lg shadow-lg w-full">
+        <h2 className="text-2xl font-bold mb-6 text-center">
+          Sign in to Your account
+        </h2>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+            <FormField
+              control={form.control}
+              name="username"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Username</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="username"
+                      placeholder="Enter your username"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Password</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="password"
+                      placeholder="Enter your unique password"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <div className="flex items-center space-x-2 sign-in-meow mr-2 text-sm">
+              <Checkbox id="remember" />
+              <label
+                htmlFor="remember"
+                className="font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              >
+                Remember me
+              </label>
+              <span className="mx-1">-</span>
+              <button
+                onClick={() => nav("/sign_up")}
+                className="text-black hover:bg-gray-300 hover:bg-opacity-50 px-1 rounded transition"
+              >
+                Sign up
+              </button>
+            </div>
+            <Button type="submit" className="w-full">
+              Continue
+            </Button>
+          </form>
+        </Form>
+      </div>
+    </div>
+  );
+};
+
+export default Sign_in;