signup works

2 files changed, 93 insertions, 12 deletions

diff --git a/src/routes/Login.js b/src/routes/Login.js
index 243c4af..bfb16c8 100644
--- a/src/routes/Login.js
+++ b/src/routes/Login.js
@@ -35,7 +35,7 @@ const LoginCard = styled("div", {
 
 const Title = styled("h1", {
   textAlign: "center",
-  fontSize: "6em",
+  fontSize: "5em",
   margin: "1rem 0",
   fontWeight: 300,
 });
@@ -109,7 +109,7 @@ function Login(props) {
         });
       }
     });
-  }, 500);
+  }, 200);
 
   function onKeyPress(e) {
     if (e.key == "Enter") {
diff --git a/src/routes/SignUp.js b/src/routes/SignUp.js
index 5e1d524..4df9854 100644
--- a/src/routes/SignUp.js
+++ b/src/routes/SignUp.js
@@ -1,6 +1,11 @@
-import {styled} from "@stitches/react";
+import { styled } from "@stitches/react";
 import Button from "../uikit/Button.js";
 import Input from "../uikit/Input.js"
+import { debounce } from "lodash";
+import { useState } from "react";
+import { useAuth } from "../hooks/useAuth.js";
+import { useNavigate } from "react-router-dom";
+import { useFeatures } from "../hooks/useFeatures.js";
 
 const Flex = styled("div", {
   display: "flex",
@@ -19,7 +24,7 @@ const LoginCard = styled("div", {
 
 const Title = styled("h1", {
   textAlign: "center",
-  fontSize: "6em",
+  fontSize: "5em",
   margin: "1rem 0",
   fontWeight: 300,
 });
@@ -42,25 +47,101 @@ const AlignRight = styled("div", {
   "display": "flex",
   "alignItems": "right",
   "justifyContent": "right"
-}) 
+})
 
 export function SignUp() {
+  const [passwordsMatch, setPasswordsMatch] = useState(true);
+  const [emailValid, setEmailValid] = useState(true);
+  const auth = useAuth();
+  const features = useFeatures();
+  const navigate = useNavigate();
+
+  const checkPasswordsMatch = debounce((e) => {
+    const password = document.getElementById("password").value;
+    const passwordConfirm = document.getElementById("passwordConfirm").value;
+
+    if (password === "" || passwordConfirm === "") {
+      return;
+    }
+    if (password !== passwordConfirm) {
+      console.debug("passwords don't match");
+      setPasswordsMatch(false);
+    } else {
+      console.debug("passwords match");
+      setPasswordsMatch(true);
+    }
+  }, 200);
+
+  const checkEmailValid = debounce((e) => {
+    const email = e.target.value;
+
+    if (email === "") {
+      return;
+    }
+
+    const re = /.{1,64}@.{1,64}\..{1,64}/i
+    if (!re.test(email)) {
+      console.debug("email is invalid");
+      setEmailValid(false);
+    } else {
+      console.debug("email is valid");
+      setEmailValid(true);
+    }
+
+  }, 200);
+
+  const handleSubmit = () => {
+    fetch("/api/v1/users", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        email: document.getElementById("email").value.trim(),
+        password: document.getElementById("password").value.trim(),
+        display_name: document.getElementById("displayName").value.trim() ?? null,
+      }),
+    }).then((res) => {
+      if (res.status === 200) {
+        res.json().then((data) => {
+          auth.signin(data.token, () => {
+            navigate("/");
+          });
+        });
+      } else {
+        alert("Something went wrong!");
+      }
+    });
+  };
+
+  if (!features.signup) {
+    return (
+      <Flex>
+        <LoginCard>
+          <Title>FDNS</Title>
+          <Subtitle>Sign Up</Subtitle>
+          <p>Sorry, but sign-ups are currently disabled.</p>
+        </LoginCard>
+      </Flex>
+    )
+  }
+
   return (
     <Flex>
       <LoginCard>
         <Title>FDNS</Title>
         <Subtitle>Sign Up</Subtitle>
-        <StyledLabel for="email">Email</StyledLabel>
-        <Input id="email" type="email"></Input>
+        <StyledLabel for="email">Email {!emailValid && <span style={{ color: "red" }}>(!) email appears invalid</span>}</StyledLabel>
+        <Input id="email" onChange={checkEmailValid} type="email"></Input>
         <StyledLabel for="displayName">Display Name</StyledLabel>
         <Input id="displayName"></Input>
         <StyledLabel for="password">Password</StyledLabel>
-        <Input id="password" type="password"></Input>
-        <StyledLabel for="passwordConfirm">Password (Confirm)</StyledLabel>
-        <Input id="passwordConfirm" type="password"></Input>
+        <Input id="password" onChange={checkPasswordsMatch} type="password"></Input>
+        <StyledLabel for="passwordConfirm">Password (Confirm) {!passwordsMatch && <span style={{ color: "red" }}>(!) passwords don't match</span>}</StyledLabel>
+        <Input id="passwordConfirm" onChange={checkPasswordsMatch} type="password"></Input>
         <AlignRight>
-        { /* <Button secondary>Cancel</Button> */ }
-        <Button primary>Sign Up {'\u2794'}</Button>
+          { /* <Button secondary>Cancel</Button> */}
+          <Button onClick={handleSubmit} primary>Sign Up {'\u2794'}</Button>
         </AlignRight>
       </LoginCard>
     </Flex>