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>
+    );
+}