Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | import React, { useState,useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import {
CButton,
CCard,
CCardBody,
CCardGroup,
CCol,
CContainer,
CForm,
CFormInput,
CInputGroup,
CInputGroupText,
CRow,
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { cilLockLocked, cilUser } from '@coreui/icons'
import users from '../../data/users'
const Login = () => {
const [username, setUsername] = useState('')
const [password, setPassword] = useState('')
const [error, setError] = useState('')
const navigate = useNavigate()
useEffect(() => {
if (!!localStorage.getItem('user')) navigate('/')
}, [])
const handleLogin = (e) => {
e.preventDefault()
const foundUser = users.find(
(u) => u.username === username && u.password === password
)
if (foundUser) {
localStorage.setItem('user', JSON.stringify(foundUser))
navigate('/')
} else {
setError('❌ Invalid username or password')
}
}
return (
<div className="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
<CContainer>
<CRow className="justify-content-center">
<CCol md={8}>
<CCardGroup>
<CCard className="p-4">
<CCardBody>
<CForm onSubmit={handleLogin}>
<h1>Login</h1>
<p className="text-body-secondary">Log in with your account</p>
{error && (<p style={{ color: 'red', fontWeight: 'bold' }}>{error}</p>)}
<CInputGroup className="mb-3">
<CInputGroupText>
<CIcon icon={cilUser} />
</CInputGroupText>
<CFormInput
placeholder="Username"
autoComplete="username"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
</CInputGroup>
<CInputGroup className="mb-4">
<CInputGroupText>
<CIcon icon={cilLockLocked} />
</CInputGroupText>
<CFormInput
type="password"
placeholder="Password"
autoComplete="current-password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</CInputGroup>
<CRow>
<CCol xs={6}>
<CButton type="submit" color="primary" className="px-4">
Login
</CButton>
</CCol>
</CRow>
</CForm>
</CCardBody>
</CCard>
<CCard className="text-white bg-primary py-5" style={{ width: '44%' }}>
<CCardBody>
<div>
<h2 className="text-center">Welcome</h2>
<p>
Users:<br/>- admin / 123 <br/>- user / 1234
</p>
</div>
</CCardBody>
</CCard>
</CCardGroup>
</CCol>
</CRow>
</CContainer>
</div>
)
}
export default Login |