css changes + error handling

4 files changed, 69 insertions, 13 deletions

diff --git a/front/src/Authentication/ForbiddenPage.tsx b/front/src/Authentication/ForbiddenPage.tsx
new file mode 100644
index 0000000..477940d
--- /dev/null
+++ b/front/src/Authentication/ForbiddenPage.tsx
@@ -0,0 +1,15 @@
+import { useContext } from "react";
+import { LanguageContext } from "../Locales/Context";
+import { GetLocalizedString } from "../Locales/Locales";
+
+function ForbidenPage() {
+    const lang = useContext(LanguageContext);
+    return (
+        <div>
+            <h1> { GetLocalizedString("Forbidden", lang) } </h1>
+            <p> { GetLocalizedString("*forbidden*", lang) } </p>
+        </div>
+    );
+}
+
+export default ForbidenPage;
diff --git a/front/src/Authentication/LoginPage.tsx b/front/src/Authentication/LoginPage.tsx
index e673418..7a555fe 100644
--- a/front/src/Authentication/LoginPage.tsx
+++ b/front/src/Authentication/LoginPage.tsx
@@ -28,20 +28,22 @@ function LoginPage() {
 
     return (
         <div>
-            <h2> { GetLocalizedString("Username", lang) } </h2>
-            <input onChange={ev => setUsername(ev.target.value)} />
-            <h2> { GetLocalizedString("Password", lang) } </h2>
-            <input onChange={ev => setPassw(ev.target.value)} />
-            <button onClick={() => {
+            <p> { GetLocalizedString("*acc-prompt*", lang) } <a href="/register"> { GetLocalizedString("Click here", lang) }. </a> </p>
+            <div className="prompt">
+                <h2> { GetLocalizedString("Username", lang) } </h2>
+                <input onChange={ev => setUsername(ev.target.value)} />
+            </div>
+            <div className="prompt">
+                <h2> { GetLocalizedString("Password", lang) } </h2>
+                <input onChange={ev => setPassw(ev.target.value)} />
+            </div>
+            <button className="authButton" onClick={() => {
                 Login(username, passw, (data) => {
                     SetAuthState(data);
                     navigate("/");
                     window.location.reload();
                 });
             }}> { GetLocalizedString("Log in", lang) } </button>
-
-
-            <p> Don't have an account? <a href="/register"> Click here. </a> </p>
         </div>
     );
 }
diff --git a/front/src/Authentication/RegisterPage.tsx b/front/src/Authentication/RegisterPage.tsx
index 5c818f6..10864cd 100644
--- a/front/src/Authentication/RegisterPage.tsx
+++ b/front/src/Authentication/RegisterPage.tsx
@@ -1,3 +1,4 @@
+import './style.css';
 import axios, { AxiosError } from "axios";
 import { useContext, useState } from "react";
 import { useNavigate } from "react-router";
@@ -30,10 +31,15 @@ function RegisterPage() {
 
     return (
         <div>
-            <h2> { GetLocalizedString("Username", lang) } </h2>
-            <input onChange={ev => setUsername(ev.target.value)} />
-            <h2> { GetLocalizedString("Password", lang) } </h2>
-            <input onChange={ev => setPassw(ev.target.value)} />
+            <div className="prompt">
+                <h2> { GetLocalizedString("Username", lang) } </h2>
+                <input onChange={ev => setUsername(ev.target.value)} />
+            </div>
+            <p> { GetLocalizedString("*security-warning*", lang) } </p>
+            <div className="prompt">
+                <h2> { GetLocalizedString("Password", lang) } </h2>
+                <input onChange={ev => setPassw(ev.target.value)} />
+            </div>
             <button onClick={() => {
                 Register(username, passw, (data) => {
                     SetAuthState(data);
@@ -66,7 +72,8 @@ async function Register(username: string, passw: string, onSuccess: (data: Authe
                 return
             }
         }
-        return "An unexpected error occured"
+        onError("An unexpected error occured");
+        return;
     });
 }
 
diff --git a/front/src/Authentication/style.css b/front/src/Authentication/style.css
new file mode 100644
index 0000000..75f9df2
--- /dev/null
+++ b/front/src/Authentication/style.css
@@ -0,0 +1,32 @@
+.prompt {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+}
+
+.prompt > h2 {
+    margin-bottom: 0px;
+    margin-top: 0px;
+}
+
+.prompt > input {
+    width: 200px;
+    border: 0px;
+    border-bottom: 1px solid var(--colorscheme-gray);
+}
+
+.prompt > input:focus {
+    outline: none;
+}
+
+.authButton {
+    margin-top: 15px;
+    font-family: "LXGW Marker Gothic", sans-serif;
+    color: var(--colorscheme-gray);
+    padding: 3px;
+    min-width: 100px;
+    border: 2px solid var(--colorscheme-black);
+    background-color: var(--colorscheme-white);
+    cursor: pointer;
+}