Ticket 1196

src/client/app/components/HeaderButtonsComponent.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link, useLocation } from 'react-router-dom';
-import { DropdownItem, DropdownMenu, DropdownToggle, Nav, NavLink, Navbar, UncontrolledDropdown } from 'reactstrap';
+import { DropdownItem, DropdownMenu, DropdownToggle, Modal, ModalBody, ModalHeader, Nav, NavLink, Navbar, UncontrolledDropdown } from 'reactstrap';
 import TooltipHelpComponent from '../components/TooltipHelpComponent';
 import { clearGraphHistory } from '../redux/actions/extraActions';
 import { authApi } from '../redux/api/authApi';
@@ -19,6 +19,7 @@ import { UserRole } from '../types/items';
 import translate from '../utils/translate';
 import LanguageSelectorComponent from './LanguageSelectorComponent';
 import TooltipMarkerComponent from './TooltipMarkerComponent';
+import LoginComponent from './LoginComponent';
 
 /**
  * React Component that defines the header buttons at the top of a page
@@ -150,6 +151,17 @@ export default function HeaderButtonsComponent() {
 			logout();
 		}
 	};
+	// Handle modal visibility
+	const [showModal, setShowModal] = useState<boolean>(false);
+
+	const handleClose = () => {
+		setShowModal(false);
+	};
+
+	const handleShow = () => {
+		setShowModal(true);
+	};
+
 	return (
 		<div>
 			<Navbar expand>
@@ -257,14 +269,11 @@ export default function HeaderButtonsComponent() {
 							<DropdownItem divider />
 							<DropdownItem
 								style={state.loginLinkStyle}
-								tag={Link}
-								to='/login'>
+								onClick={handleShow}>
 								<FormattedMessage id='log.in' />
 							</DropdownItem>
 							<DropdownItem
 								style={state.logoutLinkStyle}
-								tag={Link}
-								to='/'
 								onClick={handleLogOut}>
 								<FormattedMessage id='log.out' />
 							</DropdownItem>
@@ -281,6 +290,17 @@ export default function HeaderButtonsComponent() {
 					</NavLink>
 				</Nav>
 			</Navbar>
+			<>
+				<Modal isOpen={showModal} toggle={handleClose}>
+					<ModalHeader>
+						{translate('log.in')}
+					</ModalHeader>
+					<ModalBody>
+						<LoginComponent handleClose={handleClose}/>
+					</ModalBody>
+				</Modal>
+			</>
+
 		</div>
 	);
 }

src/client/app/components/LoginComponent.tsx

@@ -5,24 +5,28 @@
 import * as React from 'react';
 import { useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useNavigate } from 'react-router-dom';
 import { Button, Form, FormGroup, Input, Label } from 'reactstrap';
 import { authApi } from '../redux/api/authApi';
 import { showErrorNotification, showSuccessNotification } from '../utils/notifications';
 import translate from '../utils/translate';
 
 
+interface LoginProp {
+	handleClose: () => void;
+}
+
 /**
+ * @param handleClose Function to close modal after login
+ * @param handleClose.handleClose Needed by ESLint see above
  * @returns The login page for users or admins.
  */
-export default function LoginComponent() {
+export default function LoginComponent({ handleClose }: LoginProp) {
 	// Local State
 	const [username, setUsername] = useState<string>('');
 	const [password, setPassword] = useState<string>('');
 
 	// Html Element Reference used for focus()
 	const inputRef = useRef<HTMLInputElement>(null);
-	const navigate = useNavigate();
 
 	// Grab the derived loginMutation from the API
 	// The naming of the returned objects is arbitrary
@@ -36,7 +40,7 @@ export default function LoginComponent() {
 			.then(() => {
 				// No error, success!
 				showSuccessNotification(translate('login.success'));
-				navigate('/');
+				handleClose();
 			})
 			.catch(() => {
 				// Error on login Mutation
@@ -69,16 +73,31 @@ export default function LoginComponent() {
 						innerRef={inputRef}
 					/>
 				</FormGroup>
-				<Button
-					outline
-					type='submit'
-					onClick={handleSubmit}
-					disabled={!username.length || !password.length}
-				>
-					<FormattedMessage id='submit' />
-				</Button>
+				<div className='row'>
+					<div className='col'>
+						<Button
+							outline
+							type='submit'
+							onClick={handleSubmit}
+							disabled={!username.length || !password.length}
+						>
+							<FormattedMessage id='submit' />
+						</Button>
+					</div>
+					<div className='col'>
+						<Button
+							outline
+							type='button'
+							onClick={handleClose}
+						>
+							<FormattedMessage id='close' />
+						</Button>
+					</div>
+				</div>
+
+
 			</Form>
-		</div >
+		</div>
 	);
 }
 

src/client/app/components/RouteComponent.tsx

@@ -13,7 +13,6 @@ import LocaleTranslationData from '../translations/data';
 import { UserRole } from '../types/items';
 import AppLayout from './AppLayout';
 import HomeComponent from './HomeComponent';
-import LoginComponent from './LoginComponent';
 import AdminComponent from './admin/AdminComponent';
 import UsersDetailComponent from './admin/users/UsersDetailComponent';
 import ConversionsDetailComponent from './conversion/ConversionsDetailComponent';
@@ -47,7 +46,6 @@ const router = createBrowserRouter([
 		path: '/', element: <AppLayout />, errorElement: <ErrorComponent />,
 		children: [
 			{ index: true, element: <HomeComponent /> },
-			{ path: 'login', element: <LoginComponent /> },
 			{ path: 'groups', element: <GroupsDetailComponent /> },
 			{ path: 'meters', element: <MetersDetailComponent /> },
 			{ path: 'graph', element: <GraphLink /> },