Skip to content

C
concept-front-mojsprat-v2
Commit 7aa1175a authored by Djordje's avatar Djordje
Browse files
Options

Add logout and autofocus on forms

parent 3311ef45
Hide whitespace changes
Inline Side-by-side
Showing with 91 additions and 50 deletions
src/App.tsx
View file @ 7aa1175a
......@@ -4,16 +4,15 @@ import { BrowserRouter as Router, Navigate, Route, Routes } from 'react-router-d
import { EntryPage } from './components/entry-page/EntryPage';
import { RegisterForm } from './components/register/RegisterForm';
import { LoginForm } from './components/LoginForm';
import { Form } from './components/Form';
import { Application } from './components/Application';
function App() {
return (
<Router>
<Routes>
<Route path='register/:buildingId' element={<EntryPage children={<Form children={<RegisterForm />} title="Create Account" />} />} />
<Route path='register/:buildingId' element={<EntryPage children={<RegisterForm />} />} />
<Route path='register/error' element={<EntryPage children={<div>Invalid invitational link - screen to be implemented</div>} />} />
<Route path='login' element={<EntryPage children={<Form children={<LoginForm />} title="Login" />} />} />
<Route path='login' element={<EntryPage children={<LoginForm />} />} />
<Route path='tenant' element={<Application />} />
<Route path='*' element={<Navigate replace to="login" />} />
</Routes>
......
src/components/Application.tsx
View file @ 7aa1175a
import { Box } from "@mui/material";
import { useEffect } from "react"
import { useEffect, useState } from "react"
import { useNavigate } from "react-router-dom"
import { JWT_TENANT } from "../actions/network-manager"
import { ApplicationTab } from "./ApplicationTab";
......@@ -21,20 +21,28 @@ const classes = {
export const Application = () => {
const navigate = useNavigate();
const [logedIn, setLogedIn] = useState(false);
useEffect(() => {
if (!localStorage.getItem(JWT_TENANT)) {
navigate('../login');
if (!!localStorage.getItem(JWT_TENANT)) {
setLogedIn(true);
return;
}
navigate('../login');
}, [navigate])
return (
<Box sx={classes.mainWrapper}>
<SideMenu />
<Box sx={classes.rightSideWrapper}>
<NavBar />
<ApplicationTab />
</Box>
</Box>
<>
{logedIn &&
<Box sx={classes.mainWrapper}>
<SideMenu />
<Box sx={classes.rightSideWrapper}>
<NavBar />
<ApplicationTab />
</Box>
</Box>
}
</>
)
}
\ No newline at end of file
src/components/Form.tsx deleted 100644 → 0
View file @ 3311ef45
import { Box, Typography } from "@mui/material";
import { ReactNode } from "react";
const classes = {
wrapper: {
height: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
gap: '20px'
},
title: {
fontFamily: 'Inter',
fontWeight: 'bold',
}
} as const;
export const Form = ({ children, title }: { children?: ReactNode, title: string }) => {
return (
<Box style={classes.wrapper}>
<Typography sx={classes.title} variant='h4'>{title}</Typography>
{children}
</Box>
);
}
\ No newline at end of file
src/components/LoginForm.tsx
View file @ 7aa1175a
import { Button, TextField } from "@mui/material"
import { Box, Button, TextField, Typography } from "@mui/material"
import { useEffect, useState } from "react";
import { LoginInfo } from "../internal-types";
import { postLogin } from "../actions/data-manager";
......@@ -6,6 +6,17 @@ import { JWT_TENANT } from "../actions/network-manager";
import { useNavigate } from "react-router-dom";
const classes = {
wrapper: {
height: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
gap: '20px'
},
title: {
fontFamily: 'Inter',
fontWeight: 'bold',
},
textField: {
'& label.Mui-focused': {
color: 'rgb(30, 41, 60)'
......@@ -81,9 +92,17 @@ export const LoginForm = () => {
navigate('../tenant');
}
const handleKeyUp = (event: React.KeyboardEvent<HTMLDivElement>): void => {
if (event.key === 'Enter') {
postLogin(loginInfo.username, loginInfo.password, false, loginCallback);
}
}
return (
<>
<Box style={classes.wrapper} onKeyUp={handleKeyUp}>
<Typography sx={classes.title} variant='h4'>Login</Typography>
<TextField
autoFocus
variant="outlined"
size='small'
label="Username"
......@@ -116,5 +135,5 @@ export const LoginForm = () => {
loginCallback)
}}
>Login</Button>
</>)
</Box>)
}
\ No newline at end of file
src/components/icons/Icons.css
View file @ 7aa1175a
.icons-stroke {
width: 12%;
stroke: rgb(86, 107, 130);
}
.logout:hover {
stroke: white;
}
\ No newline at end of file
src/components/icons/LogoutIcon.tsx
View file @ 7aa1175a
import { useNavigate } from 'react-router-dom';
import { JWT_TENANT } from '../../actions/network-manager';
import './Icons.css';
export const LogoutIcon = () => {
const navigate = useNavigate();
const logout = () => {
localStorage.removeItem(JWT_TENANT);
navigate('../login');
}
return (
<svg xmlns="http://www.w3.org/2000/svg" className="icons-stroke" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<svg xmlns="http://www.w3.org/2000/svg" className="icons-stroke logout" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} onClick={logout}>
<path strokeLinecap="round" strokeLinejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg>
);
......
src/components/register/RegisterForm.tsx
View file @ 7aa1175a
import { TextField, Box, Button, Select, FormControl, InputLabel, MenuItem } from "@mui/material";
import { TextField, Box, Button, Select, FormControl, InputLabel, MenuItem, Typography } from "@mui/material";
import React, { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { getPreRegisterData, registerUser } from "../../actions/data-manager";
import { RegistrationInfo } from "../../internal-types";
const classes = {
wrapper: {
height: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
gap: '20px'
},
title: {
fontFamily: 'Inter',
fontWeight: 'bold',
},
nameWrapper: {
display: 'flex',
gap: '20px'
},
textField: {
flex: 1,
'& label.Mui-focused': {
color: 'rgb(30, 41, 60)'
},
......@@ -59,6 +73,8 @@ const classes = {
export const RegisterForm = (): JSX.Element => {
// TODO Add proper frontend validation
let navigate = useNavigate();
let { buildingId } = useParams();
......@@ -92,30 +108,38 @@ export const RegisterForm = (): JSX.Element => {
});
}, [buildingId, navigate]);
const handleKeyUp = (event: React.KeyboardEvent<HTMLDivElement>): void => {
if (event.key === 'Enter') {
registerUser(buildingId, registerInfo, registerCallBack);
}
}
return (
<>
{buildingUnits &&
<Box sx={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
<Box sx={{ display: 'flex', gap: '20px' }}>
<Box style={classes.wrapper} onKeyUp={handleKeyUp}>
<Typography sx={classes.title} variant='h4'>Create Account</Typography>
<Box sx={classes.nameWrapper}>
<TextField
hiddenLabel
variant="outlined"
size='small'
label="First name"
sx={classes.textField}
sx={{...classes.textField, flex: 1}}
value={registerInfo.firstName}
onChange={(e) => {
setRegisterInfo({ ...registerInfo, firstName: e.target.value })
}}
error={"firstName" === errorField}
helperText={"firstName" === errorField ? errorMessage : null}
autoFocus
/>
<TextField
hiddenLabel
variant="outlined"
size='small'
label="Last name"
sx={classes.textField}
sx={{...classes.textField, flex: 1}}
value={registerInfo.lastName}
onChange={(e) => {
setRegisterInfo({ ...registerInfo, lastName: e.target.value })
......@@ -173,7 +197,7 @@ export const RegisterForm = (): JSX.Element => {
error={"mobile" === errorField}
helperText={"mobile" === errorField ? errorMessage : null}
/>
<FormControl fullWidth size="small">
<FormControl fullWidth size="small" onKeyUp={(e) => {e.stopPropagation();}}>
<InputLabel>Select your units</InputLabel>
<Select
label="Select your units"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment