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:
parent
0011ecf701
commit
28784bec9e
@ -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;
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user