-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
styling menubar,settings,login,register
- Loading branch information
1 parent
7c7a14e
commit dcd152e
Showing
9 changed files
with
178 additions
and
190 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,43 +1,73 @@ | ||
| import {ChangeEvent, FormEvent, useState} from "react"; | ||
| import {useState} from "react"; | ||
| import axios from "axios"; | ||
| import {Link, useNavigate} from "react-router-dom"; | ||
| import {Button, Grid, TextField, Typography} from "@mui/material"; | ||
|
|
||
| type Props = { | ||
| setUser: (user:string) => void | ||
| setUser: (user: string) => void | ||
| } | ||
|
|
||
| export default function LoginPage(loginPageProps:Props){ | ||
| export default function LoginPage(loginPageProps: Props) { | ||
|
|
||
| const [username, setUsername] = useState(""); | ||
| const [password, setPassword] = useState(""); | ||
|
|
||
| const nav = useNavigate() | ||
|
|
||
| function onChangeHandlerUsername(event:ChangeEvent<HTMLInputElement>){ | ||
| setUsername(event.target.value) | ||
| } | ||
|
|
||
| function onChnageHandlerPassword(event:ChangeEvent<HTMLInputElement>){ | ||
| setPassword(event.target.value) | ||
| } | ||
|
|
||
| function login(event:FormEvent<HTMLFormElement>){ | ||
| event.preventDefault(); | ||
| function login() { | ||
| axios.post("/api/user/login", undefined, {auth: {username, password}}) | ||
| .then((response) => loginPageProps.setUser(response.data)) | ||
| .then(() => nav("/home")) | ||
| .catch((error) => console.log(error)); | ||
| } | ||
|
|
||
| return( | ||
| <div> | ||
| <h1>LOGIN</h1> | ||
| <form onSubmit={login}> | ||
| <input type={"text"} id={"username"} placeholder={"enter your username"} required={true} onChange={onChangeHandlerUsername}/> | ||
| <input type={"password"} id={"password"} placeholder={"*****************"} required={true} onChange={onChnageHandlerPassword}/> | ||
| <button >Login</button> | ||
| </form> | ||
| <button><Link to={"/register"}>New here?</Link></button> | ||
| </div> | ||
| return ( | ||
| <> | ||
| <Grid container={true} | ||
| direction={"column"} | ||
| alignItems={"center"} | ||
| p={"2%"} | ||
| > | ||
| <Grid container={true} | ||
| maxWidth={'350px'} | ||
| direction={'column'} | ||
| alignItems={'center'} | ||
| > | ||
| <Typography variant={"h2"}> | ||
| LOGIN | ||
| </Typography> | ||
| <br/> | ||
| <TextField id="username" | ||
| label={"Username"} | ||
| variant="outlined" | ||
| fullWidth={true} | ||
| onChange={e => setUsername(e.target.value)} | ||
| /> | ||
| <br/> | ||
| <TextField id="password" | ||
| type={'password'} | ||
| label={"Passwort"} | ||
| variant="outlined" | ||
| fullWidth={true} | ||
| onChange={e => setPassword(e.target.value)} | ||
| /> | ||
| <br/> | ||
| </Grid> | ||
| <Grid container={true} | ||
| justifyContent={"space-between"} | ||
| width={'350px'} | ||
| > | ||
| <Button onClick={() => {login()}} | ||
| variant={'outlined'}> | ||
| Einloggen | ||
| </Button> | ||
| <Button component={Link} | ||
| to={'/register'} | ||
| variant={'outlined'}> | ||
| Registrieren ? | ||
| </Button> | ||
| </Grid> | ||
| </Grid> | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,26 @@ | ||
| import {useNavigate} from "react-router-dom"; | ||
| import {FormEvent} from "react"; | ||
| import axios from "axios"; | ||
| import {Button} from "@mui/material"; | ||
|
|
||
|
|
||
| export default function LogoutButton() { | ||
| const nav = useNavigate(); | ||
| function logout(event:FormEvent<HTMLFormElement>){ | ||
| event.preventDefault() | ||
|
|
||
| function logout() { | ||
| axios.post("/api/user/logout") | ||
| .then((response) => console.log(response.data)) | ||
| .then(()=>nav("/")) | ||
| .then(() => nav("/")) | ||
| .catch((error) => console.log(error)) | ||
| } | ||
|
|
||
| return( | ||
| <form onSubmit={logout}> | ||
| <button>logout</button> | ||
| </form> | ||
| return ( | ||
| <> | ||
| <Button | ||
| size={"medium"} | ||
| variant={'contained'} | ||
| color={"error"} | ||
| onClick={() => logout()} | ||
| >logout</Button> | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,20 @@ | ||
| import WeatherApi from "./WeatherAPI.tsx"; | ||
| import AddActivity from "./AddActivity.tsx"; | ||
| import {Box} from '@mui/material'; | ||
| import {Grid, Typography} from '@mui/material'; | ||
| import LogoutButton from "./LogoutButton.tsx"; | ||
|
|
||
| const styles = { | ||
| menubar: { | ||
| display: "flex" | ||
| } | ||
| }; | ||
|
|
||
| export default function MenuBar() { | ||
| return <Box> | ||
| <Box style={styles.menubar}> | ||
| <WeatherApi/> | ||
| <AddActivity/> | ||
| <LogoutButton/> | ||
| </Box> | ||
| </Box> | ||
| return <Grid container | ||
| direction="row" | ||
| justifyContent="space-around" | ||
| alignItems="center" | ||
| gap={2} | ||
| bgcolor={"#3866B2FF"}> | ||
| <Typography | ||
| variant={"h4"} | ||
| color={"white"} | ||
| fontFamily={"Copperplate, Papyrus, fantasy"}>To Be Able | ||
| </Typography> | ||
| <WeatherApi/> | ||
| <LogoutButton/> | ||
| </Grid> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.