Major refactoring

client/src/components/navbar/navbar.css

@@ -39,6 +39,11 @@
     height: 50px;
 }
 
+.navbar .pages h2 {
+    display: inline-block;
+    font-size: 20px;
+}
+
 .navbar .profile-stuff img {
     vertical-align: middle;
     display: inline-block;

client/src/components/navbar/navbar.jsx

@@ -9,21 +9,48 @@ export async function handleLogout() {
     window.location.reload();
 }
 
-export function Navbar() {
+
+export function Navbar({editMode, setEditMode}) {
     const {userinfo} = useContext(ProfileContext)
+
+    function switchEditMode() {
+        if (editMode === true) {
+            setEditMode(false)
+        } else {
+            setEditMode(true)
+        }
+    }
+
+    let editButtonText = "Enter editmode"
+    if (editMode === true) {
+        editButtonText = "Leave editmode"
+    }
+
     return (
         <div className={"navbar"}>
             <div className={"pages"}>
+                <h2>Kristiania News</h2>
                 <Link to={"/"}><p>Home</p></Link>
-                <Link to={"/"}><p>Page 2</p></Link>
-                <Link to={"/"}><p>Page 3</p></Link>
+                {(userinfo && userinfo.usertype) === "kristiania" &&
+                    <>
+                        <Link to={"/article/new"}><p>Write new article</p></Link>
+                        <button onClick={switchEditMode}>{editButtonText}</button>
+                    </>
+                }
             </div>
 
             <div className={"profile-stuff"}>
-                <Link to={"/profile"}><p>Profile</p></Link>
-                <button onClick={handleLogout}>Log out</button>
-                {(userinfo.picture && userinfo.usertype !== "kristiania") &&
-                    <img src={userinfo.picture}/>
+                {userinfo &&
+                    <>
+                        <Link to={"/profile"}><p>Profile</p></Link>
+                        <button onClick={handleLogout}>Log out</button>
+                        {(userinfo.picture && userinfo.usertype !== "kristiania") &&
+                            <img src={userinfo.picture}/>
+                        }
+                    </>
+                }
+                {!userinfo &&
+                    <Link to={"/login"}>Login</Link>
                 }
             </div>
         </div>

client/src/hooks/loginProvider.jsx

@@ -2,6 +2,8 @@ import React, {useContext, useEffect, useState} from "react";
 import {fetchJSON} from "./global";
 import {Link, useNavigate, useParams} from "react-router-dom";
 import LoadingAnimation from "../pages/loadingpage/LoadingPage";
+import {sha256} from "../lib/sha256";
+import {randomString} from "../lib/randomString";
 
 export const ProfileContext = React.createContext({
     userinfo: undefined,
@@ -157,22 +159,3 @@ export function LoginCallback({reload}) {
     return <LoadingAnimation/>;
 }
 
-async function sha256(string) {
-    const binaryHash = await crypto.subtle.digest(
-        "SHA-256",
-        new TextEncoder("utf-8").encode(string)
-    );
-    return btoa(String.fromCharCode.apply(null, new Uint8Array(binaryHash)))
-        .split("=")[0]
-        .replace(/\+/g, "-")
-        .replace(/\//g, "_");
-}
-
-export function randomString(length) {
-    const possible = "ABCDEFGIKJKNKLBIELILNLA01234456789";
-    let result = "";
-    for (let i = 0; i < length; i++) {
-        result += possible.charAt(Math.floor(Math.random() * possible.length));
-    }
-    return result;
-}

client/src/index.jsx

@@ -3,10 +3,11 @@ import ReactDOM from "react-dom";
 import {BrowserRouter, Route, Routes} from "react-router-dom";
 import {fetchJSON} from "./hooks/global";
 import {LoginCallback, LoginProvider, ProfileContext,} from "./hooks/loginProvider";
-import {FrontPage} from "./pages/frontpage/frontpage";
+import {ArticleWrite, FrontPage} from "./pages/frontpage/frontpage";
 import LoadingAnimation from "./pages/loadingpage/LoadingPage";
 import "./index.css"
 import {ProfilePage} from "./pages/profilepage/profilepage";
+import {LoginPage} from "./pages/loginpage/loginPage";
 
 function Application() {
     const [loading, setLoading] = useState(true);
@@ -35,6 +36,8 @@ function Application() {
                 <Routes>
                     <Route path={"/"} element={<FrontPage reload={loadLoginInfo}/>}/>
                     <Route path={"/login/:provider"} element={<LoginProvider/>}/>
+                    <Route path={"/article/new"} element={<ArticleWrite/>}/>
+                    <Route path={"/login"} element={<LoginPage/>}/>
                     <Route
                         path={"/login/:provider/callback"}
                         element={<LoginCallback reload={loadLoginInfo}/>}

client/src/lib/randomString.js

@@ -0,0 +1,8 @@
+export function randomString(length) {
+    const possible = "ABCDEFGIKJKNKLBIELILNLA01234456789";
+    let result = "";
+    for (let i = 0; i < length; i++) {
+        result += possible.charAt(Math.floor(Math.random() * possible.length));
+    }
+    return result;
+}

client/src/lib/sha256.js

@@ -0,0 +1,10 @@
+export async function sha256(string) {
+    const binaryHash = await crypto.subtle.digest(
+        "SHA-256",
+        new TextEncoder("utf-8").encode(string)
+    );
+    return btoa(String.fromCharCode.apply(null, new Uint8Array(binaryHash)))
+        .split("=")[0]
+        .replace(/\+/g, "-")
+        .replace(/\//g, "_");
+}

client/src/pages/frontpage/frontpage.css

@@ -2,4 +2,49 @@
     width: fit-content;
     margin: auto;
     text-align: center;
+}
+
+
+.article-list {
+    width: 40vh;
+    border-right: black solid;
+    text-align: center;
+    height: 100vh;
+}
+
+.article-list input {
+    width: 30vh;
+    margin-top: 2vh;
+}
+
+#article-card {
+    margin: 10px;
+}
+
+main textarea {
+    width: 50vw;
+    height: 30vh;
+}
+
+main input {
+    width: 20vw;
+    height: 4vh;
+    font-size: 20px;
+}
+
+#article-card:hover {
+    background: black;
+    color: white;
+    transition: all ease-in-out .1s;
+    cursor: pointer;
+}
+
+.frontpage-container {
+    display: flex;
+}
+
+.frontpage-container main {
+    width: 50vw;
+    margin: auto;
+    margin-top: 0;
 }