Commit 012f73c6 authored by Djordje's avatar Djordje

Abstract EntryPage and update routes to handle invalid buildingId

parent 51cc0c3f
import React from 'react'; import React from 'react';
import logo from './logo.svg'; import logo from './logo.svg';
import './App.css'; import './App.css';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom' import { BrowserRouter as Router, Navigate, Route, Routes } from 'react-router-dom'
import { Register } from './components/register/Register'; import { EntryPage } from './components/entry-page/EntryPage';
import { RegisterForm } from './components/register/RegisterForm';
import { LoginForm } from './components/LoginForm';
function App() { function App() {
return ( return (
<Router> <Router>
<Routes> <Routes>
<Route path='/' element={<div>asd</div>} /> <Route path='register/:buildingId' element={<EntryPage children={<RegisterForm/>}/>} />
<Route path='register/:buildingId' element={<Register />} /> <Route path='register/error' element={<EntryPage children={<div>Invalid invitational link - screen to be implemented</div>} />} />
<Route path='login' element={<EntryPage children={<LoginForm />}/>}/>
<Route path='*' element={<Navigate replace to="login"/>} />
</Routes> </Routes>
</Router> </Router>
); );
......
export const LoginForm = () => {
return (<div>
Hello from LoginForm
</div>)
}
\ No newline at end of file
import React from "react" import React, { ReactNode } from "react"
import './Register.css'; import './EntryPage.css';
import { RegisterForm } from "./RegisterForm";
export const Register = () => { export const EntryPage = ({children}: {children?: ReactNode}): JSX.Element => {
return ( return (
<div className="RegisterWrapper"> <div className="RegisterWrapper">
...@@ -10,9 +9,8 @@ export const Register = () => { ...@@ -10,9 +9,8 @@ export const Register = () => {
<img src={process.env.PUBLIC_URL + '/assets/logo-svg.svg'} alt='logo'/> <img src={process.env.PUBLIC_URL + '/assets/logo-svg.svg'} alt='logo'/>
</div> </div>
<div className="Form"> <div className="Form">
<RegisterForm /> {children}
</div> </div>
</div> </div>
) )
} }
\ No newline at end of file
import { TextField, Box, Typography, Button, styled, ButtonProps, Select, FormControl, InputLabel, MenuItem } from "@mui/material"; import { TextField, Box, Typography, Button, styled, ButtonProps, Select, FormControl, InputLabel, MenuItem } from "@mui/material";
import { red } from "@mui/material/colors"; import { red } from "@mui/material/colors";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom"; import { Navigate, useParams } from "react-router-dom";
import { getPreRegisterData } from "../../actions/data-manager"; import { getPreRegisterData } from "../../actions/data-manager";
import { RegistrationInfo } from "../../internal-types"; import { RegistrationInfo } from "../../internal-types";
...@@ -58,16 +58,18 @@ const classes = { ...@@ -58,16 +58,18 @@ const classes = {
} }
} as const; } as const;
export const RegisterForm = () => { export const RegisterForm = (): JSX.Element => {
let { buildingId } = useParams(); let { buildingId } = useParams();
const [buildingUnits, setBuildingUnits] = useState([]); const [buildingUnits, setBuildingUnits] = useState([]);
const [invalidUrl, setInvalidUrl] = useState(false);
const [registerInfo, setRegisterInfo] = useState<RegistrationInfo>({ name: '', lastName: '', email: '', username: '', password: '', mobile: '', units: [] }); const [registerInfo, setRegisterInfo] = useState<RegistrationInfo>({ name: '', lastName: '', email: '', username: '', password: '', mobile: '', units: [] });
useEffect(() => { useEffect(() => {
getPreRegisterData(buildingId, (err: any, data: any, dsp: any) => { getPreRegisterData(buildingId, (err: any, data: any, dsp: any) => {
if (err) { if (err) {
setInvalidUrl(true);
return; return;
} }
...@@ -81,6 +83,7 @@ export const RegisterForm = () => { ...@@ -81,6 +83,7 @@ export const RegisterForm = () => {
return ( return (
<> <>
{invalidUrl && <Navigate replace to='../register/error' />}
{buildingUnits && {buildingUnits &&
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}> <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
<Typography sx={{ fontFamily: 'Inter', fontWeight: 'bold' }} variant='h4'>Create Account</Typography> <Typography sx={{ fontFamily: 'Inter', fontWeight: 'bold' }} variant='h4'>Create Account</Typography>
......
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