Skip to content

Commit

Permalink
Complete login process
Browse files Browse the repository at this point in the history
  • Loading branch information
BissonnetteVincent committed Mar 23, 2024
1 parent 371b5aa commit 4cdb678
Show file tree
Hide file tree
Showing 2 changed files with 118 additions and 36 deletions.
44 changes: 27 additions & 17 deletions canopeum_frontend/src/components/Navbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -93,23 +93,33 @@ const Navbar = () => {
</Link>
</li>
</ul>
<ul className='navbar-nav d-flex ms-3 gap-3 '>
<li
className={`nav-item ${
location.pathname === '/user-management'
? 'active'
: ''
}`}
>
<Link className='nav-link' to='/user-management'>
<span className='material-symbols-outlined text-light'>account_circle</span>
</Link>
</li>
<li className='nav-item'>
<button className='btn btn-link text-light' onClick={() => onLoginLogoutbuttonClick()} type='button'>
Log In
</button>
</li>
<ul className='navbar-nav ms-3 gap-3'>
{isAuthenticated && (
<li
className={`nav-item ${
location.pathname === '/user-management'
? 'active'
: ''
}`}
>
<Link className='nav-link' to='/user-management'>
<span className='material-symbols-outlined text-light'>account_circle</span>
</Link>
</li>
)}

{!isAuthenticated && (
<li>
<button
className='btn btn-link text-light'
onClick={() => onLoginLogoutbuttonClick()}
style={{ width: 100 }}
type='button'
>
Log In
</button>
</li>
)}
</ul>
</div>
</div>
Expand Down
110 changes: 91 additions & 19 deletions canopeum_frontend/src/pages/Login.tsx
Original file line number Diff line number Diff line change
@@ -1,35 +1,107 @@
import { useState } from 'react'
import { useContext, useEffect, useState } from 'react'

const Login = () => {
import { AuthenticationContext, UserRole } from '../components/context/AuthenticationContext'
import { AuthUser } from '../services/api'
import api from '../services/apiInterface'
import { useNavigate } from 'react-router-dom'

const [emailInError, setEmailInError] = useState(false)
const isLoginEntryValide = (entry: string | undefined) => entry !== undefined && entry !== ''

const Login = () => {
const [userName, setUserName] = useState('')
const [password, setPassword] = useState('')
const navigate = useNavigate()

const [userNameInError, setUserNameInError] = useState(false)
const [passwordInError, setPasswordInError] = useState(false)

return (
<div className='d-flex' style={{height: '100vh'}}>
<div style={{width: '55%'}} />
<div className='d-flex flex-column bg-white px-3 py-2'
style={{width: '45%', alignItems: 'center'}}>
const [loginError, setLoginError] = useState<string | undefined>(undefined)

const { authenticate, isAuthenticated } = useContext(AuthenticationContext)

useEffect(() => {
if (isAuthenticated) {
navigate('/')
}
}, [isAuthenticated, navigate])

<div style={{flexGrow: '0.3', display: 'flex', alignItems: 'center'}}>
<h1 style={{textAlign: 'center'}}>Log In to Your Account</h1>
const onLoginClick = () => {
if (!userName) {
setUserNameInError(true)
}

if (!password) {
setPasswordInError(true)
}

if (isLoginEntryValide(userName) && isLoginEntryValide(password)) {
api().auth.login(
new AuthUser({
username: userName,
password,
id: 1,
}),
).then(response =>
authenticate({
email: response.email ?? '',
firstname: response.firstName ?? '',
image: '',
lastname: response.lastName ?? '',
role: UserRole.MegaAdmin, // TODO (Vincent) set the user role
})
).catch(_ => {
setLoginError('Error while login')
})
}
}

return (
<div className='d-flex' style={{ height: '100vh' }}>
<div style={{ width: '55%' }} />
<div className='d-flex flex-column bg-white px-3 py-2' style={{ width: '45%', alignItems: 'center' }}>
<div style={{ flexGrow: '0.3', display: 'flex', alignItems: 'center' }}>
<h1 style={{ textAlign: 'center' }}>Log In to Your Account</h1>
</div>

<div className='d-flex flex-column' style={{width: '60%'}}>
<div style={{width: '100%', margin: '20px 0px 20px 0px'}}>
<div className='d-flex flex-column' style={{ width: '60%' }}>
<div style={{ width: '100%', margin: '20px 0px 20px 0px' }}>
<label htmlFor='exampleInputEmail1'>Email address</label>
<input aria-describedby='emailHelp' className='form-control' id='exampleInputEmail1' type='email' />
<input
aria-describedby='emailHelp'
className={`form-control ${userNameInError && !isLoginEntryValide(userName) && 'is-invalid'} `}
id='exampleInputEmail1'
onChange={event => setUserName(event.target.value)}
type='email'
/>
{userNameInError && !isLoginEntryValide(userName) && (
<span className='help-block text-danger'>
Please enter a email address
</span>
)}
</div>

<div style={{width: '100%', margin: '20px 0px 20px 0px'}}>
<div style={{ width: '100%', margin: '20px 0px 20px 0px' }}>
<label htmlFor='exampleInputPassword1'>Password</label>
<input className={`form-control ${passwordInError && 'is-invalid'} `}
id='exampleInputPassword1' type='password'
<input
className={`form-control ${passwordInError && !isLoginEntryValide(password) && 'is-invalid'} `}
id='exampleInputPassword1'
onChange={event => setPassword(event.target.value)}
type='password'
/>
{passwordInError && <span className="help-block text-danger">Please enter a password</span>}
{passwordInError && !isLoginEntryValide(password) && (
<span className='help-block text-danger'>Please enter a password</span>
)}
</div>
<button className='btn btn-primary' style={{margin: '40px 0px 10px'}} type='submit'>Log In</button>
<button className='btn btn-outline-primary' style={{margin: '10px 0px 10px'}} type='button'>Sign in</button>
{loginError && <span className='help-block text-danger'>{loginError}</span>}
<button
className='btn btn-primary'
onClick={() => onLoginClick()}
style={{ margin: '40px 0px 10px' }}
type='submit'
>
Log In
</button>
<button className='btn btn-outline-primary' style={{ margin: '10px 0px 10px' }} type='button'>Sign in</button>
</div>
</div>
</div>
Expand Down

0 comments on commit 4cdb678

Please sign in to comment.