DONE: add customer pages, implement auth on teller page
This commit is contained in:
ISMAIL MASSERAN
@@ -0,0 +1,67 @@
|
||||
#teller-login-form {
|
||||
width: 420px;
|
||||
max-width: 100%;
|
||||
margin: 80px auto 40px;
|
||||
background-color: #334257;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
#teller-login-form h1 {
|
||||
margin: 0;
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#teller-login-form form {
|
||||
padding: 20px;
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#teller-login-form .form-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
#teller-login-form label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
#teller-login-form input {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid #d0d0d0;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#teller-login-form button {
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
padding: 12px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: #548ca8;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#teller-login-form button:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#teller-login-form .error {
|
||||
margin: 0 0 12px;
|
||||
color: #b00020;
|
||||
font-size: 14px;
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
import { useContext, useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { ROLES, SERVER_URL } from '../../constants.js';
|
||||
import { fetchData } from '../../fetching/Fetch.js';
|
||||
import { UserContext } from '../../context/UserContext.jsx';
|
||||
import { clearSession, getToken, setSession } from '../../utils/session.js';
|
||||
import './LoginPage.css';
|
||||
|
||||
const TELLER_ROLES = [
|
||||
ROLES.ROLE_USER,
|
||||
ROLES.ROLE_SUPER_ADMIN,
|
||||
ROLES.ROLE_BRANCH_ADMIN,
|
||||
];
|
||||
|
||||
function canAccessTellerApp(userData) {
|
||||
const roles = Array.isArray(userData?.roles) ? userData.roles : [];
|
||||
return roles.some((role) => TELLER_ROLES.includes(role));
|
||||
}
|
||||
|
||||
export default function LoginPage() {
|
||||
const navigate = useNavigate();
|
||||
const { user, setUser } = useContext(UserContext);
|
||||
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (user && getToken()) {
|
||||
navigate('/', { replace: true });
|
||||
}
|
||||
}, [user, navigate]);
|
||||
|
||||
async function handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
|
||||
if (!email.trim()) {
|
||||
setError('Email is required.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!password.trim()) {
|
||||
setError('Password is required.');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
const { data, success } = await fetchData(`${SERVER_URL}/api/v1/auth/login`, 'POST', {
|
||||
email: email.trim(),
|
||||
password: password.trim(),
|
||||
});
|
||||
|
||||
if (!success || !data) {
|
||||
setError('Your credentials are incorrect.');
|
||||
return;
|
||||
}
|
||||
|
||||
const userData = data.userData ?? data;
|
||||
const token = data.token;
|
||||
|
||||
if (!canAccessTellerApp(userData)) {
|
||||
clearSession();
|
||||
setUser(null);
|
||||
setError('This account cannot access the teller app.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!token) {
|
||||
setError('Two-factor login is not supported in the teller app yet. Disable 2FA for this account or use an account without 2FA.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!userData?.tenantCode) {
|
||||
setError('Login succeeded but tenant information is missing.');
|
||||
return;
|
||||
}
|
||||
|
||||
setSession({ userData, token });
|
||||
setUser(userData);
|
||||
navigate('/', { replace: true });
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setError('An error occurred. Please try again.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div id="teller-login-form">
|
||||
<h1>Teller Login</h1>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="form-group">
|
||||
<label htmlFor="email">Email</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
value={email}
|
||||
autoComplete="username"
|
||||
onChange={(event) => {
|
||||
setEmail(event.target.value);
|
||||
setError('');
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="password">Password</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
autoComplete="current-password"
|
||||
onChange={(event) => {
|
||||
setPassword(event.target.value);
|
||||
setError('');
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{error ? <p className="error">{error}</p> : null}
|
||||
<button type="submit" disabled={loading}>
|
||||
{loading ? 'Signing in…' : 'Sign in'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,73 +1,148 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Dropdown, Button } from 'react-bootstrap';
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import { Dropdown } from 'react-bootstrap';
|
||||
import { fetchData } from '../../fetching/Fetch.js';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import { SERVER_URL } from '../../constants.js';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { UserContext } from '../../context/UserContext.jsx';
|
||||
|
||||
const StationIntroPage = () => {
|
||||
const navigate = useNavigate();
|
||||
const { user } = useContext(UserContext);
|
||||
|
||||
const [branches, setBranches] = useState([]);
|
||||
const [selectedBranch, setSelectedBranch] = useState(null);
|
||||
const [stations, setStations] = useState([]);
|
||||
const [selectedStation, setSelectedStation] = useState(null);
|
||||
const [error, setError] = useState('');
|
||||
const [loadingBranches, setLoadingBranches] = useState(false);
|
||||
const [loadingStations, setLoadingStations] = useState(false);
|
||||
|
||||
const url = `${ SERVER_URL }/api/v1/`;
|
||||
const tenantCode = user?.tenantCode;
|
||||
const url = `${SERVER_URL}/api/v1/`;
|
||||
|
||||
useEffect(() => {
|
||||
fetchData(`${ url }branches/DFLT`, 'GET')
|
||||
.then(response => response.data)
|
||||
.then(setBranches)
|
||||
.catch(console.error)
|
||||
}, []);
|
||||
if (!tenantCode) {
|
||||
setBranches([]);
|
||||
setError('Missing tenant on your account.');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoadingBranches(true);
|
||||
setError('');
|
||||
fetchData(`${url}branches/${encodeURIComponent(tenantCode)}`, 'GET')
|
||||
.then(({ data, success }) => {
|
||||
if (!success) {
|
||||
setBranches([]);
|
||||
setError('Could not load branches for your tenant.');
|
||||
return;
|
||||
}
|
||||
setBranches(Array.isArray(data) ? data : []);
|
||||
if (!data?.length) {
|
||||
setError(`No branches found for tenant ${tenantCode}.`);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
setError('Could not load branches.');
|
||||
})
|
||||
.finally(() => setLoadingBranches(false));
|
||||
}, [tenantCode]);
|
||||
|
||||
function handleBranchSelect(branch) {
|
||||
setSelectedBranch(branch)
|
||||
fetchData(`${ url }stations/DFLT/${ branch.id }`, 'GET')
|
||||
.then(response => response.data)
|
||||
.then(setStations)
|
||||
.catch(console.error)
|
||||
setSelectedBranch(branch);
|
||||
setSelectedStation(null);
|
||||
setStations([]);
|
||||
setLoadingStations(true);
|
||||
setError('');
|
||||
|
||||
fetchData(`${url}stations/${encodeURIComponent(tenantCode)}/${branch.id}`, 'GET')
|
||||
.then(({ data, success }) => {
|
||||
if (!success) {
|
||||
setStations([]);
|
||||
setError('Could not load stations for this branch.');
|
||||
return;
|
||||
}
|
||||
setStations(Array.isArray(data) ? data : []);
|
||||
if (!data?.length) {
|
||||
setError('No stations found for this branch.');
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
setError('Could not load stations.');
|
||||
})
|
||||
.finally(() => setLoadingStations(false));
|
||||
}
|
||||
|
||||
function handleStationSelect(station) {
|
||||
navigate(`/teller-queue/${ station.id }`)
|
||||
setSelectedStation(station);
|
||||
navigate(`/teller-queue/${station.id}`);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="text-center mt-5">
|
||||
<div className="border p-3" style={{ maxWidth: '500px', margin: '0 auto' }}>
|
||||
<h1 className="mb-4">Select Branch and Station</h1>
|
||||
<h1 className="mb-2">Select Branch and Station</h1>
|
||||
{tenantCode ? (
|
||||
<p className="text-muted mb-4">Tenant: {tenantCode}</p>
|
||||
) : null}
|
||||
|
||||
{error ? <p className="text-danger">{error}</p> : null}
|
||||
|
||||
<Dropdown>
|
||||
<Dropdown.Toggle variant="primary" id="dropdown-branch" style={{ width: '100%' }}>
|
||||
{selectedBranch ? selectedBranch.name : 'Select Branch'}
|
||||
<Dropdown.Toggle
|
||||
variant="primary"
|
||||
id="dropdown-branch"
|
||||
style={{ width: '100%' }}
|
||||
disabled={loadingBranches || branches.length === 0}
|
||||
>
|
||||
{loadingBranches
|
||||
? 'Loading branches…'
|
||||
: selectedBranch
|
||||
? selectedBranch.name
|
||||
: 'Select Branch'}
|
||||
</Dropdown.Toggle>
|
||||
<Dropdown.Menu style={{ width: '100%' }}>
|
||||
{branches.map(branch => (
|
||||
<Dropdown.Item key={branch.id} onClick={() => handleBranchSelect(branch)}>
|
||||
{branches.map((branch) => (
|
||||
<Dropdown.Item
|
||||
key={branch.id}
|
||||
onClick={() => handleBranchSelect(branch)}
|
||||
>
|
||||
{branch.name}
|
||||
</Dropdown.Item>
|
||||
))}
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
|
||||
{selectedBranch && (
|
||||
{selectedBranch ? (
|
||||
<div className="mt-3">
|
||||
<Dropdown>
|
||||
<Dropdown.Toggle variant="primary" id="dropdown-station" style={{ width: '100%' }}>
|
||||
{selectedStation ? selectedStation.name : 'Select Station'}
|
||||
<Dropdown.Toggle
|
||||
variant="primary"
|
||||
id="dropdown-station"
|
||||
style={{ width: '100%' }}
|
||||
disabled={loadingStations || stations.length === 0}
|
||||
>
|
||||
{loadingStations
|
||||
? 'Loading stations…'
|
||||
: selectedStation
|
||||
? selectedStation.name
|
||||
: 'Select Station'}
|
||||
</Dropdown.Toggle>
|
||||
<Dropdown.Menu style={{ width: '100%' }}>
|
||||
{stations.map(station => (
|
||||
<Dropdown.Item key={station.id} onClick={() => handleStationSelect(station)}>
|
||||
{stations.map((station) => (
|
||||
<Dropdown.Item
|
||||
key={station.id}
|
||||
onClick={() => handleStationSelect(station)}
|
||||
>
|
||||
{station.name}
|
||||
</Dropdown.Item>
|
||||
))}
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
)}
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user