roots again

Documentation/src/theme/Root.js

@@ -1,4 +1,3 @@
-//Root.js
 import React, { useState } from "react";
 import { signIn, auth } from "./pocketbase";
 
@@ -22,6 +21,79 @@ export default function Root({ children }) {
   });
 
   return (
-    <>{children}</>
+    <>
+      {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>
+      )}
+    </>
   );
 }