karma/zucchetti-sa5
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects 1 Releases Wiki Activity

integrated theme in app

Browse Source
This commit is contained in:
Arnaud Fauconnet 2022-10-28 11:42:31 +02:00
parent 328a760eb8
commit a1072bff05
9 changed files with 200 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/backgroundCurvyLines.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

9
src/components/ForgotPassword.tsx
View File

@ -5,6 +5,7 @@ import { useNavigate } from "react-router-dom";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import { useForm } from "react-hook-form";
import Typography from "@theme/modules/components/Typography";
type Inputs = {
email: string;
@ -48,7 +49,7 @@ export default function ForgotPassword() {
}
function onSubmit(data: Inputs) {
console.log("There will be an API call now with the following data");
console.warn("There will be an API call now with the following data");
console.table(data);
console.log(
"You can now go to http://localhost:8080/reset to acces the reset form"
@ -59,11 +60,11 @@ export default function ForgotPassword() {
<main className="cardContainer">
<form onSubmit={handleSubmit(onSubmit)}>
<Card className="card">
<h3>Forgot Passowrd</h3>
<p>
<Typography className="title" variant="h5">Forgot Password</Typography>
<Typography>
If you have forgot your password, we can send you an
email with a link to reset it.
</p>
</Typography>
<TextField {...emailProps} />
<div className="buttons">
<Button

9
src/components/Login.tsx
View File

@ -6,6 +6,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import { useForm } from "react-hook-form";
import userContext from "@ts/userContext"
import Typography from "@theme/modules/components/Typography";
type Inputs = {
email: string;
@ -65,7 +66,7 @@ export default function Login() {
};
function onSubmit(data: Inputs) {
console.log("There will be an API call now with the following data");
console.warn("There will be an API call now with the following data");
data = { ...data, password: hash(data.password) };
user.setName(data.email);
console.table(data);
@ -76,15 +77,15 @@ export default function Login() {
<main className="cardContainer">
<form onSubmit={handleSubmit(onSubmit)}>
<Card className="card">
<h3>Login</h3>
<Typography className="title" variant="h4">Login</Typography>
<TextField {...emailProps} />
<TextField {...passProps} />
<Button type="submit" id="submit" variant="contained">
Login
</Button>
<p>
<Typography>
Forgot your <Link to="/forgot">password</Link>?
</p>
</Typography>
</Card>
</form>
</main>

7
src/components/Reset.tsx
View File

@ -5,6 +5,7 @@ import { useNavigate } from "react-router-dom";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import { useForm } from "react-hook-form";
import Typography from "@theme/modules/components/Typography";
type Inputs = {
password: string;
@ -43,6 +44,7 @@ export default function Reset() {
inputRef: passRef,
className: "textField",
name: "password",
type: "password",
id: "password",
label: "Password",
error: !!errors.password,
@ -58,13 +60,14 @@ export default function Reset() {
className: "textField",
name: "confirm_password",
id: "confirm_password",
type: "password",
label: "Confirm Password",
error: !!errors.confirm_password,
helperText: errors?.confirm_password?.message,
};
function onSubmit(data: Inputs) {
console.log("There will be an API call now with the following data");
console.warn("There will be an API call now with the following data");
data = {
password: hash(data.password),
confirm_password: hash(data.confirm_password),
@ -76,7 +79,7 @@ export default function Reset() {
<main className="cardContainer">
<form onSubmit={handleSubmit(onSubmit)}>
<Card className="card">
<h3>Reset Password</h3>
<Typography className="title" variant="h5">Reset Password</Typography>
<TextField {...passProps} />
<TextField {...confirmPassProps} />
<Button type="submit" id="submit" variant="contained">

132
src/components/Transactions.tsx
View File

@ -2,18 +2,144 @@ import React, { useContext, useEffect } from "react";
import "@scss/transactions.scss";
import Table from "@components/Transactions/Table"
import userContext from "@ts/userContext"
import AppBar from "@theme/modules/components/AppBar";
import Toolbar from "@theme/modules/components/Toolbar";
import Typography from "@theme/modules/components/Typography";
import { Box, Link, TextFieldProps, TextField } from "@mui/material";
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
import { useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider/LocalizationProvider";
import dayjs, { Dayjs } from 'dayjs';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { getValue } from "@mui/system";
type Inputs = {
startDate?: Date;
endDate?: Date;
minAmount?: number;
maxAmount?: number;
amountType?: "incoming" | "outgoing" | "both";
};
const schema = yup
.object()
.shape({
startDate: yup.date().nullable().default(() => {return null}).typeError("Invalid date"),
endDate: yup.date().nullable().typeError("Invalid date"),
minAmount: yup.number().positive(),
maxAmount: yup.number().positive(),
amountType: yup.string().oneOf(["incoming", "outgoing", "both"]),
})
.required();
export default function Transactions() {
const user = useContext(userContext)
const {
register,
formState: { errors },
handleSubmit,
getValues
} = useForm<Inputs>({
resolver: yupResolver(schema),
});
const { ref: startDateRef, ...startDateRegisterProps } = register("startDate");
console.log(startDateRegisterProps)
const startDatePickerProps = {
...startDateRegisterProps,
inputRef: startDateRef,
value: getValues("startDate"),
className: "input datePicker start",
label: "Starting Date",
name: "endDate",
emptyLabel: "hello world",
inputFormat: "DD/MM/YYYY",
renderInput: (params: TextFieldProps) => <TextField {...params} />
}
const { ref: endDateRef, ...endDateRegisterProps } = register("endDate");
const endDatePickerProps = {
...endDateRegisterProps,
inputRef: endDateRef,
value: getValues("endDate"),
className: "input datePicker end",
label: "Ending Date",
name: "endDate",
inputFormat: "DD/MM/YYYY",
error: !!errors.minAmount,
helperText: errors?.minAmount?.message,
renderInput: (params: TextFieldProps) => <TextField {...params} />
}
const { ref: minAmountRef, ...minAmountRegisterProps } = register("minAmount");
const minAmountProps = {
...minAmountRegisterProps,
inputRef: minAmountRef,
className: "input min",
label: "Minimum Amount",
name: "minAmount",
error: !!errors.minAmount,
helperText: errors?.minAmount?.message,
}
const { ref: maxAmountRef, ...maxAmountRegisterProps } = register("maxAmount");
const maxAmountProps = {
...maxAmountRegisterProps,
inputRef: maxAmountRef,
className: "input max",
label: "Maximum Amount",
name: "maxAmount",
error: !!errors.maxAmount,
helperText: errors?.maxAmount?.message,
}
return (
<div id="tablePage">
<header>
Hello {user.name}
</header>
<AppBar position="fixed" sx={{ background: "#28282a" }}>
<Toolbar className="toolbar" sx={{ justifyContent: 'space-between' }}>
<Box className="box left" />
<Typography variant="h3" >
Transactions
</Typography>
<Box className="box right">
<Link variant="h6" className="link" href="/">
{user.name}
</Link>
<AccountCircleIcon className="icon" />
</Box>
</Toolbar>
</AppBar>
<aside>
<form>
<Typography variant="h5">
Filters
</Typography>
<Typography variant="h6">
Dates
</Typography>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DesktopDatePicker {...startDatePickerProps} />
<DesktopDatePicker {...endDatePickerProps} />
</LocalizationProvider>
<Typography variant="h6">
Transactions
</Typography>
<TextField {...minAmountProps}></TextField>
<TextField {...maxAmountProps}></TextField>
</form>
</aside>
<main>
<Table />

2
src/components/lib/AuthComponent.tsx
View File

@ -3,7 +3,7 @@ import React, { useEffect } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
type AuthProps = {
children: JSX.Element | JSX.Element[],
children: React.ReactNode,
}
export default function AuthComponent({ children }: AuthProps) {
const navigate = useNavigate();

1
src/scss/style.scss
View File

@ -8,5 +8,6 @@
body {
background: $bg1;
background-image: $bg-image;
color: $fg1;
}

54
src/scss/transactions.scss
View File

@ -2,6 +2,8 @@
@import "variables.module.scss";
body.transactions {
background-image: url("/public/backgroundCurvyLines.png");
div#tablePage {
color: black;
display: grid;
@ -18,18 +20,49 @@ body.transactions {
header {
grid-row: 1;
background: lightcyan;
position: fixed;
background-color: $bg-header;
.toolbar {
display: flex;
flex-direction: row;
justify-content: space-between;
.box {
flex: 1;
display: flex;
}
.box.right {
justify-content: flex-end;
align-items: center;
.link {
color: inherit;
text-decoration: none;
margin-right: .5em;
}
.icon {
width: 1.75em;
height: 1.75em;
}
}
}
}
footer {
grid-row: 3;
background: lightcoral;
// background: lightcoral;
}
main {
grid-row: 2;
grid-column: 2;
display: flex;
// justify-content: center;
align-items: center;
@ -46,7 +79,20 @@ body.transactions {
aside {
grid-column: 1;
grid-row: 2;
background: lightgreen;
form {
display: flex;
padding: 7px;
justify-content: space-evenly;
flex-direction: column;
padding-top:1em;
.input {
margin: .4em 0;
background: $bg1;
}
}
}
}
}
}

6
src/scss/variables.module.scss
View File

@ -1,5 +1,7 @@
$bg1: #333;
$fg1: #c5c8c6;
$bg1: white;
$bg-image: url("/public/backgroundCurvyLines.png");
$bg-header: #28282a;
$fg1: black;
$fg-green: green;
$fg-red: red;