Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/Savy011/fullstackopen-exercises. My Exercise Submissions for FullStack Open fullstackopen.com/en
Something went wrong. Try again.
2.8 kB · 88 lines
JavaScript
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889import NotifBox from './NotifBox'import { useField, removeReset } from '../utils/hooks'import { useNotification } from '../utils/NotifContext'import loginService from '../services/login'import { setToken } from '../utils/requests'import { useUserDispatch } from '../utils/UserContext'import { Card, TextField, Typography, Box, Button } from '@mui/material'
const LoginForm = () => { const username = useField('text') const password = useField('password') const setNotif = useNotification() const dispatch = useUserDispatch()
const handleLogin = async event => { event.preventDefault()
try { const loggedUser = await loginService.login({ username: username.value, password: password.value, }) window.localStorage.setItem( 'loggedBlogAppUser', JSON.stringify(loggedUser) ) dispatch({ type: 'SET_USER', payload: loggedUser }) setToken(loggedUser.token) username.reset() password.reset() } catch (err) { setNotif('Wrong Credentials', 5000)
console.error(err) } }
return ( <div> <Card sx={{ mt: 2, background: '#fffa', borderRadius: 3, border: 'solid', }} > <Typography variant="h4" sx={{ display: 'flex', justifyContent: 'center', m: 1, fontFamily: 'Spline Sans', }} > Log-in to the Application </Typography> <NotifBox /> <form onSubmit={handleLogin}> <Box sx={{ m: 2 }}> <TextField sx={{ mt: 1, mb: 1 }} fullWidth label="Username" {...removeReset(username)} /> <TextField sx={{ mt: 1, mb: 1 }} fullWidth label="Password" {...removeReset(password)} /> <Button sx={{ mt: 1, mb: 1 }} variant="contained" type="submit" > Log In </Button> </Box> </form> </Card> </div> )}
export default LoginForm