1 files changed, 148 insertions, 0 deletions
diff --git a/src/components/Login2.tsx b/src/components/Login2.tsx
new file mode 100644
index 0000000..2164b1a
--- /dev/null
+++ b/src/components/Login2.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import { FormState, postLogin, postRegister } from "@/actions/login";
+
+import { useActionState, useEffect, useState } from "react";
+import {
+  Card,
+  CardHeader,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { useRouter } from "waku";
+
+export default function AuthScreen() {
+  const [isReg, setReg] = useState(false);
+  return <OOldform isReg={isReg} toggle={() => setReg((b) => !b)} />;
+}
+
+function OOldform({ isReg, toggle }: { isReg: boolean; toggle: () => void }) {
+  const regstrings = {
+    title: "Welcome to Sorlang",
+    desc: "Sign up",
+    button: "Sign up",
+    toggle: "Have an account?",
+    toggle2: "Login",
+  };
+  const logstrings = {
+    title: "Welcome back",
+    desc: "Login to Sorlang",
+    button: "Login",
+    toggle: "Don't have an account?",
+    toggle2: "Sign up",
+  };
+  const [strings, setStrings] = useState(logstrings);
+
+  useEffect(() => {
+    if (isReg) setStrings(regstrings);
+    else setStrings(logstrings);
+  }, [isReg]);
+
+  const [state, formAction, isPending] = useActionState<FormState, FormData>(
+    isReg ? postRegister : postLogin,
+    {},
+    "/login",
+  );
+  // const nav = useRouter();
+  // useEffect(() => {
+  //   if (state.success) nav.replace("/");
+  // }, [state]);
+  return (
+    <form action={formAction}>
+      <div className="flex flex-col gap-6">
+        <Card>
+          <CardHeader className="text-center">
+            <CardTitle className="text-xl">{strings.title}</CardTitle>
+            <CardDescription>{strings.desc}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid gap-6">
+              <div className="grid gap-6">
+                <Label>
+                  Username
+                  <Input placeholder="shadcn" name="username" />
+                  {state.name && <p>{state.name}</p>}
+                </Label>
+                <Label>
+                  {isReg ? (
+                    "Password"
+                  ) : (
+                    <Label className="flex justify-between">
+                      <span>Password</span>
+                      <a
+                        href="#"
+                        className="ml-auto text-sm underline-offset-4 hover:underline"
+                      >
+                        Forgot your password?
+                      </a>
+                    </Label>
+                  )}
+                  <Input type="password" placeholder="..." name="password" />
+                  {state.password && <p>{state.password}</p>}
+                </Label>
+              </div>
+              <Button type="submit" className="w-full">
+                {strings.button}
+              </Button>
+              <div className="text-center text-sm">
+                {strings.toggle}
+                <a
+                  onClick={toggle}
+                  href="#"
+                  className="underline underline-offset-4"
+                >
+                  {strings.toggle2}
+                </a>
+              </div>
+            </div>
+            {state.error && <p className="text-red">{state.error}</p>}
+          </CardContent>
+        </Card>
+        <div className="text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary  ">
+          By clicking continue, you agree to our{" "}
+          <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.
+        </div>
+      </div>
+    </form>
+    // <form action={formAction} aria-disabled={isPending}>
+    //   {state.msg}
+    //   <label>
+    //     Username
+    //     <input type="text" placeholder="shadcn" name="username" />
+    //   </label>
+    //   <label className="flex justify-between">
+    //     <span>Password</span>
+    //     <a
+    //       href="#"
+    //       className="ml-auto text-sm underline-offset-4 hover:underline"
+    //     >
+    //       Forgot your password?
+    //     </a>
+    //     <input type="password" placeholder="..." name="password" />
+    //   </label>
+    //   <button type="submit" className="w-full">
+    //     Login
+    //   </button>
+    //   <div className="text-center text-sm">
+    //     Don&apos;t have an account?{" "}
+    //     <a href="#" className="underline underline-offset-4">
+    //       Sign up
+    //     </a>
+    //   </div>
+    // </form>
+  );
+}