Add login page

This commit is contained in:
Kasper Juul Hermansen 2021-10-15 21:53:27 +02:00
parent a67f3c402b
commit 1ef8f64ed0
7 changed files with 113 additions and 59 deletions

View File

@ -1,6 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="PrettierConfiguration">
<option name="myRunOnSave" value="true" />
</component>
</project>

View File

@ -1,13 +1,5 @@
import React, {FC} from "react";
import {
AppBar,
Box,
Button,
Container,
Link as MuiLink,
Toolbar,
Typography,
} from "@mui/material";
import {AppBar, Box, Button, Container, Link as MuiLink, Toolbar, Typography,} from "@mui/material";
import {Styling} from "../general/styling";
import {BreadCrumbs} from "./breadCrumbs";
import Link from "next/link";
@ -44,10 +36,10 @@ export const DefaultLayout: FC = ({ children }) => (
</Toolbar>
</AppBar>
<Box sx={{flexGrow: 1, pt: 2}}>
<Container maxWidth="sm">
<Container maxWidth="md">
<BreadCrumbs/>
<Box sx={{ p: 2 }}>{children}</Box>
<Box sx={{p: 2, mt: 2}}>{children}</Box>
</Container>
</Box>
</Box>

View File

@ -0,0 +1,44 @@
import {Box, Button, Container, Grid, TextField, Typography} from "@mui/material";
const AuthScreen = ({children}) => (
<Container maxWidth="sm">
<Box sx={{bgcolor: "action.hover", borderRadius: 2, p: 3}}>
<Typography textAlign="center" variant="h6" component="h4" sx={{mb: 1}}>
Sign in to your account
</Typography>
<Box sx={{py: 2}}>{children}</Box>
</Box>
</Container>
);
export const LoginFrame = () => (
<AuthScreen>
<form>
<Grid container spacing={2}>
<Grid item xs={12}>
<TextField
type="email"
required
placeholder="Email"
fullWidth
label="Email"
/>
</Grid>
<Grid item xs={12}>
<TextField
required
placeholder="Password"
type="password"
fullWidth
label="Password"
/>
</Grid>
<Grid item xs={12}>
<Button variant="contained" fullWidth sx={{mt: 2}}>Sign in</Button>
</Grid>
</Grid>
</form>
</AuthScreen>
);

View File

@ -0,0 +1 @@
export const SignUpFrame = () => <div>Sign up frame</div>;

19
pages/auth/index.tsx Normal file
View File

@ -0,0 +1,19 @@
import { Grid } from "@mui/material";
import { LoginFrame } from "../../features/auth/loginFrame";
import { SignUpFrame } from "../../features/auth/signUpFrame";
const AuthPage = () => {
return (
<Grid container>
<Grid item xs={12} sm={6}>
<LoginFrame />
</Grid>
<Grid item xs={12} sm={6}>
<SignUpFrame />
</Grid>
</Grid>
);
};
export default AuthPage;

View File

@ -1,5 +1,7 @@
import { LoginFrame } from "../../features/auth/loginFrame";
const LoginPage = () => {
return <div>Login page</div>;
return <LoginFrame />;
};
export default LoginPage;

View File

@ -1,5 +1,7 @@
import { SignUpFrame } from "../../features/auth/signUpFrame";
const SignUpPage = () => {
return <div>Sign up page</div>;
return <SignUpFrame />;
};
export default SignUpPage;