add validation for username and email on signup
This commit is contained in:
parent
5fbfc28024
commit
3b868cec4e
3 changed files with 51 additions and 27 deletions
|
@ -8,30 +8,73 @@ const Signup = (props) => {
|
||||||
const [ email, setEmail ] = useState('');
|
const [ email, setEmail ] = useState('');
|
||||||
const [ password, setPassword ] = useState('');
|
const [ password, setPassword ] = useState('');
|
||||||
const [ confirmPassword, setConfirmPassword ] = useState('');
|
const [ confirmPassword, setConfirmPassword ] = useState('');
|
||||||
|
const minimumPasswordLength = 8;
|
||||||
|
const errorDispatchAction = {
|
||||||
|
type: 'ERR',
|
||||||
|
message: 'AUTH_ERROR'
|
||||||
|
}
|
||||||
|
|
||||||
const handleSubmit = async e => {
|
const validateSignupForm = (next) => {
|
||||||
e.preventDefault();
|
|
||||||
if (password !== confirmPassword) {
|
if (password !== confirmPassword) {
|
||||||
return props.dispatch({
|
return props.dispatch({
|
||||||
type: 'ERR',
|
...errorDispatchAction,
|
||||||
message: 'AUTH_ERROR',
|
|
||||||
body: { authError: 'Password fields must be the same'}
|
body: { authError: 'Password fields must be the same'}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (password.length < 8) {
|
||||||
|
return props.dispatch({
|
||||||
|
...errorDispatchAction,
|
||||||
|
body: { authError: 'Password must be at least 8 characters'}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
||||||
|
return props.dispatch({
|
||||||
|
...errorDispatchAction,
|
||||||
|
body: { authError: 'Please enter a valid email'}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!/^[\w\d_.-]+$/.test(username)) {
|
||||||
|
return props.dispatch({
|
||||||
|
...errorDispatchAction,
|
||||||
|
body: { authError: "Username can only contain letters, numbers, '_', '.', or '-'"}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return next();
|
||||||
|
}
|
||||||
|
|
||||||
|
const postSignupForm = async () => {
|
||||||
const signupResponse = await authServices.signupService({
|
const signupResponse = await authServices.signupService({
|
||||||
username,
|
username,
|
||||||
email,
|
email,
|
||||||
password,
|
password,
|
||||||
confirmPassword
|
confirmPassword
|
||||||
})
|
})
|
||||||
|
const parsedResponse = JSON.parse(signupResponse)
|
||||||
|
|
||||||
|
if (parsedResponse.errors) {
|
||||||
|
const authError = parsedResponse.errors[0].auth
|
||||||
|
return props.dispatch({
|
||||||
|
...errorDispatchAction,
|
||||||
|
body: { authError }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
return props.dispatch({
|
return props.dispatch({
|
||||||
type: 'AUTH',
|
type: 'AUTH',
|
||||||
message: 'SIGNUP',
|
message: 'SIGNUP',
|
||||||
body: signupResponse
|
body: parsedResponse
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleSubmit = async e => {
|
||||||
|
e.preventDefault();
|
||||||
|
validateSignupForm(postSignupForm);
|
||||||
|
}
|
||||||
|
|
||||||
const formError = errors => {
|
const formError = errors => {
|
||||||
if(!errors) return <></>;
|
if(!errors) return <></>;
|
||||||
|
|
||||||
|
|
|
@ -25,25 +25,6 @@ function loginReducer(state: state, action: action): state {
|
||||||
}
|
}
|
||||||
|
|
||||||
function signupReducer(state: state, action: action): state {
|
function signupReducer(state: state, action: action): state {
|
||||||
const signupResponse = action.body;
|
const newUser = action.body;
|
||||||
let error;
|
return {...state, user: newUser };
|
||||||
|
|
||||||
if (signupResponse.response) {
|
|
||||||
error = signupResponse.response.data.errors;
|
|
||||||
}
|
|
||||||
let responseUser;
|
|
||||||
if (signupResponse.data) {
|
|
||||||
responseUser = {...signupResponse.data}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
const errors = error.reduce((errorObject, error) => errorObject[Object.keys(error)[0] = error])
|
|
||||||
return {...state, errors };
|
|
||||||
}
|
|
||||||
|
|
||||||
if (responseUser) {
|
|
||||||
return {...state, user: responseUser };
|
|
||||||
}
|
|
||||||
|
|
||||||
return {...state, errors: {requestError: 'something went wrong'}};
|
|
||||||
}
|
}
|
|
@ -21,7 +21,7 @@ const signupService = async (formData) => {
|
||||||
headers: headers
|
headers: headers
|
||||||
})
|
})
|
||||||
.then(res => {
|
.then(res => {
|
||||||
return res;
|
return res.text();
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
return err;
|
return err;
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue