Skip to content

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

Init register page

parent b07d7d35
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 192 additions and 57 deletions
package-lock.json
View file @ f9fc9f48
This diff is collapsed.
package.json
View file @ f9fc9f48
......@@ -3,6 +3,9 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
"@mui/material": "^5.8.5",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
......@@ -12,12 +15,13 @@
"@types/react-dom": "^18.0.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"typescript": "^4.7.4",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"start": "PORT=3006 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
......
public/assets/logo-svg.svg 0 → 100644
View file @ f9fc9f48
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 492 107" style="enable-background:new 0 0 492 107;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#FA2742;}
.st2{fill:none;}
</style>
<g>
<polygon class="st0" points="13,83.7 25.1,21.8 44.9,66.6 65.4,21.8 76.3,83.7 67.4,83.7 61.8,48.9 44.8,86.4 28.2,48.9 22,83.7
"/>
<path class="st0" d="M81.3,54.7c0-8.1,3-15.1,8.9-20.9c5.9-5.8,13-8.7,21.3-8.7c8.2,0,15.2,2.9,21.1,8.8c5.9,5.9,8.8,12.9,8.8,21.2
c0,8.3-3,15.3-8.9,21.1c-5.9,5.8-13.1,8.7-21.5,8.7c-7.4,0-14.1-2.6-20-7.7C84.6,71.3,81.3,63.9,81.3,54.7 M90.1,54.8
c0,6.4,2.1,11.6,6.4,15.7c4.3,4.1,9.2,6.2,14.7,6.2c6,0,11.1-2.1,15.3-6.3c4.2-4.2,6.2-9.4,6.2-15.4c0-6.1-2.1-11.3-6.2-15.4
c-4.1-4.2-9.1-6.3-15.2-6.3c-6,0-11.1,2.1-15.2,6.3C92.2,43.6,90.1,48.7,90.1,54.8"/>
<path class="st0" d="M165.8,26.1v37.3c0,4.5-0.3,7.8-0.9,10c-0.6,2.5-1.7,4.6-3.2,6.3c-2.9,3.4-6.8,5.1-11.6,5.1
c-3.6,0-7-0.9-10.2-2.8l4.3-7.4c2.1,1.4,4.1,2.1,5.9,2.1c2.6,0,4.4-1,5.4-2.9c1-2,1.6-5.4,1.6-10.3V26.1H165.8z"/>
<path class="st0" d="M207,40.9c-1.6-1.3-3.3-2.3-4.9-2.9c-1.6-0.6-3.2-1-4.7-1c-1.9,0-3.5,0.5-4.7,1.4c-1.2,0.9-1.8,2.1-1.8,3.6
c0,1,0.3,1.9,0.9,2.5c0.6,0.7,1.4,1.2,2.4,1.7c1,0.5,2.1,0.9,3.4,1.3c1.2,0.4,2.5,0.7,3.7,1.1c4.9,1.6,8.5,3.8,10.7,6.5
c2.3,2.7,3.4,6.3,3.4,10.7c0,3-0.5,5.6-1.5,8c-1,2.4-2.4,4.4-4.4,6.2s-4.3,3-7,4c-2.8,0.9-5.9,1.4-9.4,1.4c-7.3,0-14-2.2-20.3-6.5
l6.4-12.1c2.2,2,4.5,3.5,6.6,4.4c2.2,1,4.4,1.5,6.5,1.5c2.4,0,4.3-0.6,5.5-1.7c1.2-1.1,1.8-2.4,1.8-3.8c0-0.9-0.2-1.6-0.5-2.3
c-0.3-0.6-0.8-1.2-1.5-1.8s-1.6-1-2.8-1.5c-1.1-0.5-2.5-1-4.2-1.5c-1.9-0.6-3.8-1.3-5.7-2c-1.9-0.7-3.5-1.7-5-2.9
c-1.5-1.2-2.6-2.8-3.5-4.6c-0.9-1.9-1.3-4.2-1.3-7.1c0-2.9,0.5-5.4,1.4-7.8c0.9-2.3,2.3-4.3,4-6c1.7-1.7,3.8-2.9,6.3-3.9
c2.5-0.9,5.2-1.4,8.3-1.4c2.9,0,5.8,0.4,8.9,1.2c3.1,0.8,6.1,1.9,8.9,3.5L207,40.9z"/>
<path class="st0" d="M235.4,83.7h-15V26.1h23.8c6.5,0,11.4,1.7,14.9,5c3.4,3.4,5.2,8.1,5.2,14.2c0,6.1-1.7,10.9-5.2,14.2
c-3.4,3.4-8.4,5-14.9,5h-8.9V83.7z M235.4,52.5h5c5.5,0,8.3-2.4,8.3-7.2c0-4.8-2.8-7.2-8.3-7.2h-5V52.5z"/>
<path class="st0" d="M317.4,83.7h-18.6l-14.3-22.2v22.2h-15V26.1h23.3c3.2,0,6,0.5,8.4,1.4c2.4,0.9,4.4,2.2,5.9,3.9
c1.6,1.6,2.7,3.5,3.5,5.7c0.8,2.1,1.2,4.4,1.2,6.9c0,4.4-1.1,7.9-3.2,10.7c-2.1,2.7-5.2,4.6-9.4,5.5L317.4,83.7z M284.5,51.9h2.8
c3,0,5.2-0.6,6.8-1.8c1.6-1.2,2.4-3,2.4-5.3s-0.8-4.1-2.4-5.3c-1.6-1.2-3.8-1.8-6.8-1.8h-2.8V51.9z"/>
<path class="st0" d="M362.4,73.7H341l-3.4,10h-16l21.9-57.6h16.4l21.9,57.6h-16L362.4,73.7z M358.4,62.3l-6.7-19.2L345,62.3H358.4z
"/>
<polygon class="st0" points="404.9,38.8 404.9,83.7 390,83.7 390,38.8 377.7,38.8 377.7,26.1 417.2,26.1 417.2,38.8 "/>
<polyline class="st1" points="426.2,83.4 426.2,53.4 456.2,53.4 "/>
<polyline class="st1" points="454,55.6 454,25.6 484,25.6 "/>
</g>
<rect class="st2" width="492" height="107"/>
</svg>
public/index.html
View file @ f9fc9f48
......@@ -15,6 +15,9 @@
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap" rel="stylesheet">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
......
src/App.css
View file @ f9fc9f48
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
src/App.tsx
View file @ f9fc9f48
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
import { Register } from './components/register/Register';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
return (
<Router>
<Routes>
<Route path='/' element={<div>asd</div>} />
<Route path='register/:buildingId' element={<Register />} />
</Routes>
</Router>
);
}
export default App;
src/components/register/Register.css 0 → 100644
View file @ f9fc9f48
.RegisterWrapper {
min-height: 100vh;
display: flex;
flex-direction: row;
}
.Logo {
background-color: rgba(19, 34, 50, 1);
min-height: 100%;
flex: 1;
padding-block: 10%;
padding-inline: 5%;
display: flex;
justify-content: center;
align-items: center;
}
.Form {
background-color: rgb(241, 245, 249);
min-height: 100%;
flex: 1;
padding-block: 10%;
padding-inline: 5%;
}
\ No newline at end of file
src/components/register/Register.tsx 0 → 100644
View file @ f9fc9f48
import React from "react"
import './Register.css';
import { RegisterForm } from "./RegisterForm";
export const Register = () => {
return (
<div className="RegisterWrapper">
<div className="Logo">
<img src={process.env.PUBLIC_URL + '/assets/logo-svg.svg'} alt='logo'/>
</div>
<div className="Form">
<RegisterForm />
</div>
</div>
)
}
\ No newline at end of file
src/components/register/RegisterForm.tsx 0 → 100644
View file @ f9fc9f48
import { TextField, Box, Typography, Button, styled, ButtonProps, Select, FormControl, InputLabel, MenuItem } from "@mui/material";
import { red } from "@mui/material/colors";
import React from "react";
import { useParams } from "react-router-dom";
const classes = {
textField: {
flex: 1,
'& label.Mui-focused': {
color: 'rgb(30, 41, 60)'
},
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: 'rgb(203, 213, 224)',
backgroundColor: 'white'
},
'&:hover fieldset': {
borderColor: 'rgb(203, 213, 224)',
},
'&.Mui-focused': {
'& fieldset': {
borderColor: 'rgb(203, 213, 224)'
}
},
}
},
select: {
'& label.Mui-focused': {
color: 'red'
}
,
'& fieldset': {
borderColor: 'rgb(203, 213, 224)',
backgroundColor: 'white',
zIndex: 0
},
'& svg': {
zIndex: 2
}
},
registerButton: {
alignSelf: 'flex-end',
'&.MuiButton-root': {
backgroundColor: 'rgb(19, 71, 175)',
borderRadius: 40,
padding: '10px',
paddingInline: '25px'
}
}
} as const;
export const RegisterForm = () => {
let { buildingId } = useParams();
console.log(buildingId);
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
<Typography sx={{ fontFamily: 'Inter', fontWeight: 'bold' }} variant='h4'>Create Account</Typography>
<Box sx={{ display: 'flex', gap : '20px' }}>
<TextField hiddenLabel variant="outlined" size='small' label="First name" sx={classes.textField} />
<TextField hiddenLabel variant="outlined" size='small' label="Last name" sx={classes.textField} />
</Box>
<TextField variant="outlined" size='small' label="Email" sx={classes.textField} />
<TextField variant="outlined" size='small' label="Username" sx={classes.textField} />
<TextField variant="outlined" size='small' label="Password" type="password" sx={classes.textField} />
<TextField variant="outlined" size='small' label="Mobile number" type="number" sx={classes.textField} />
<FormControl sx={{ flex: 1 }} size="small">
<InputLabel>Select your units</InputLabel>
<Select
sx={classes.select}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
<Button sx={classes.registerButton} variant='contained'>Register</Button>
</div>
);
};
\ No newline at end of file
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