Add password login flow

namesakefyi · Oct 3, 2024 · c0447f6 · c0447f6
1 parent fb1a017
commit c0447f6
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 9 deletions.
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -22,7 +22,7 @@ export const buttonStyles = tv({
       primary: "bg-purple-solid",
       secondary: "bg-gray-ghost text-gray-normal",
       destructive: "bg-red-solid",
-      icon: "bg-gray-ghost text-gray-dim hover:text-gray-normal border-0 p-2 flex items-center justify-center rounded-full",
+      icon: "bg-gray-ghost text-gray-dim hover:text-gray-normal border-0 flex items-center justify-center rounded-full",
     },
     size: {
       small: "h-8 px-2",
@@ -32,6 +32,18 @@ export const buttonStyles = tv({
       true: "cursor-default text-gray-dim opacity-50 forced-colors:text-[GrayText]",
     },
   },
+  compoundVariants: [
+    {
+      variant: "icon",
+      size: "small",
+      className: "w-8 h-8",
+    },
+    {
+      variant: "icon",
+      size: "medium",
+      className: "w-10 h-10 p-2",
+    },
+  ],
   defaultVariants: {
     variant: "secondary",
     size: "medium",

diff --git a/src/routes/_authenticated/quests/$questId.tsx b/src/routes/_authenticated/quests/$questId.tsx
@@ -58,7 +58,7 @@ function QuestDetailRoute() {
         title={quest.title}
         badge={
           <div className="flex gap-1">
-            <Badge>{quest.jurisdiction}</Badge>
+            {quest.jurisdiction && <Badge>{quest.jurisdiction}</Badge>}
             {userQuest?.completionTime ? (
               <Badge variant="success">Complete</Badge>
             ) : (

diff --git a/src/routes/_unauthenticated/login.tsx b/src/routes/_unauthenticated/login.tsx
@@ -106,6 +106,8 @@ const ForgotPassword = ({ onBack }: { onBack: () => void }) => {
           event.preventDefault();
           setIsSubmitting(true);
           const formData = new FormData(event.currentTarget);
+          formData.append("flow", "reset");
+
           signIn("password", formData)
             .then(() => {
               setStep({ email: formData.get("email") as string });
@@ -129,7 +131,6 @@ const ForgotPassword = ({ onBack }: { onBack: () => void }) => {
           value={email}
           onChange={setEmail}
         />
-        <input name="flow" type="hidden" value="reset" />
         <Button type="submit" variant="primary" isDisabled={isSubmitting}>
           Send code
         </Button>
@@ -143,12 +144,12 @@ const ForgotPassword = ({ onBack }: { onBack: () => void }) => {
           event.preventDefault();
           setIsSubmitting(true);
           const formData = new FormData(event.currentTarget);
+          formData.append("flow", "reset-verification");
+          formData.append("redirectTo", "/quests");
+          formData.append("email", step.email);
 
           try {
-            const result = await signIn("password", {
-              redirectTo: "/quests",
-              ...formData,
-            });
+            const result = await signIn("password", formData);
             if (result.redirect) {
               throw redirect({ to: result.redirect.toString() });
             }
@@ -181,8 +182,6 @@ const ForgotPassword = ({ onBack }: { onBack: () => void }) => {
           value={newPassword}
           onChange={setNewPassword}
         />
-        <input name="email" value={step.email} type="hidden" />
-        <input name="flow" value="reset-verification" type="hidden" />
         <Button type="submit" variant="primary" isDisabled={isSubmitting}>
           Reset password
         </Button>