Untitled
unknown
javascript
3 years ago
2.4 kB
15
Indexable
import React from 'react' import '../sign-in-form/sign-in-form.styles.scss' import Button from '../button/button.component' import FormInput from '../form-input/form-input.component' import { useState } from 'react' import { signInAuthUserInWithEmailAndPassword } from '../../utils/firebase/firebase.utils' import { signInWithGooglePopup } from '../../utils/firebase/firebase.utils' function SignInForm() { const signInWithGoogle = async () => { const { user } = await signInWithGooglePopup() alert('Welcome ' + user.displayName) } const defaultFormFields = { email: '', password: '', } const resetFormFields = () => setformFields(defaultFormFields) const [formFields, setformFields] = useState(defaultFormFields) const { email, password } = formFields const handleChange = (e) => { const { name, value } = e.target setformFields({ ...formFields, [name]: value }) } const handleSubmit = async (e) => { e.preventDefault() try { const res = await signInAuthUserInWithEmailAndPassword(email, password) console.log(res.user) resetFormFields() } catch (err) { console.log(err) if (err.code === 'auth/wrong-password') { alert('Invalid password associated with email') } else if (err.code === 'auth/user-not-found') { alert('No account found associated with this email') } } } return ( <div className='sign-in-container'> <h2>Already have an account?</h2> <span>Sign in with your email and password</span> <form onSubmit={handleSubmit}> <FormInput label={'Email: '} inputOptions={{ type: 'email', required: true, name: 'email', onChange: handleChange, value: email, }} /> <FormInput label={'Password: '} inputOptions={{ type: 'password', required: true, name: 'password', onChange: handleChange, value: password, }} /> <div className='buttons-container'> <Button type='submit' onClick={handleSubmit}> Sign In </Button> <Button onClick={signInWithGoogle} buttonType='google'> Google Sign In </Button> </div> </form> </div> ) } export default SignInForm
Editor is loading...