chore: Disable prod registration but allow sign-in (#137)

namesakefyi · Oct 20, 2024 · 5f1387a · 5f1387a
1 parent 840dd5d
commit 5f1387a
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 47 deletions.
diff --git a/src/components/Banner/Banner.tsx b/src/components/Banner/Banner.tsx
@@ -17,10 +17,13 @@ const bannerStyles = tv({
   base: "flex gap-2 p-3 pr-4 items-start w-full text-sm rounded-lg bg-gray-3 dark:bg-graydark-3 text-gray-dim",
   variants: {
     variant: {
-      info: "bg-blue-3 dark:bg-bluedark-3 text-blue-normal",
-      success: "bg-green-3 dark:bg-greendark-3 text-green-normal",
-      danger: "bg-red-3 dark:bg-reddark-3 text-red-normal",
-      warning: "bg-amber-3 dark:bg-amberdark-3 text-amber-normal",
+      info: "bg-blue-3 dark:bg-bluedark-3 text-blue-normal [&_a]:text-blue-normal",
+      success:
+        "bg-green-3 dark:bg-greendark-3 text-green-normal [&_a]:text-green-normal",
+      danger:
+        "bg-red-3 dark:bg-reddark-3 text-red-normal [&_a]:text-red-normal",
+      warning:
+        "bg-amber-3 dark:bg-amberdark-3 text-amber-normal [&_a]:text-amber-normal",
     },
   },
   defaultVariants: {

diff --git a/src/routes/_unauthenticated/signin.tsx b/src/routes/_unauthenticated/signin.tsx
@@ -12,6 +12,7 @@ import {
   TextField,
 } from "@/components";
 import { useAuthActions } from "@convex-dev/auth/react";
+import { RiArrowLeftSLine } from "@remixicon/react";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useConvexAuth } from "convex/react";
 import { ConvexError } from "convex/values";
@@ -31,14 +32,15 @@ const SignIn = () => {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const navigate = useNavigate({ from: "/signin" });
-
-  if (flow === "reset")
-    return <ForgotPassword onBack={() => setFlow("signIn")} />;
+  const isClosed = process.env.NODE_ENV === "production";
 
   useEffect(() => {
     if (isAuthenticated) navigate({ to: "/quests" });
   }, [isAuthenticated, navigate]);
 
+  if (flow === "reset")
+    return <ForgotPassword onBack={() => setFlow("signIn")} />;
+
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setIsSubmitting(true);
@@ -67,11 +69,10 @@ const SignIn = () => {
       console.error(error);
       if (error instanceof ConvexError) {
         setError(error.message);
-        setIsSubmitting(false);
       } else {
         setError("Something went wrong. Try again.");
-        setIsSubmitting(false);
       }
+      setIsSubmitting(false);
     }
   };
 
@@ -117,44 +118,44 @@ const SignIn = () => {
           </Form>
         </TabPanel>
         <TabPanel id="signUp">
-          <Form onSubmit={handleSubmit}>
-            <TextField
-              label="Email"
-              name="email"
-              type="email"
-              autoComplete="email"
-              isRequired
-              value={email}
-              onChange={setEmail}
-            />
-            <TextField
-              label="Password"
-              name="password"
-              type="password"
-              isRequired
-              value={password}
-              onChange={setPassword}
-            />
-            <Button type="submit" isDisabled={isSubmitting} variant="primary">
-              {isSubmitting ? "Registering..." : "Register"}
-            </Button>
-          </Form>
+          {isClosed ? (
+            <Banner variant="info">
+              <p>
+                Namesake is in active development and currently closed to
+                signups. For name change support, join us on{" "}
+                <Link href="https://namesake.fyi/chat">Discord</Link>.
+              </p>
+            </Banner>
+          ) : (
+            <Form onSubmit={handleSubmit}>
+              <TextField
+                label="Email"
+                name="email"
+                type="email"
+                autoComplete="email"
+                isRequired
+                value={email}
+                onChange={setEmail}
+              />
+              <TextField
+                label="Password"
+                name="password"
+                type="password"
+                isRequired
+                value={password}
+                onChange={setPassword}
+              />
+              <Button type="submit" isDisabled={isSubmitting} variant="primary">
+                {isSubmitting ? "Registering..." : "Register"}
+              </Button>
+            </Form>
+          )}
         </TabPanel>
       </Tabs>
     </Card>
   );
 };
 
-const ClosedSignups = () => (
-  <Card>
-    <p>
-      Namesake is in active development and currently closed to signups. For
-      name change support, join us on{" "}
-      <Link href="https://namesake.fyi/chat">Discord</Link>.
-    </p>
-  </Card>
-);
-
 const ForgotPassword = ({ onBack }: { onBack: () => void }) => {
   const navigate = useNavigate({ from: "/signin" });
   const { signIn } = useAuthActions();
@@ -184,13 +185,26 @@ const ForgotPassword = ({ onBack }: { onBack: () => void }) => {
             })
             .catch((error) => {
               console.error(error);
-              setError(`Couldn't send code. Try again.`);
+              if (error instanceof ConvexError) {
+                setError(error.message);
+              } else {
+                setError("Couldn't send code. Is this email correct?");
+              }
               setIsSubmitting(false);
             })
             .finally(() => setIsSubmitting(false));
         }}
       >
-        <h2 className="text-lg font-medium">Reset password</h2>
+        <header className="flex items-center gap-3">
+          <Button
+            onPress={onBack}
+            icon={RiArrowLeftSLine}
+            variant="icon"
+            aria-label="Back to sign-in"
+            className="-m-2"
+          />
+          <h2 className="text-lg font-medium">Reset password</h2>
+        </header>
         {error && <Banner variant="danger">{error}</Banner>}
         <TextField
           name="email"
@@ -202,7 +216,6 @@ const ForgotPassword = ({ onBack }: { onBack: () => void }) => {
         <Button type="submit" variant="primary" isDisabled={isSubmitting}>
           Send code
         </Button>
-        <Button onPress={onBack}>Back to sign in</Button>
       </Form>
     </Card>
   ) : (
@@ -262,12 +275,10 @@ const ForgotPassword = ({ onBack }: { onBack: () => void }) => {
 };
 
 function LoginRoute() {
-  const isClosed = process.env.NODE_ENV === "production";
-
   return (
     <div className="flex flex-col w-96 max-w-full mx-auto min-h-dvh place-content-center gap-8 px-4 py-12">
       <Logo className="mb-4" />
-      {isClosed ? <ClosedSignups /> : <SignIn />}
+      <SignIn />
       <div className="flex gap-4 justify-center">
         <Link href="https://namesake.fyi">{`Namesake v${APP_VERSION}`}</Link>
         <Link href="https://namesake.fyi/chat">Support</Link>