start work on registration dob input

package.json

@@ -29,6 +29,7 @@
     "react-router-dom": "^6.9.0",
     "react-scripts": "5.0.1",
     "react-secure-storage": "^1.2.0",
+    "react-select-search": "^4.1.6",
     "react-spinners": "^0.13.8",
     "reoverlay": "^1.0.3",
     "slate": "^0.91.4",

pnpm-lock.yaml

@@ -18,7 +18,7 @@ dependencies:
     version: 5.11.13(@emotion/react@11.10.6)(@emotion/styled@11.10.6)(@types/react@18.0.28)(react-dom@18.2.0)(react@18.2.0)
   '@puyodead1/fosscord-ts':
     specifier: github:Puyodead1/fosscord.ts
-    version: github.com/Puyodead1/fosscord.ts/92ee52d40614f5322b456004388640cd52f656f5
+    version: github.com/Puyodead1/fosscord.ts/9bcd1a22fa6fe63b3abc922b4365e0c85e4fba8d
   '@testing-library/jest-dom':
     specifier: ^5.16.5
     version: 5.16.5
@@ -79,6 +79,9 @@ dependencies:
   react-secure-storage:
     specifier: ^1.2.0
     version: 1.2.0
+  react-select-search:
+    specifier: ^4.1.6
+    version: 4.1.6(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
   react-spinners:
     specifier: ^0.13.8
     version: 0.13.8(react-dom@18.2.0)(react@18.2.0)
@@ -9609,6 +9612,18 @@ packages:
       murmurhash-js: 1.0.0
     dev: false
 
+  /react-select-search@4.1.6(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-BJMf11Ux0hqn6Z3BqRwceXdwjdF+dnpDsYGGehDPB/nZv+Dse7wdPUMqLSCVDyrH5y3xFu7r6IlZ6dj78291vA==}
+    peerDependencies:
+      prop-types: ^15.8.1
+      react: ^18.0.1 || ^17.0.1
+      react-dom: ^18.0.1 || ^17.0.1
+    dependencies:
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /react-spinners@0.13.8(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==}
     peerDependencies:
@@ -11653,8 +11668,8 @@ packages:
       - debug
     dev: false
 
-  github.com/Puyodead1/fosscord.ts/92ee52d40614f5322b456004388640cd52f656f5:
+  github.com/Puyodead1/fosscord.ts/9bcd1a22fa6fe63b3abc922b4365e0c85e4fba8d:
-    resolution: {tarball: https://codeload.github.com/Puyodead1/fosscord.ts/tar.gz/92ee52d40614f5322b456004388640cd52f656f5}
+    resolution: {tarball: https://codeload.github.com/Puyodead1/fosscord.ts/tar.gz/9bcd1a22fa6fe63b3abc922b4365e0c85e4fba8d}
     name: '@puyodead1/fosscord-ts'
     version: 0.0.1
     prepare: true

src/components/DOBInput.css

@@ -0,0 +1,106 @@
+.select-search-container {
+  position: relative;
+  color: var(--text-muted);
+  z-index: 1;
+}
+
+.select-search-input {
+  position: relative;
+  display: block;
+  padding: 10px;
+  background: var(--secondary);
+  border: none;
+  color: var(--text-muted);
+  outline: none;
+  font-size: 16px;
+  text-align: left;
+  border-radius: 12px;
+}
+
+.select-search-is-multiple .select-search-input {
+  margin-bottom: -2px;
+}
+
+.select-search-is-multiple .select-search-input {
+  border-radius: 3px 3px 0 0;
+}
+
+.select-search-input[readonly] {
+  cursor: pointer;
+}
+
+.select-search-is-disabled .select-search-input {
+  cursor: not-allowed;
+}
+
+.select-search-select {
+  border: none;
+  overflow: auto;
+  max-height: 230px;
+  position: relative;
+  bottom: 4vh;
+}
+
+.select-search-container:not(.select-search-is-multiple) .select-search-select {
+  position: absolute;
+  right: 0;
+  left: 0;
+  border-radius: 3px;
+  display: none;
+}
+
+.select-search-container:not(.select-search-is-multiple).select-search-has-focus
+  .select-search-select {
+  display: block;
+}
+
+/* .select-search-has-focus .select-search-select {
+  border-color: var(--text);
+} */
+
+.select-search-options {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.select-search-option,
+.select-search-not-found {
+  display: block;
+  height: 42px;
+  width: 100%;
+  padding: 0 16px;
+  background: var(--primary);
+  border: none;
+  outline: none;
+  color: var(--text-muted);
+  font-size: 16px;
+  text-align: left;
+  cursor: pointer;
+  margin: 0;
+}
+
+.select-search-option:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: transparent !important;
+}
+
+.select-search-is-highlighted,
+.select-search-option:not(.select-search-is-selected):hover {
+  background: hsl(20, 4%, 20%);
+}
+
+.select-search-is-selected {
+  font-weight: bold;
+  color: var(--text);
+  background-color: hsl(20, 4%, 25%);
+}
+
+.select-search-row:not(:first-child) .select-search-group-header {
+  margin-top: 10px;
+}
+
+.select-search-row:not(:last-child) .select-search-group-header {
+  margin-bottom: 10px;
+}

src/components/DOBInput.tsx

@@ -0,0 +1,84 @@
+import SelectSearch from "react-select-search";
+import styled from "styled-components";
+import "./DOBInput.css";
+
+const Container = styled.div`
+  display: flex;
+`;
+
+const Input = styled.input<{ error?: boolean }>`
+  outline: none;
+  background: var(--secondary);
+  padding: 10px;
+  font-size: 16px;
+  border-radius: 12px;
+  color: var(--text);
+  margin: 0 0 0 5px;
+  border: none;
+  aria-invalid: ${(props) => (props.error ? "true" : "false")};
+  box-sizing: border-box;
+  width: 100%;
+`;
+
+const MONTHS = [
+  {
+    value: "january",
+    name: "January",
+  },
+  {
+    value: "february",
+    name: "February",
+  },
+  {
+    value: "march",
+    name: "March",
+  },
+  {
+    value: "april",
+    name: "April",
+  },
+  {
+    value: "may",
+    name: "May",
+  },
+  {
+    value: "june",
+    name: "June",
+  },
+  {
+    value: "july",
+    name: "July",
+  },
+  {
+    value: "august",
+    name: "August",
+  },
+  {
+    value: "september",
+    name: "September",
+  },
+  {
+    value: "october",
+    name: "October",
+  },
+  {
+    value: "november",
+    name: "November",
+  },
+  {
+    value: "december",
+    name: "December",
+  },
+];
+
+function DOBInput() {
+  return (
+    <Container>
+      <SelectSearch placeholder="Month" search options={MONTHS} />
+      <Input />
+      <Input />
+    </Container>
+  );
+}
+
+export default DOBInput;

src/pages/RegistrationPage.tsx

@@ -1,8 +1,10 @@
+import { APIError, CaptchaError } from "@puyodead1/fosscord-ts";
 import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 import Button from "../components/Button";
 import Container from "../components/Container";
+import DOBInput from "../components/DOBInput";
 import { useAppStore } from "../stores/AppStore";
 
 const Wrapper = styled(Container)`
@@ -90,15 +92,16 @@ const Input = styled.input<{ error?: boolean }>`
   background: var(--secondary);
   padding: 10px;
   font-size: 16px;
-  flex: 1;
   border-radius: 12px;
   color: var(--text);
   margin: 0;
   border: none;
   aria-invalid: ${(props) => (props.error ? "true" : "false")};
+  box-sizing: border-box;
+  width: 100%;
 `;
+
 const LoginButton = styled(Button)`
-  margin-top: 20px;
   margin-bottom: 8px;
   width: 100%;
   min-width: 130px;
@@ -147,24 +150,26 @@ function RegistrationPage() {
   } = useForm<RegisterFormValues>();
 
   const onSubmit = handleSubmit((data) => {
-    // TODO:
+    app.api
-    // app.api.login(data).catch((e) => {
+      .register({
-    //   if (e instanceof MFAError) {
+        ...data,
-    //     console.log("MFA Required", e);
+        consent: true,
-    //   } else if (e instanceof CaptchaError) {
+      })
-    //     console.log("Captcha Required", e);
+      .catch((e) => {
-    //   } else if (e instanceof APIError) {
+        if (e instanceof CaptchaError) {
-    //     console.log("APIError", e.message, e.code, e.fieldErrors);
+          console.log("Captcha Required", e);
-    //     e.fieldErrors.forEach((fieldError) => {
+        } else if (e instanceof APIError) {
-    //       setError(fieldError.field as any, {
+          console.log("APIError", e.message, e.code, e.fieldErrors);
-    //         type: "manual",
+          e.fieldErrors.forEach((fieldError) => {
-    //         message: fieldError.error,
+            setError(fieldError.field as any, {
-    //       });
+              type: "manual",
-    //     });
+              message: fieldError.error,
-    //   } else {
+            });
-    //     console.log("General Error", e);
+          });
-    //   }
+        } else {
-    // });
+          console.log("General Error", e);
+        }
+      });
   });
 
   return (
@@ -239,8 +244,26 @@ function RegistrationPage() {
             </InputWrapper>
           </InputContainer>
 
+          <InputContainer marginBottom={true}>
+            <LabelWrapper error={!!errors.date_of_birth}>
+              <InputLabel>Date of Birth</InputLabel>
+              {errors.date_of_birth && (
+                <InputErrorText>
+                  <>
+                    <Divider>-</Divider>
+                    {errors.date_of_birth.message}
+                  </>
+                </InputErrorText>
+              )}
+            </LabelWrapper>
+
+            <InputWrapper>
+              <DOBInput />
+            </InputWrapper>
+          </InputContainer>
+
           <LoginButton variant="primary" type="submit">
-            Log In
+            Create Account
           </LoginButton>
 
           <LoginLink