mirror of
https://github.com/rjNemo/MERN_sample_app
synced 2026-06-12 03:26:40 +00:00
enables SignUp with email
This commit is contained in:
parent
6f11a3e2c0
commit
52f03d6027
3 changed files with 30 additions and 3 deletions
1
TODO.md
1
TODO.md
|
|
@ -3,5 +3,6 @@
|
||||||
- [ ] Doc
|
- [ ] Doc
|
||||||
- [ ] Tests
|
- [ ] Tests
|
||||||
- [ ] PropTypes
|
- [ ] PropTypes
|
||||||
|
- [ ] Material UI
|
||||||
- [ ] AuthSlice
|
- [ ] AuthSlice
|
||||||
- [ ] Redux thunk for validation
|
- [ ] Redux thunk for validation
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { Link } from "react-router-dom";
|
import { Link, withRouter } from "react-router-dom";
|
||||||
import { Button, Form, FormGroup, Label, Input, Container } from "reactstrap";
|
import { Button, Form, FormGroup, Label, Input, Container } from "reactstrap";
|
||||||
import * as ROUTES from "../../constants/routes";
|
import * as ROUTES from "../../constants/routes";
|
||||||
import { useFirebase } from "../../services/auth";
|
import { useFirebase } from "../../services/auth";
|
||||||
|
|
@ -18,6 +18,9 @@ const useStyles = () => ({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Page's layout
|
||||||
|
*/
|
||||||
export default function SignUpPage() {
|
export default function SignUpPage() {
|
||||||
const styles = useStyles();
|
const styles = useStyles();
|
||||||
return (
|
return (
|
||||||
|
|
@ -28,7 +31,10 @@ export default function SignUpPage() {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export const SignUpForm = () => {
|
/**
|
||||||
|
* Holds the form state and validates the form.
|
||||||
|
*/
|
||||||
|
const SignUpFormBase = (props) => {
|
||||||
const [userName, setUserName] = useState("");
|
const [userName, setUserName] = useState("");
|
||||||
const [email, setEmail] = useState("");
|
const [email, setEmail] = useState("");
|
||||||
const [password1, setPassword1] = useState("");
|
const [password1, setPassword1] = useState("");
|
||||||
|
|
@ -37,9 +43,23 @@ export const SignUpForm = () => {
|
||||||
|
|
||||||
const auth = useFirebase();
|
const auth = useFirebase();
|
||||||
|
|
||||||
|
const cleanFields = () => {
|
||||||
|
setUserName("");
|
||||||
|
setEmail("");
|
||||||
|
setPassword1("");
|
||||||
|
setPassword2("");
|
||||||
|
setError(null);
|
||||||
|
};
|
||||||
|
|
||||||
const handleSubmit = (e) => {
|
const handleSubmit = (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
auth.signInWithGoogle().then((res) => console.log(res.user));
|
auth
|
||||||
|
.createUserWithEmailAndPassword(email, password1)
|
||||||
|
.then(() => {
|
||||||
|
cleanFields();
|
||||||
|
props.history.push(ROUTES.APP);
|
||||||
|
})
|
||||||
|
.catch((err) => setError(err));
|
||||||
};
|
};
|
||||||
|
|
||||||
const isInvalid =
|
const isInvalid =
|
||||||
|
|
@ -99,6 +119,11 @@ const InputField = ({ id, label, set, type = "text" }) => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sign Up form final component. withRouter allows redirections.
|
||||||
|
*/
|
||||||
|
export const SignUpForm = withRouter(SignUpFormBase);
|
||||||
|
|
||||||
export const SignUpLink = () => (
|
export const SignUpLink = () => (
|
||||||
<p>
|
<p>
|
||||||
Don't have an account yet? <Link to={ROUTES.SIGN_UP}>Sign Up</Link>
|
Don't have an account yet? <Link to={ROUTES.SIGN_UP}>Sign Up</Link>
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,7 @@ export default class Firebase {
|
||||||
}
|
}
|
||||||
|
|
||||||
provider = new app.auth.GoogleAuthProvider();
|
provider = new app.auth.GoogleAuthProvider();
|
||||||
|
|
||||||
signInWithGoogle = () => this.auth.signInWithPopup(this.provider);
|
signInWithGoogle = () => this.auth.signInWithPopup(this.provider);
|
||||||
|
|
||||||
createUserWithEmailAndPassword = (email, password) =>
|
createUserWithEmailAndPassword = (email, password) =>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue