commit working state

src/components/admin/adminPanel.tsx

@@ -0,0 +1,32 @@
+'use client'
+import { ReactNode, useContext } from "react";
+import { AuthContext, AuthProps } from "@/providers/providers";
+import SomeServerSubComponent from "./serverContextUserTest";
+
+interface Props {
+    children?: ReactNode;
+    auth?: AuthProps;
+}
+
+export default function AdminPanel(props:Props){
+    
+    return (
+        <div className="AdminPanelWrapper">
+            <h1>Super Secret Admin Panel!</h1>
+            <h2>this is where we use the context test:<SomeSubComponent></SomeSubComponent></h2>
+            <SomeServerSubComponent></SomeServerSubComponent>
+            <section>
+                {props.children}
+            </section>
+        </div>
+    )
+}
+
+function SomeSubComponent(props:Props){
+    let { test, auth } = useContext(AuthContext);
+    return (
+        <span>{test}{JSON.stringify(auth)}</span>
+    );
+}
+
+

src/components/admin/authHandler.tsx

@@ -0,0 +1,47 @@
+'use server'
+import { cookies } from "next/headers";
+// import { useState } from "react";
+import LoginForm from "./loginForm";
+import { koekValid } from "@/app/lib/actions";
+import { constructAPIUrl } from "@/util/Utils";
+import AdminPanel from "./adminPanel";
+import { ReactNode } from "react";
+import { AuthContext, AuthProps } from "@/providers/providers";
+import ClientAuthHandler from "./clientAuthHandler";
+
+
+interface Props {
+    children?: ReactNode;
+    params?: any;
+    requiredRole?: number;
+} // We interfacing lads
+
+
+
+export default async function AuthHandler(props: Props) {
+    const protoKoek = await cookies().get('auth')?.value;
+    const koek = decodeURIComponent(protoKoek?protoKoek:"");
+    console.log("koekje:" + koek)
+    let p:AuthProps = {
+        test:"not pog"
+    };
+    if(koek){
+        const kd = JSON.parse(koek);
+        if(kd.id && kd.token && kd.user_id){
+            p = {
+                test:"success!",
+                auth: {
+                    id:kd.id,
+                    token:kd.token,
+                    user_id:kd.user_id
+                }
+            }
+        }
+    }
+
+    return (
+        <div className="flex flex-row">
+            {!(koek && await koekValid(koek)) ? <LoginForm>{ }</LoginForm> : <ClientAuthHandler authProps={p}><section>{props.children}<div>signed in! :D</div></section></ClientAuthHandler>}
+        </div>
+    );
+}

src/components/admin/clientAuthHandler.tsx

@@ -0,0 +1,16 @@
+'use client'
+import { AuthContext, AuthProps } from "@/providers/providers";
+import { ReactNode, createContext } from "react"
+
+type Props = {
+    children?:ReactNode;
+    authProps:AuthProps
+}
+
+
+export default function ClientAuthHandler(props:Props){
+    
+    return (
+        <AuthContext.Provider value={props.authProps}>{props.children}</AuthContext.Provider>
+    )
+}

src/components/admin/loginForm.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { authenticate } from "@/app/lib/actions";
+import { AuthContext } from "@/providers/providers";
+import { constructAPIUrl } from "@/util/Utils";
+import { cookies } from "next/headers";
+import { createContext, useState } from "react";
+import { useFormState, useFormStatus } from "react-dom";
+
+
+// async function authenticate(){
+//     const url = await constructAPIUrl("auth");
+//     const auth = await fetch(url);
+// }
+
+
+export default function LoginForm(){
+    const [loginResult, dispatch] = useFormState(authenticate, undefined);
+
+    // if(loginResult?.cookie && loginResult.cookie && loginResult.cookie['auth']){
+    //     cookies().set('auth', loginResult.cookie['auth'])
+    // }
+
+    return (
+    <form className="bg-background-400 border-4 border-primary-500 drop-shadow-md w-fit p-3 rounded-lg flex flex-col gap-1" action={dispatch}>
+        <label htmlFor="input_username">Username</label>
+        <input type="text" name="input_username" id="input_username" className="bg-secondary border-2 border-primary rounded-lg drop-shadow-md" />
+        <label htmlFor="input_password">Password</label>
+        <input type="password" name="input_password" id="input_password" className="bg-secondary outline-primary border-2 border-primary rounded-lg drop-shadow-md shadow-inner shadow-primary" />
+        <LoginButton></LoginButton>
+        <div>{loginResult?.errorMessage && <p>{loginResult?.errorMessage}</p>}</div>
+        <div className="flex flex-col w-[400px] break-words ">
+            <p>{""+loginResult?.cookie}</p>
+        </div>
+    </form>);
+}
+
+function LoginButton() {
+    const { pending } = useFormStatus()
+   
+    return (
+      <button aria-disabled={pending} className="mr-auto bg-secondary-200 outline outline-2 border-5 p-3 mt-3 rounded-lg outline-secondary-500  shadow-primary" type="submit">
+        {!pending ? 'Sign In' : 'Pending Sign In...'}
+      </button>
+    )
+  }

