3 files changed, 102 insertions, 0 deletions
diff --git a/front/src/Authentication/ContextProvider.ts b/front/src/Authentication/ContextProvider.ts
new file mode 100644
index 0000000..040d22e
--- /dev/null
+++ b/front/src/Authentication/ContextProvider.ts
@@ -0,0 +1,38 @@
+import axios from "axios"
+import { createContext } from "react"
+import { BackendURL } from "../Config"
+import { User } from "./Models"
+
+export type Authentication = {
+    User: User
+    Token: string
+}
+
+const UserInfoURL = `${BackendURL}/auth`;
+
+export const AuthContext = createContext<User | null>(null);
+
+export function SaveState(data: Authentication | null, setCookie: (cookie: string) => void) {
+    if (data == null) return;
+    setCookie(data.Token);
+}
+
+export async function GetUserInfo(displayToken: string): Promise<User | null> {
+    if (!displayToken || displayToken.length == 0) return null;
+    try {
+        const { data, status } = await axios.get<User>(
+            UserInfoURL,
+            {
+                headers: { 
+                    Accept: "application/json",
+                    Authorization: `Bearer ${displayToken}`
+                }
+            }
+        );
+        if (status != 200) return null;
+        return data;
+    } catch (err) {
+        console.log(`Failed to get user info: ${err}`);
+        return null;
+    }
+}
diff --git a/front/src/Authentication/LoginPage.tsx b/front/src/Authentication/LoginPage.tsx
new file mode 100644
index 0000000..e98c506
--- /dev/null
+++ b/front/src/Authentication/LoginPage.tsx
@@ -0,0 +1,60 @@
+import axios from "axios";
+import { useContext, useState } from "react";
+import { useNavigate } from "react-router";
+import { BackendURL } from "../Config";
+import { Authentication, SaveState } from "./ContextProvider";
+import { useCookies } from 'react-cookie';
+import { GetLocalizedString } from "../Locales/Locales";
+import { LanguageContext } from "../Locales/Context";
+
+const LoginURL = `${BackendURL}/auth/login`;
+
+function LoginPage() {
+    const lang = useContext(LanguageContext);
+
+    const [username, setUsername] = useState<string>("");
+    const [passw, setPassw] = useState<string>("");
+    const navigate = useNavigate();
+
+    function SetAuthState(newAuthState: Authentication | null) {
+        if (newAuthState) {
+            console.log(`Logging in as ${newAuthState.User}...`);
+        } else {
+            console.log(`Logging out...`);
+        }
+        SaveState(newAuthState, (cookie: string) => {
+            document.cookie = `X-AUTH-TOKEN=${cookie}; path=/;`;
+        })
+    }
+
+    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={() => {
+                Login(username, passw, (data) => {
+                    SetAuthState(data);
+                    navigate("/");
+                    window.location.reload();
+                });
+            }}> { GetLocalizedString("Log in", lang) } </button>
+        </div>
+    );
+}
+
+async function Login(username: string, passw: string, onSuccess: (data: Authentication) => void) {
+    await axios.post<Authentication>(
+        LoginURL, {
+            Username: username,
+            Password: passw
+        }
+    ).then(resp => {
+        onSuccess(resp.data);
+    }).catch(err => {
+        console.log(`Failed to send a login responce: ${err}`);
+    });
+}
+
+export default LoginPage;
diff --git a/front/src/Authentication/Models.ts b/front/src/Authentication/Models.ts
new file mode 100644
index 0000000..1918b85
--- /dev/null
+++ b/front/src/Authentication/Models.ts
@@ -0,0 +1,4 @@
+export type User = {
+    Username: string,
+    Role: "user" | "editor"
+}