Added login page and pocketbase validation

package-lock.json

@@ -12,6 +12,7 @@
         "@docusaurus/preset-classic": "3.7.0",
         "@mdx-js/react": "^3.0.0",
         "clsx": "^2.0.0",
+        "pocketbase": "^0.25.1",
         "prism-react-renderer": "^2.3.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
@@ -12146,6 +12147,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/pocketbase": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/pocketbase/-/pocketbase-0.25.1.tgz",
+      "integrity": "sha512-2IH0KLI/qMNR/E17C7BGWX2FxW7Tead+igLHOWZ45P56v/NyVT18Jnmddeft+3qWWGL1Hog2F8bc4orWV/+Fcg==",
+      "license": "MIT"
+    },
     "node_modules/postcss": {
       "version": "8.5.1",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.1.tgz",

package.json

@@ -18,6 +18,7 @@
     "@docusaurus/preset-classic": "3.7.0",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
+    "pocketbase": "^0.25.1",
     "prism-react-renderer": "^2.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

src/pocketbase.js

@@ -0,0 +1,26 @@
+import PocketBase from "pocketbase";
+
+//initialize pocketbase
+const app = (() => {
+  const POCKETBASE_URL = 'https://pocketbase-ai.wirediv.dev/';
+  return new PocketBase(POCKETBASE_URL);
+})();
+
+//pass authstore to be used to callback when the user is authenticated
+export const auth = app.authStore;
+
+//clears the auth and logs the user out
+export const logout = (afterAction = () => {}) => {
+  app.authStore.clear();
+  afterAction(null);
+};
+
+//method to authenticate the user with pocketbase
+export const signIn = async (email, password) => {
+  try {
+    await app.collection("users").authWithPassword(email, password);
+  } catch (err) {
+    console.error(err);
+    alert(err.message);
+  }
+};

src/theme/ColorModeToggle/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import ColorModeToggle from '@theme-original/ColorModeToggle';
+import {logout} from '@site/src/pocketbase';
+
+export default function ColorModeToggleWrapper(props) {
+  return (
+    <>
+      <ColorModeToggle {...props} />
+      <a style={{background: '#fd5469', color: 'white', paddingRight: 10, paddingLeft: 10, paddingBottom: 2, borderRadius: 5, marginLeft: 15, cursor: "pointer"}} onClick={() => logout(() => window.location.reload())}>
+        Logout
+      </a>
+    </>
+  );
+}

src/theme/Root.js

@@ -0,0 +1,99 @@
+import React, { useState } from "react";
+import { signIn, auth } from "@site/src/pocketbase";
+
+export default function Root({ children }) {
+  const [userAuth, setUserAuth] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    setLoading(true)
+    await signIn(email,password)
+    setLoading(false)
+  };
+
+  auth.onChange(async function (user) {
+    if (user !== null) {
+      setUserAuth(user);
+    }
+  });
+
+  return (
+    <>
+      {userAuth != "" ? (
+        <>{children}</>
+      ) : (
+        <div
+          style={{
+            flexGrow: 1,
+            display: "flex",
+            justifyItems: "center",
+            alignItems: "center",
+            marginRight: "auto",
+            marginLeft: "auto",
+            flexDirection: 'column'
+          }}
+        >
+          <form
+            onSubmit={handleSubmit}
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              width: "200px",
+              margin: "auto",
+            }}
+          >
+            <img src="img/combination-icon.png"  />
+            <h1 style={{marginLeft: 'auto', marginRight: 'auto'}}>Docs</h1>
+            <label htmlFor="email" style={{ marginBottom: "10px" }}>
+              Email:
+            </label>
+            <input
+              type="email"
+              id="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              style={{
+                marginBottom: "10px",
+                padding: "5px",
+                borderRadius: "5px",
+                border: "1px solid #ccc",
+              }}
+            />
+            <label htmlFor="password" style={{ marginBottom: "10px" }}>
+              Password:
+            </label>
+            <input
+              type="password"
+              id="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              style={{
+                marginBottom: "10px",
+                padding: "5px",
+                borderRadius: "5px",
+                border: "1px solid #ccc",
+              }}
+            />
+            <button
+              type="submit"
+              style={{
+                padding: "5px",
+                borderRadius: "5px",
+                border: "none",
+                backgroundColor: "#fd5367",
+                color: "white",
+                marginTop: '1rem'
+              }}
+              disabled={loading}
+            >
+              {loading ? 'Loading...':'Login'}
+            </button>
+          </form>
+        </div>
+      )}
+    </>
+  );
+}