base for email sign up flow

frontend/src/App.tsx

@@ -15,6 +15,7 @@ import Login from "pages/Login";
 import Logout from "pages/Logout";
 import NotFound from "pages/NotFound";
 import Profile from "pages/Profile";
+import Register from "pages/Register";
 
 import Container from "components/Container";
 import NotFoundRedirect from "components/NotFoundRedirect";
@@ -39,6 +40,7 @@ const App = () => {
                       <Route path="/profile" element={<Profile />} />
                       <Route path="/login" element={<Login />} />
                       <Route path="/logout" element={<Logout />} />
+                      <Route path="/register/:token" element={<Register />} />
                       <Route path="/create" element={<Create />} />
                       <Route path="/browse/:page?" element={<Browse />} />
                       <Route path="/item/:id" element={<ListingDetails />} />

frontend/src/components/auth/AuthBlock.tsx

@@ -10,7 +10,7 @@ import Spinner from "components/ui/Spinner";
 
 import AuthProvider from "./AuthProvider";
 import LoginForm from "./LoginForm";
-import SignupForm from "./SignupForm";
+import SignupWithEmail from "./SignupWithEmail";
 
 export const AuthBlockInner = () => {
   const auth = useAuthentication();
@@ -66,7 +66,9 @@ export const AuthBlockInner = () => {
 
   return (
     <>
-      <CardContent>{isSignup ? <SignupForm /> : <LoginForm />}</CardContent>
+      <CardContent>
+        {isSignup ? <SignupWithEmail /> : <LoginForm />}
+      </CardContent>
       <CardFooter>
         <AuthProvider handleGithubSubmit={handleGithubSubmit} />
       </CardFooter>

frontend/src/components/auth/SignupWithEmail.tsx

@@ -0,0 +1,48 @@
+import { SubmitHandler, useForm } from "react-hook-form";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { EmailSignUpSchema, EmailSignUpType } from "types";
+
+import { Button } from "components/ui/Button/Button";
+import ErrorMessage from "components/ui/ErrorMessage";
+import { Input } from "components/ui/Input/Input";
+
+const SignupWithEmail = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<EmailSignupType>({
+    resolver: zodResolver(EmailSignUpSchema),
+  });
+
+  const onSubmit: SubmitHandler<EmailSignupType> = async (
+    data: EmailSignupType,
+  ) => {
+    // TODO: Add an api endpoint to create EmailSignUpToken and send email to
+    //       submitted email. User gets link in email to /register/{token}
+    //       to finish sign up
+
+    console.log(data);
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="grid grid-cols-1 space-y-6">
+      {/* Email Input */}
+      <div className="relative">
+        <Input placeholder="Email" type="text" {...register("email")} />
+        {errors?.email && <ErrorMessage>{errors?.email?.message}</ErrorMessage>}
+      </div>
+      {/* Signup Button */}
+      <Button
+        variant="outline"
+        className="w-full text-white bg-blue-600 hover:bg-opacity-70">
+        Sign up with email
+      </Button>
+    </form>
+  );
+};
+
+export default SignupWithEmail;

frontend/src/pages/Register.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+
+import { paths } from "gen/api";
+import { useAlertQueue } from "hooks/useAlertQueue";
+import { useAuthentication } from "hooks/useAuth";
+
+import SignupForm from "components/auth/SignupForm";
+import { Button } from "components/ui/Button/Button";
+
+type EmailSignUpResponse =
+  paths["/emailSignUp/{token}"]["get"]["responses"][200]["content"]["application/json"];
+
+const Register = () => {
+  const { addErrorAlert } = useAlertQueue();
+  const { token } = useParams();
+  const [emailToken, setEmailToken] = useState<EmailSignUpResponse | null>(
+    null,
+  );
+  const auth = useAuthentication();
+
+  useEffect(() => {
+    const fetchListing = async () => {
+      if (token === undefined) {
+        return;
+      }
+
+      try {
+        const { data, error } = await auth.client.GET("/emailSignUp/{token}", {
+          params: {
+            path: { token },
+          },
+        });
+        if (error) {
+          addErrorAlert(error);
+        } else {
+          setEmailToken(data);
+        }
+      } catch (err) {
+        addErrorAlert(err);
+      }
+    };
+    fetchListing();
+  }, [token]);
+
+  if (!emailToken) {
+    return (
+      <div>
+        <h1>Invalid Sign Up Link</h1>
+        <Button
+          variant="outline"
+          className="w-full text-white bg-blue-600 hover:bg-opacity-70">
+          Login / Signup
+        </Button>
+      </div>
+    );
+  }
+  return (
+    <div>
+      <SignupForm />
+    </div>
+  );
+};
+
+export default Register;

frontend/src/types/index.ts

@@ -18,6 +18,17 @@ export const LoginSchema = z.object({
 
 export type LoginType = z.infer<typeof LoginSchema>;
 
+export const EmailSignUpSchema = z.object({
+  email: z
+    .string({
+      required_error: "Email required.",
+    })
+    .min(3, { message: "Email required." })
+    .email("Invalid email."),
+});
+
+export type EmailSignUpType = z.infer<typeof EmailSignUpSchema>;
+
 export const SignUpSchema = z
   .object({
     email: z

store/app/model.py

@@ -43,7 +43,6 @@ class User(RobolistBaseModel):
     permissions: set[UserPermission] | None = None
     created_at: int
     updated_at: int
-    email_verified_at: int | None = None
     github_id: str | None = None
     google_id: str | None = None
 
@@ -74,6 +73,20 @@ def verify_email(self) -> None:
         self.email_verified_at = int(time.time())
 
 
+class EmailSignUpToken(RobolistBaseModel):
+    """
+    Object created when user attempts to sign up with email.
+
+    Will be checked by register dynamic route
+    """
+
+    token: str
+
+    @classmethod
+    def create(cls) -> Self:
+        return cls(token=new_uuid())
+
+
 class OAuthKey(RobolistBaseModel):
     """Keys for OAuth providers which identify users."""