diff --git a/package.json b/package.json index 29d483e..ba42ca9 100644 --- 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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0ec8838..9801958 100644 --- 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 diff --git a/src/components/DOBInput.css b/src/components/DOBInput.css new file mode 100644 index 0000000..5f1582c --- /dev/null +++ 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; +} diff --git a/src/components/DOBInput.tsx b/src/components/DOBInput.tsx new file mode 100644 index 0000000..40c8b08 --- /dev/null +++ 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 ( + + + + + + ); +} + +export default DOBInput; diff --git a/src/pages/RegistrationPage.tsx b/src/pages/RegistrationPage.tsx index dd1d892..19d62e4 100644 --- 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(); 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() { + + + Date of Birth + {errors.date_of_birth && ( + + <> + - + {errors.date_of_birth.message} + + + )} + + + + + + + - Log In + Create Account