1
0
mirror of https://github.com/spacebarchat/client.git synced 2024-11-24 11:22:29 +01:00

finish registration page

This commit is contained in:
Puyodead1 2023-04-07 11:48:26 -04:00
parent 0011ecf701
commit 28784bec9e
No known key found for this signature in database
GPG Key ID: A4FA4FEC0DD353FC
2 changed files with 160 additions and 83 deletions

View File

@ -1,4 +1,4 @@
import React from "react"; import React, { Component } from "react";
import SelectSearch from "react-select-search"; import SelectSearch from "react-select-search";
import styled from "styled-components"; import styled from "styled-components";
import "./DOBInput.css"; import "./DOBInput.css";
@ -28,135 +28,189 @@ const Input = styled.input<{ error?: boolean }>`
const MONTHS = [ const MONTHS = [
{ {
value: "january", value: "01",
name: "January", name: "January",
}, },
{ {
value: "february", value: "02",
name: "February", name: "February",
}, },
{ {
value: "march", value: "03",
name: "March", name: "March",
}, },
{ {
value: "april", value: "04",
name: "April", name: "April",
}, },
{ {
value: "may", value: "05",
name: "May", name: "May",
}, },
{ {
value: "june", value: "06",
name: "June", name: "June",
}, },
{ {
value: "july", value: "07",
name: "July", name: "July",
}, },
{ {
value: "august", value: "08",
name: "August", name: "August",
}, },
{ {
value: "september", value: "09",
name: "September", name: "September",
}, },
{ {
value: "october", value: "10",
name: "October", name: "October",
}, },
{ {
value: "november", value: "11",
name: "November", name: "November",
}, },
{ {
value: "december", value: "12",
name: "December", name: "December",
}, },
]; ];
function DOBInput() { export class DOBInput extends Component<
const [month, setMonth] = React.useState<string>(); {
const [day, setDay] = React.useState(""); onChange: (value: string) => void;
const [year, setYear] = React.useState(""); onErrorChange: (errors: {
const [errors, setErrors] = React.useState<{ month?: string;
day?: string;
year?: string;
}) => void;
error: boolean;
},
{
month?: string; month?: string;
day?: string; day?: string;
year?: string; year?: string;
}>({ errors: { month?: string; day?: string; year?: string };
month: undefined, }
day: undefined, > {
year: undefined, state = {
}); month: "",
day: "",
year: "",
errors: {
month: undefined,
day: undefined,
year: undefined,
},
};
const onInputChange = componentDidUpdate(prevProps: any, prevState: any) {
if (prevState !== this.state) {
this.props.onErrorChange(this.state.errors);
this.props.onChange(
this.constructDate({
month: this.state.month,
day: this.state.day,
year: this.state.year,
})
);
}
}
onInputChange =
(type: string) => (e: React.ChangeEvent<HTMLInputElement>) => { (type: string) => (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value; const value = e.target.value;
// clear error for field // clear error for field
setErrors({ ...errors, [type]: undefined }); this.setState(
{
...this.state,
errors: { ...this.state.errors, [type]: undefined },
},
() => {
// ensure only numbers
if (isNaN(Number(value))) {
this.setState({
...this.state,
errors: { ...this.state.errors, [type]: "Invalid Date" },
});
return;
}
// ensure only numbers if (type === "day") {
if (isNaN(Number(value))) { // day should be a number between 1-31 and not more than 2 digits
setErrors({ ...errors, [type]: "Invalid input" }); if (
return; value !== "" &&
} (value.length > 2 || Number(value) > 31 || Number(value) < 1)
) {
this.setState({
...this.state,
day: value,
errors: { ...this.state.errors, [type]: "Invalid Date" },
});
return;
}
if (type === "day") { this.setState({ ...this.state, day: value });
// day should be a number between 1-31 and not more than 2 digits }
if (
value !== "" && if (type === "year") {
(value.length > 2 || Number(value) > 31 || Number(value) < 1) // year must be between now-min and now-max
) { if (
setErrors({ ...errors, day: "Invalid day" }); value.length === 4 &&
// return; (Number(value) > new Date().getFullYear() - MIN_AGE ||
Number(value) < new Date().getFullYear() - MAX_AGE)
) {
this.setState({
...this.state,
year: value,
errors: { ...this.state.errors, [type]: "Invalid Date" },
});
return;
}
this.setState({ ...this.state, year: value });
}
} }
);
setDay(value);
}
if (type === "year") {
// year must be between now-min and now-max
if (
value.length === 4 &&
(Number(value) > new Date().getFullYear() - MIN_AGE ||
Number(value) < new Date().getFullYear() - MAX_AGE)
) {
setErrors({ ...errors, year: "Invalid year" });
// return;
}
setYear(value);
}
}; };
return ( constructDate = (values: { month: string; day: string; year: string }) => {
<Container> const { month, day, year } = values;
<SelectSearch // pad day with 0 if needed
placeholder="Month" const dayPadded = day?.length === 1 ? `0${day}` : day;
search return `${year}-${month}-${dayPadded}`;
options={MONTHS} };
onChange={(e) => setMonth(e as string)}
value={month} render() {
/> return (
<Input <Container>
placeholder="Day" <SelectSearch
onChange={onInputChange("day")} placeholder="Month"
value={day} search
error={!!errors.day} options={MONTHS}
maxLength={2} onChange={(e) => this.setState({ ...this.state, month: e as string })}
/> value={this.state.month}
<Input />
placeholder="Year" <Input
onChange={onInputChange("year")} placeholder="Day"
value={year} onChange={this.onInputChange("day")}
error={!!errors.year} value={this.state.day}
maxLength={4} error={this.state.errors.day || this.props.error}
/> maxLength={2}
</Container> />
); <Input
placeholder="Year"
onChange={this.onInputChange("year")}
value={this.state.year}
error={this.state.errors.year || this.props.error}
maxLength={4}
/>
</Container>
);
}
} }
export default DOBInput; export default DOBInput;

View File

@ -144,11 +144,17 @@ function RegistrationPage() {
const { const {
register, register,
handleSubmit, handleSubmit,
watch, setValue,
formState: { errors }, formState: { errors },
setError, setError,
clearErrors,
} = useForm<RegisterFormValues>(); } = useForm<RegisterFormValues>();
const dobRegister = register("date_of_birth", {
required: true,
pattern: /^\d{4}-\d{2}-\d{2}$/,
});
const onSubmit = handleSubmit((data) => { const onSubmit = handleSubmit((data) => {
app.api app.api
.register({ .register({
@ -172,6 +178,10 @@ function RegistrationPage() {
}); });
}); });
const hasErrors = () => {
return Object.values(errors).some((error) => error);
};
return ( return (
<Wrapper> <Wrapper>
<LoginBox> <LoginBox>
@ -258,11 +268,24 @@ function RegistrationPage() {
</LabelWrapper> </LabelWrapper>
<InputWrapper> <InputWrapper>
<DOBInput /> <DOBInput
onChange={(value) => setValue("date_of_birth", value)}
onErrorChange={(errors) => {
const hasError = Object.values(errors).some((error) => error);
if (hasError) {
// set to first error
setError("date_of_birth", {
type: "manual",
message: Object.values(errors).filter((x) => x)[0],
});
} else clearErrors("date_of_birth");
}}
error={!!errors.date_of_birth}
/>
</InputWrapper> </InputWrapper>
</InputContainer> </InputContainer>
<LoginButton variant="primary" type="submit"> <LoginButton variant="primary" type="submit" disabled={hasErrors()}>
Create Account Create Account
</LoginButton> </LoginButton>