src/components/admin/serverContextUserTest.tsx

@@ -0,0 +1,14 @@
+import { AuthContext, AuthProps } from "@/providers/providers";
+import { ReactNode, useContext } from "react";
+
+interface Props {
+    children?: ReactNode;
+    auth?: AuthProps;
+}
+
+export default function SomeServerSubComponent(props:Props){
+    let { test, auth } = useContext(AuthContext);
+    return (
+        <span>{test}{JSON.stringify(auth)}</span>
+    );
+}

src/components/auth/authComponents.tsx

@@ -0,0 +1,16 @@
+import { AuthContext } from "@/providers/providers";
+import { ReactNode, useContext } from "react"
+
+type Props = {
+    children:ReactNode;
+}
+
+
+
+export default function AdminOnlyComponent(p:Props){
+    const context = useContext(AuthContext)
+    return 
+    (<div>
+        
+    </div>);
+}

src/components/news/article-preview.module.css

@@ -3,6 +3,8 @@
     flex-direction: row;
     box-sizing: content-box;
     min-height:128px;
+    padding-top: 0;
+    background-color: #1a4457;
     /* background-color: aqua; */
     /* max-width:25vw; */
     /* outline: auto; */
@@ -20,4 +22,5 @@
 .summary{
     /* flex-shrink: 1; */
     padding:8px;
+    padding-top:0px;
 }

src/components/news/article-preview.tsx

@@ -4,16 +4,35 @@ import styles from "./article-preview.module.css"
 import bg from "public/placeholder-square.png"
 import { ReactNode } from "react"
 import { Style } from "util";
+import Link from "next/link";
+import { redirect } from 'next/navigation';
+import { Router } from "next/router";
+import { useRouter } from 'next/navigation'
+import { truncateString } from "@/util/Utils";
 
 
-export default function ArticlePreview(params: { id: string|undefined, title: string|undefined, content: string|undefined, date?:string|undefined } ){
-    return <div className={styles.previewbox}>
-        <div className={styles.imagecontainer}>
+type Props = {
+    id?:string
+    title?:string
+    content?:string
+    date?:string
+}
+
+ 
+
+export default function ArticlePreview(props:Props){
+    // if (!props.content)
+    return ( 
+        <section className={styles.previewbox}>
+            <div className={styles.imagecontainer}></div>
             
-        </div>
-        <div className={styles.summary}>
-            <h2>{params.title}</h2><Tagbar/>
-            <p>{params.content}</p>
-        </div>
-    </div>;
+            <div className={`${styles.summary} flex flex-col justify-between p-0`}>
+                <section className="w-[100%]">
+                    <span className="inline-block"><h2><Link href={`/article/${props.id}`}>{props.title}</Link></h2></span>
+                    <p>{truncateString(props.content,255)}</p>
+                </section>
+                <Tagbar/>
+            </div>
+        </section>
+    );
 }

src/components/news/article.module.css

@@ -9,7 +9,7 @@
 
 }
 .imagecontainer{
-    min-width:100%;
+    min-width:fit-content;
     min-height:256px;
     /* flex-grow: 10; */
     background-image: url(/placeholder-square.png);

src/components/news/article.tsx

@@ -1,5 +1,5 @@
 import Tagbar from "@/components/news/tagbar";
-import "public/global.css"
+import "/public/global.css"
 import "@/app/index.css"
 import styles from "./article.module.css"
 
@@ -7,13 +7,11 @@ import styles from "./article.module.css"
 export default function Article(params: { id: string|undefined, title: string|undefined, content: string|undefined, date?:string|undefined } ) {
     return (
         <article id={`post-${params.id}`}>
-            <h1 className=".article-title">{params.title}</h1>
-            <Tagbar/>
-            <div className={styles.imagecontainer}/>
-            
-            <p className=".article-content">{params.content}</p>
-            <section className=".article-date">{params.date}</section>
-            <br/>
+            <h1 className=".article-title pl-5 pr-5">{params.title}</h1>
+            <div className={`${styles.imagecontainer} m-5`}/>
+            <div className="pl-5 pr-5"><Tagbar/></div>
+            <p className=".article-content p-5">{params.content}</p>
+            <section className=".article-date">{params.date}</section> <br/>
         </article>
     );
 }

src/components/news/tagbar.module.css

@@ -10,5 +10,5 @@
     *display: inline; 
 }
 .tagbar{
-    margin: 0px 0px 4px 0px;
+    margin: 0px 0px 0px 0px;
 }

src/components/news/tagbar.tsx

@@ -1,7 +1,7 @@
 import styles from "./tagbar.module.css"
 
 const tagItems = ["tag1", "tag2", "tag3"];
-const tagList = tagItems.map(value => <li key={value} className={styles.navItem}><a>{value}</a></li>);
+const tagList = tagItems.map(value => <li key={value} className={styles.navItem}><a href={`/tagged/${value}`}>{value}</a></li>);
 
 
 export default function Tagbar() {