Base frame for login version

src/app.tsx

@@ -1,9 +1,14 @@
 import './app.css';
 import ButtonGroup from "./buttons/buttonGroup.tsx";
 import SocialButtons from "./buttons/Socials.tsx";
+import { useAuth } from 'oidc-react';
 
 function App() {
-  return (
+  const auth = useAuth();
+
+  console.log(auth.userData);
+
+    return (
       <>
           <h1>Octubre</h1>
           <h2>Home of projects</h2>
@@ -14,6 +19,8 @@ function App() {
               This is a linking page. Click on one of the buttons to go to the specified project, website or subdomain.
           </p>
 
+          {auth.userData && <p>You are logged in!</p>}
+
           <div className="buttonGroup">
               <ButtonGroup
                   buttons={[["Home", "https://home.octubre.be", "Home Automation Platform using Home Assistant"], ["Cloud", "https://cloud.octubre.be", "Personal Office Infrastructure using Nextcloud"], ["Media", "https://media.octubre.be", "Multimedia management solution using Immich"], ["Blog", "https://blog.octubre.be", "Blog about this hobby project and it's development roadmap"], ["Me", "https://me.octubre.be", "My portfolio page including Github Projects"], ["Chat", "https://chat.octubre.be", "Federated chat instance using Matrix & Element"], ["Log 👷", "https://log.octubre.be", "Update log linked to the blog - Under construction"], ["Status", "https://status.octubre.be", "External status page of the different Octubre services"], ["Git", "https://git.octubre.be", "Forgejo based gitserver, alternative for my Github account"],["Fandom", "https://fandom.octubre.be", 'Website dedicated to fanart & creations about things I like'], ["Archive", "https://archive.octubre.be", "Separate website to host old, no longer maintained packages & websites"], ["Dev", "https://dev.octubre.be", "Development subdomain for alfa & beta releases"]]}/>

src/buttons/button.tsx

@@ -3,37 +3,39 @@ import styles from './Button.module.css';
 import * as React from "react";
 
 interface ButtonProps {
-  note: string;
+  note?: string;
   onClick: () => void;
   clicked?: boolean;
   title: string;
   right?: boolean;
   text?: string;
+  style?: React.CSSProperties;
 }
 
 const Button: React.FC<ButtonProps> = ({
-  note,
+  note = '',
   onClick,
   title,
   right = false,
   text = '',
+    style,
 }) => {
     const [isHovered, setIsHovered] = useState(false);
     const controlButtonNote = right ? styles.controlButtonNoteRight : styles.controlButtonNote;
 
     return (
-        <div className={styles.controlButtonContainer}>
+        <div className={styles.controlButtonContainer} style={style}>
             <button
                 aria-label={note}
                 className={styles.controlButton}
                 onMouseEnter={() => setIsHovered(true)}
                 onMouseLeave={() => setIsHovered(false)}
                 onClick={onClick}
+
             >
-                {/*<FontAwesomeIcon icon={faIcon} style={{color: clicked ? '#c084fc' : '#ffffff'}}/>*/}
                 {text}
             </button>
-            {isHovered &&
+            {isHovered  && note!='' &&
                 <span className={controlButtonNote}>
                     <div className={styles.tooltipHeader}>
                         <span className={styles.tooltipTitle}>{title}</span>

src/header/Header.module.css

@@ -0,0 +1,7 @@
+.Header{
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  text-align: right; /* override parent's center */
+  gap: 1rem;
+}

src/header/Header.tsx

@@ -0,0 +1,22 @@
+import styles from './themeSwitch.module.css';
+import styles2 from './Header.module.css';
+import ThemeSwitch from "./themeSwitch.tsx";
+import { useAuth } from 'oidc-react';
+
+const Header = () => {
+  const auth = useAuth(); // ✅ use the hook at the top level
+
+  return (
+    <div>
+      <div className={styles2.Header}>
+        <ThemeSwitch />
+        <button className={styles.button} onClick={() => auth.signIn()}>
+          Log in
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Header;
+

src/header/themeSwitch.module.css

@@ -3,15 +3,10 @@
     color: var(--foreground-color);
     background-color: var(--on-background-color-primary);
 
-  padding: 0.5rem 1rem;
   font-size: 1rem;
   cursor: pointer;
   border-radius: 6px;
   transition: background 0.3s, color 0.3s;
-
-    top: 1vh;
-    right: 1vw;
-    position: absolute;
 }
 
 .button:hover {

src/header/themeSwitch.tsx

@@ -8,7 +8,7 @@ const ThemeToggleButton = () => {
   const [theme, toggleTheme] = useTheme();
 
   return (
-      <button className={styles.button} onClick={toggleTheme} aria-label="Toggle dark mode">
+          <button className={styles.button} onClick={toggleTheme} aria-label="Toggle dark mode">
         {theme === 'dark' ? (
             <FontAwesomeIcon icon={faSun}/>
         ) : (

src/main.tsx

@@ -2,11 +2,25 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './app.tsx'
 import './main.css'
-import ThemeToggleButton from "./theme/themeSwitch.tsx";
+import {AuthProvider} from 'oidc-react';
+import Header from "./header/Header.tsx";
+
+const oidcConfig = {
+  onSignIn: () => {
+    // Redirect?
+  },
+  authority: 'https://auth.octubre.be',
+  clientId: '', // TODO Paste Client ID & set to Public
+  redirect_uri: 'https://octubre.be',
+  autoSignIn: false,
+  autoSignOut: false
+};
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-      <ThemeToggleButton/>
-    <App/>
-  </StrictMode>,
+    <AuthProvider {...oidcConfig}>
+      <Header/>
+      <App/>
+    </AuthProvider>
+  </StrictMode>
 )