start work on registration dob input

2024-11-22 02:12:38 +01:00 · 2023-04-05 18:12:50 -04:00 · 2023-04-05 18:12:50 -04:00 · 7933c4a9b5
commit 7933c4a9b5
parent 5606f8e075
5 changed files with 253 additions and 24 deletions
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/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:
-    resolution: {tarball: https://codeload.github.com/Puyodead1/fosscord.ts/tar.gz/92ee52d40614f5322b456004388640cd52f656f5}
+  github.com/Puyodead1/fosscord.ts/9bcd1a22fa6fe63b3abc922b4365e0c85e4fba8d:
+    resolution: {tarball: https://codeload.github.com/Puyodead1/fosscord.ts/tar.gz/9bcd1a22fa6fe63b3abc922b4365e0c85e4fba8d}
    name: '@puyodead1/fosscord-ts'
    version: 0.0.1
    prepare: true
--- a/src/components/DOBInput.css
+++ b/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;
+}
--- a/src/components/DOBInput.tsx
+++ b/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;
--- a/src/pages/RegistrationPage.tsx
+++ b/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.login(data).catch((e) => {
-    //   if (e instanceof MFAError) {
-    //     console.log("MFA Required", e);
-    //   } else if (e instanceof CaptchaError) {
-    //     console.log("Captcha Required", e);
-    //   } else if (e instanceof APIError) {
-    //     console.log("APIError", e.message, e.code, e.fieldErrors);
-    //     e.fieldErrors.forEach((fieldError) => {
-    //       setError(fieldError.field as any, {
-    //         type: "manual",
-    //         message: fieldError.error,
-    //       });
-    //     });
-    //   } else {
-    //     console.log("General Error", e);
-    //   }
-    // });
+    app.api
+      .register({
+        ...data,
+        consent: true,
+      })
+      .catch((e) => {
+        if (e instanceof CaptchaError) {
+          console.log("Captcha Required", e);
+        } else if (e instanceof APIError) {
+          console.log("APIError", e.message, e.code, e.fieldErrors);
+          e.fieldErrors.forEach((fieldError) => {
+            setError(fieldError.field as any, {
+              type: "manual",
+              message: fieldError.error,
+            });
+          });
+        } 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