First Prototype Frontend (Not Finished)
This commit is contained in:
brausjonas
@@ -2,15 +2,33 @@ import CourseNameInput from "@/components/CourseNameInput";
|
||||
import SemesterRangeInput from "@/components/SemesterRangeInput";
|
||||
import InputFormButtons from "@/components/InputFormButtons";
|
||||
import DozentSelector from "@/components/DozentSelector";
|
||||
import Button from "@/components/Button";
|
||||
import {useRouter} from "next/router";
|
||||
|
||||
export default function InputForm() {
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="inputForm round-border">
|
||||
<CourseNameInput/>
|
||||
<SemesterRangeInput/>
|
||||
<div className="semesterRangeInput">
|
||||
<div className="semesterDateLables">
|
||||
<p className="semesterDateLable">Semesterstart</p>
|
||||
<p className="semesterDateLable">Semesterende</p>
|
||||
</div>
|
||||
<div className="semesterDateInputPair">
|
||||
<input type="date" id="start" name="trip-start"/>
|
||||
<p className="inputFieldSeperator">-</p>
|
||||
<input type="date" id="start" name="trip-start"/>
|
||||
</div>
|
||||
</div>
|
||||
<DozentSelector/>
|
||||
<InputFormButtons/>
|
||||
<div id="buttons">
|
||||
<Button color="red" width="100px" height="30px" text="Abbrechen" onClick={() => {router.back()}}/>
|
||||
<Button color="green" width="100px" height="30px" text="Erstellen"/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
import Button from './Button';
|
||||
|
||||
export default function InputFormButtons() {
|
||||
return (
|
||||
<>
|
||||
<div id="buttons">
|
||||
<Button color="red" width="100px" height="30px" text="Abbrechen"/>
|
||||
<Button color="green" width="100px" height="30px" text="Erstellen"/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,57 +1,63 @@
|
||||
import {useState} from "react";
|
||||
import Button from "@/components/Button";
|
||||
import {NextResponse} from "next/server";
|
||||
import Link from "next/link";
|
||||
import {useRouter} from "next/router";
|
||||
|
||||
export default function Login() {
|
||||
|
||||
let url = "http://localhost:8080/users"
|
||||
let url = "http://localhost:8080/users"
|
||||
|
||||
async function on_login_click() {
|
||||
url += "?mail=" + inputUserName + "&password=" + inputPassword;
|
||||
async function on_login_click() {
|
||||
url += "?mail=" + inputUserName + "&password=" + inputPassword;
|
||||
|
||||
let response = await fetch(url, {
|
||||
method: "GET",
|
||||
});
|
||||
let response = await fetch(url, {
|
||||
method: "GET",
|
||||
});
|
||||
|
||||
let reader = response.body.getReader();
|
||||
let value = String.fromCharCode.apply(null, ((await reader.read()).value))
|
||||
if(value != "failed")
|
||||
{
|
||||
localStorage.setItem("sessionid", value)
|
||||
}
|
||||
else
|
||||
{
|
||||
setInputPassword("");
|
||||
setInputUserName("");
|
||||
setHint("wrong login credentials")
|
||||
setBackgroundColor("rgb(171,89,89)")
|
||||
}
|
||||
let reader = response.body.getReader();
|
||||
let value = String.fromCharCode.apply(null, ((await reader.read()).value))
|
||||
if (value != "failed") {
|
||||
localStorage.setItem("sessionid", value);
|
||||
|
||||
await router.push("/semesteroverview")
|
||||
|
||||
} else {
|
||||
setInputPassword("");
|
||||
setInputUserName("");
|
||||
setHint("wrong login credentials")
|
||||
}
|
||||
}
|
||||
|
||||
const [inputUserName, setInputUserName] = useState("")
|
||||
const [inputPassword, setInputPassword] = useState("")
|
||||
const [hint, setHint] = useState("type here")
|
||||
const [backgroundColor, setBackgroundColor] = useState("rgb(255, 255, 255)")
|
||||
const [inputUserName, setInputUserName] = useState("")
|
||||
const [inputPassword, setInputPassword] = useState("")
|
||||
const [hint, setHint] = useState("type here")
|
||||
const [backgroundColor, setBackgroundColor] = useState("rgb(255, 255, 255)")
|
||||
const router = useRouter()
|
||||
|
||||
return (
|
||||
<div className="border">
|
||||
<login className={"login-container"}>
|
||||
<p className={"font-big-fat placement"}>Login</p>
|
||||
<div className={"placement"}>
|
||||
<br/>
|
||||
<p className={"font-kinda-big"}>Username</p>
|
||||
<input type="text" value={inputUserName} onChange={e => setInputUserName(e.target.value)} placeholder={hint} className="input input-bordered input-sm w-full max-w-xs"
|
||||
style={{
|
||||
backgroundColor: backgroundColor
|
||||
}}/>
|
||||
<br/>
|
||||
<p className={"font-kinda-big"}>Password</p>
|
||||
<input type="password" value={inputPassword} onChange={e => setInputPassword(e.target.value)} placeholder={hint} className="input input-bordered input-sm w-full max-w-xs"
|
||||
style={{
|
||||
backgroundColor: backgroundColor
|
||||
}}/>
|
||||
</div>
|
||||
<Button text={"Login"} color={"#e2001a"} width={"25px"} onClick={() => on_login_click()}/>
|
||||
</login>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="border">
|
||||
<login className={"login-container"}>
|
||||
<p className={"font-big-fat placement"}>Login</p>
|
||||
<div className={"placement"}>
|
||||
<br/>
|
||||
<p className={"font-kinda-big"}>Username</p>
|
||||
<input type="text" value={inputUserName} onChange={e => setInputUserName(e.target.value)}
|
||||
placeholder={hint} className="input input-bordered input-sm w-full max-w-xs"
|
||||
style={{
|
||||
backgroundColor: backgroundColor
|
||||
}}/>
|
||||
<br/>
|
||||
<p className={"font-kinda-big"}>Password</p>
|
||||
<input type="password" value={inputPassword} onChange={e => setInputPassword(e.target.value)}
|
||||
placeholder={hint} className="input input-bordered input-sm w-full max-w-xs"
|
||||
style={{
|
||||
backgroundColor: backgroundColor
|
||||
}}/>
|
||||
</div>
|
||||
<Button text={"Login"} color={"#e2001a"} width={"25px"} onClick={() => on_login_click()}/>
|
||||
|
||||
</login>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,17 +1,8 @@
|
||||
export default function SemesterRangeInput(){
|
||||
|
||||
return(
|
||||
<>
|
||||
<div className="semesterRangeInput">
|
||||
<div className="semesterDateLables">
|
||||
<p className="semesterDateLable">Semesterstart</p>
|
||||
<p className="semesterDateLable">Semesterende</p>
|
||||
</div>
|
||||
<div className="semesterDateInputPair">
|
||||
<input className="semesterDateInput"/>
|
||||
<p className="inputFieldSeperator">-</p>
|
||||
<input className="semesterDateInput"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import StatusBar from "@/components/StatusBar";
|
||||
import React from "react";
|
||||
|
||||
export default function SemesterTile(p)
|
||||
{
|
||||
return (
|
||||
<div onClick={() => p.onClick()} className={"semester-tile"}>
|
||||
<p>{p.text}</p>
|
||||
<StatusBar progress={0}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -12,9 +12,9 @@ export default function StatusBar(p)
|
||||
return (
|
||||
<div className={"step-container"}>
|
||||
<div className={"steps"}>
|
||||
<span className={"step " + classNames[index] + " " + actives[0]}>1</span>
|
||||
<span className={"step " + classNames[index] + " " + actives[1]}>2</span>
|
||||
<span className={"step " + classNames[index] + " " + actives[2]}>3</span>
|
||||
<span className={"step " + classNames[0] + " " + actives[0]}>1</span>
|
||||
<span className={"step " + classNames[1] + " " + actives[1]}>2</span>
|
||||
<span className={"step " + classNames[2] + " " + actives[2]}>3</span>
|
||||
<div className={"progress-bar " + classNames[index]}
|
||||
style={{
|
||||
width: p.progress + "%"
|
||||
|
||||
Reference in New Issue
Block a user