Skip to content
Snippets Groups Projects
Commit 6ba128b8 authored by Holzheu Hannah's avatar Holzheu Hannah
Browse files

updated style of registration and login page and fixed link on homepage #22 #24

parent 4596a80a
No related branches found
No related tags found
1 merge request!31Frontend advanced
Hide whitespace changes
Inline Side-by-side
Showing
with 207 additions and 190 deletions
growbros-frontend/src/components/DropDownFilter.tsx
+ 2
− 1
View file @ 6ba128b8
import { useState } from "react"; import { useState } from "react";
import { propsDropDownFilter } from "../utils/commonTypes"; import { propsDropDownFilter } from "../utils/commonTypes";
import "../stylesheets/DropDownFilter.css";
function DropDownFilter(props: PropsDropDownFilter) { function DropDownFilter(props: PropsDropDownFilter) {
const options = props.options; const options = props.options;
...@@ -12,7 +13,7 @@ function DropDownFilter(props: PropsDropDownFilter) { ...@@ -12,7 +13,7 @@ function DropDownFilter(props: PropsDropDownFilter) {
}; };
return ( return (
<div> <div className="dropdown-filter">
<label>{topic}</label> <label>{topic}</label>
<select value={selectedOption} onChange={handleOptionChange}> <select value={selectedOption} onChange={handleOptionChange}>
<option value=""></option> <option value=""></option>
......
growbros-frontend/src/components/PlantsOverview.tsx
+ 1
− 1
View file @ 6ba128b8
...@@ -10,7 +10,7 @@ export default function PlantsOverview(props: any) { ...@@ -10,7 +10,7 @@ export default function PlantsOverview(props: any) {
style={{ style={{
display: "flex", display: "flex",
flexWrap: "wrap", flexWrap: "wrap",
gap: "1rem", gap: "0.5rem",
width: "100%", width: "100%",
}} }}
> >
......
growbros-frontend/src/pages/Garten.tsx
+ 13
− 13
View file @ 6ba128b8
...@@ -5,7 +5,6 @@ import { Plant } from "../utils/schemas"; ...@@ -5,7 +5,6 @@ import { Plant } from "../utils/schemas";
import { IBackendConnector } from "../utils/IBackendConnector"; import { IBackendConnector } from "../utils/IBackendConnector";
import PlantsOverview from "../components/PlantsOverview"; import PlantsOverview from "../components/PlantsOverview";
function Garten() { function Garten() {
const [plants, setPlantsInGarden] = useState<Plant[]>([]); const [plants, setPlantsInGarden] = useState<Plant[]>([]);
const [error, setError] = useState({}); const [error, setError] = useState({});
...@@ -22,19 +21,20 @@ function Garten() { ...@@ -22,19 +21,20 @@ function Garten() {
})(); })();
}, []); }, []);
return ( return (
<div> <div style={{ margin: "20px" }}>
<h2>Dein Garten</h2> <div>
<DropDownFilter <h2>Dein Garten</h2>
topic={"Sortierung der Pflanzen im Garten"} <DropDownFilter
options={[ topic={"Sortierung der Pflanzen im Garten"}
"neueste zuerst", options={[
"als nächstes anpflanzbar", "neueste zuerst",
"als nächstes erntbar", "als nächstes anpflanzbar",
]} "als nächstes erntbar",
/> ]}
<PlantsOverview plants={plants}/> />
</div>
<PlantsOverview plants={plants} />
</div> </div>
); );
} }
......
growbros-frontend/src/pages/Home.tsx
+ 8
− 4
View file @ 6ba128b8
import { useState } from "react";
import "../stylesheets/Home.css"; import "../stylesheets/Home.css";
import {NavLink} from "react-router-dom"; import { NavLink } from "react-router-dom";
import { checkJwtStatus } from "../jwt/Cookies";
function Home() { function Home() {
return ( return (
<main> <main>
<BackendConnectorTestInterface />
<div className="hero"> <div className="hero">
<img <img
src="../../public/recources/images/Vegetables.jpeg" src="../../public/recources/images/Vegetables.jpeg"
...@@ -72,9 +72,13 @@ function Home() { ...@@ -72,9 +72,13 @@ function Home() {
} }
function StartNowLink() { function StartNowLink() {
const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
checkJwtStatus(setIsLoggedIn);
return ( return (
<div className="link"> <div className="link">
<NavLink to="/suchen"> <NavLink to={isLoggedIn ? "/suchen" : "/login"}>
<h3> Starte hier</h3> <h3> Starte hier</h3>
<p>und füge Pflanzen zu deinem Garten hinzu</p> <p>und füge Pflanzen zu deinem Garten hinzu</p>
</NavLink> </NavLink>
......
growbros-frontend/src/pages/Register.tsx
+ 142
− 140
View file @ 6ba128b8
import "../stylesheets/RegisterAndLogin.css"; import "../stylesheets/RegisterAndLogin.css";
import {FormEvent, useState} from "react"; import { FormEvent, useState } from "react";
import {setCookie} from "../jwt/Cookies.ts"; import { setCookie } from "../jwt/Cookies.ts";
import { useNavigate } from 'react-router-dom'; import { useNavigate } from "react-router-dom";
import { jwtDecode } from 'jwt-decode'; import { jwtDecode } from "jwt-decode";
function Register() { function Register() {
const navigate = useNavigate(); const navigate = useNavigate();
const [firstname, setFirstname] = useState(''); const [firstname, setFirstname] = useState("");
const [lastname, setLastname] = useState(''); const [lastname, setLastname] = useState("");
const [email, setEmail] = useState(''); const [email, setEmail] = useState("");
const [password, setPassword] = useState(''); const [password, setPassword] = useState("");
const isValidEmail = (email: string): boolean => { const isValidEmail = (email: string): boolean => {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email); return emailRegex.test(email);
}; };
const isValidName = (name: string): boolean => { const isValidName = (name: string): boolean => {
return name.trim() !== ''; // Prüfe, ob der Name nicht leer ist return name.trim() !== ""; // Prüfe, ob der Name nicht leer ist
}; };
const isValidPassword = (password: string): boolean => { const isValidPassword = (password: string): boolean => {
return password.length >= 4; // Prüfe, ob das Passwort mindestens 4 Zeichen lang ist return password.length >= 4; // Prüfe, ob das Passwort mindestens 4 Zeichen lang ist
}; };
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => { const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault(); //verhindert, dass die Seite neu geladen wird, wenn das Formular abgeschickt wird e.preventDefault(); //verhindert, dass die Seite neu geladen wird, wenn das Formular abgeschickt wird
if (!isValidEmail(email)) { if (!isValidEmail(email)) {
window.alert('Ungültige E-Mail-Adresse.'); window.alert("Ungültige E-Mail-Adresse.");
return; return;
} }
if (!isValidName(firstname)) { if (!isValidName(firstname)) {
window.alert('Vorname darf nicht leer sein.'); window.alert("Vorname darf nicht leer sein.");
return; return;
} }
if (!isValidName(lastname)) { if (!isValidName(lastname)) {
window.alert('Nachname darf nicht leer sein.'); window.alert("Nachname darf nicht leer sein.");
return; return;
} }
if (!isValidPassword(password)) { if (!isValidPassword(password)) {
window.alert('Das Passwort muss mindestens 4 Zeichen lang sein.'); window.alert("Das Passwort muss mindestens 4 Zeichen lang sein.");
return; return;
} }
await handleRegister(); await handleRegister();
}; };
const handleRegister = async () => { const handleRegister = async () => {
try { try {
const requestBody = { const requestBody = {
firstname: firstname, firstname: firstname,
lastname: lastname, lastname: lastname,
email: email, email: email,
password: password password: password,
}; };
console.log(requestBody) console.log(requestBody);
const res = await fetch("http://localhost:8080/api/v1/auth/register", { const res = await fetch("http://localhost:8080/api/v1/auth/register", {
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "application/json" "Content-Type": "application/json",
}, },
body: JSON.stringify(requestBody) body: JSON.stringify(requestBody),
} });
) console.log(res);
console.log(res); if (res.status === 200) {
if (res.status === 200) { const { token } = await res.json();
const {token} = await res.json(); console.log("Jwt Token not decoded" + token);
console.log("Jwt Token not decoded" + token); const decodedToken = jwtDecode(token);
const decodedToken = jwtDecode(token); console.log("Jwt decoded " + decodedToken);
console.log("Jwt decoded " + decodedToken); // @ts-ignore
// @ts-ignore const expirationDate = new Date(decodedToken.exp * 1000); //*1000 Anzahl der Sekunden seit 1.1.1970 darstellt - JS arbeitet jedoch normalerweise mit Millisekunden
const expirationDate = new Date(decodedToken.exp * 1000); //*1000 Anzahl der Sekunden seit 1.1.1970 darstellt - JS arbeitet jedoch normalerweise mit Millisekunden setCookie("Jwt", token, expirationDate, "/");
setCookie("Jwt", token, expirationDate,"/");
navigate("/");
navigate('/'); } else {
} else { // @ts-ignore
// @ts-ignore const reader = res.body.getReader();
const reader = res.body.getReader(); const { value, done } = await reader.read();
const { value, done } = await reader.read();
if (!done) {
if (!done) { const text = new TextDecoder().decode(value);
const text = new TextDecoder().decode(value); window.alert(text);
window.alert(text) console.error(text);
console.error(text);
}
}
} catch (e: any) {
window.alert(e.status);
} }
}; }
} catch (e: any) {
return ( window.alert(e.status);
<main> }
<div className="register"> };
<h2 className="h2">REGISTRIERUNG</h2>
<form onSubmit={handleSubmit}> return (
<div className="form-group"> <main>
<input className="input" <div className="register">
type="text" <h2 className="h2">Registrierung</h2>
value={firstname} <form onSubmit={handleSubmit}>
onChange={(e) => setFirstname(e.target.value)} <div className="form-group">
placeholder="Name" <input
/> className="input"
</div> type="text"
<div className="form-group"> value={firstname}
<input className="input" onChange={(e) => setFirstname(e.target.value)}
type="text" placeholder="Name"
value={lastname} />
onChange={(e) => setLastname(e.target.value)} </div>
placeholder="Nachname" <div className="form-group">
/> <input
</div> className="input"
<div className="form-group"> type="text"
<input className="input" value={lastname}
type="text" onChange={(e) => setLastname(e.target.value)}
value={email} placeholder="Nachname"
onChange={(e) => setEmail(e.target.value)} />
placeholder="Mailadresse" </div>
/> <div className="form-group">
</div> <input
<div className="form-group"> className="input"
<input className="input" type="text"
type="password" value={email}
value={password} onChange={(e) => setEmail(e.target.value)}
onChange={(e) => setPassword(e.target.value)} placeholder="Mailadresse"
placeholder="Passwort (mindestens 4 Zeichen)" />
/> </div>
</div> <div className="form-group">
<div> <input
<button className="submitButton" type="submit">Anmelden</button> className="input"
</div> type="password"
</form> value={password}
</div> onChange={(e) => setPassword(e.target.value)}
</main> placeholder="Passwort (mindestens 4 Zeichen)"
); />
</div>
<div>
<button className="submitButton" type="submit">
Anmelden
</button>
</div>
</form>
</div>
</main>
);
} }
export default Register; export default Register;
\ No newline at end of file
growbros-frontend/src/pages/Wunschliste.tsx
+ 12
− 9
View file @ 6ba128b8
...@@ -43,15 +43,18 @@ function Wunschliste() { ...@@ -43,15 +43,18 @@ function Wunschliste() {
return ( return (
<> <>
<DropDownFilter <div style={{ margin: "20px" }}>
filterOnChange={handleSortOptions} <h2>Deine Wunschliste</h2>
options={[ <DropDownFilter
"neueste zuerst", filterOnChange={handleSortOptions}
"als nächstes anpflanzbar", options={[
"gerade anpflanzbar", "neueste zuerst",
]} "als nächstes anpflanzbar",
topic={"Sortierung der Pflanzen in der Wunschliste"} "gerade anpflanzbar",
/> ]}
topic={"Sortierung der Pflanzen in der Wunschliste"}
/>
</div>
<PlantsOverview plants={plants} /> <PlantsOverview plants={plants} />
</> </>
); );
......
growbros-frontend/src/stylesheets/DropDownFilter.css 0 → 100644
+ 21
− 0
View file @ 6ba128b8
.dropdown-filter label {
font-size: 20px;
margin-right: 20px;
}
.dropdown-filter select {
width: 40%;
padding: 10px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f9f9f9;
}
.dropdown-filter select option {
font-size: 15px;
}
\ No newline at end of file
growbros-frontend/src/stylesheets/RegisterAndLogin.css
+ 8
− 21
View file @ 6ba128b8
.register { .register {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: stretch;
} }
form { form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 25px; margin-left: 20px;
} }
.h2 { .h2 {
background-color: rgb(120, 147, 81); padding: 20px;
padding: 15px;
} }
.form-group { .form-group {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-content: stretch;
}
label {
margin:20px;
} }
.input { .input {
background-color: #ffffff; width: 60%;
background-color: #f9f9f9;
border-radius: 5px; border-radius: 5px;
color: #1a1a1a;
transition: none;
} }
.input:hover{ .input:hover{
...@@ -39,19 +31,14 @@ label { ...@@ -39,19 +31,14 @@ label {
.submitButton { .submitButton {
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
background-color: rgb(120, 147, 81); background-color: #f9f9f9;
color: #fcfdf7;
border: none;
font-size: 1em; font-size: 1em;
font-weight: 500; font-weight: bold;
line-height: unset;
transition: none;
} }
.submitButton:hover { .submitButton:hover {
border-color: #f2f2f2; border-color: darkgray;
background-color: rgb(252, 253, 247);
color: rgb(120, 147, 81);
} }
.error-message { .error-message {
......
growbros-frontend/src/stylesheets/Suche.css
+ 0
− 1
View file @ 6ba128b8
...@@ -6,7 +6,6 @@ input { ...@@ -6,7 +6,6 @@ input {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
font-size: 16px; font-size: 16px;
background-color: beige;
border: none; border: none;
} }
......
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