miolo 3.0.0-beta.21 → 3.0.0-beta.210

package/template/src/cli/pages/IndexOffline.jsx

@@ -0,0 +1,13 @@
+import { Route, Routes } from "react-router"
+
+import Login from "#cli/pages/offline/Login.jsx"
+
+export default function IndexOffline() {
+  return (
+    <Routes>
+      <Route index element={<Login />} />
+
+      <Route path="*" element={<Login />} />
+    </Routes>
+  )
+}

package/template/src/cli/pages/IndexOnline.jsx

@@ -0,0 +1,18 @@
+import { Route, Routes } from "react-router"
+import MainLayout from "#cli/layout/main-layout.jsx"
+import Dashboard from "#cli/pages/dash/Dashboard.jsx"
+import Security from "#cli/pages/security/Security.jsx"
+
+export default function IndexOnline() {
+  return (
+    <Routes>
+      <Route path={"/"} element={<MainLayout />}>
+        <Route index element={<Dashboard />} />
+
+        <Route path={"security"} element={<Security />} />
+
+        <Route path={"*"} element={<Dashboard />} />
+      </Route>
+    </Routes>
+  )
+}

package/template/src/cli/pages/dash/Dashboard.jsx

@@ -0,0 +1,29 @@
+import useBreads from "#cli/context/data/useBreads.mjs"
+
+import TodosProvider from "../todos/context/TodosProvider.jsx"
+import Todos from "../todos/Todos.jsx"
+
+export default function Dashboard() {
+  useBreads(() => {
+    return [["Inicio"]]
+  }, [])
+
+  return (
+    <div className="flex flex-1 flex-col gap-4 p-4">
+      <TodosProvider>
+        <Todos />
+      </TodosProvider>
+      {/*
+      <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+        <div className="bg-muted/50 aspect-video rounded-xl">
+          
+        </div>
+        <div className="bg-muted/50 aspect-video rounded-xl" />
+        <div className="bg-muted/50 aspect-video rounded-xl" />
+      </div>
+      <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min">
+      </div>
+      */}
+    </div>
+  )
+}

package/template/src/cli/pages/offline/Login.jsx

@@ -0,0 +1,43 @@
+import { LoginForm } from "./LoginForm.jsx"
+
+const Login = () => {
+  return (
+    <div className="grid min-h-svh lg:grid-cols-2">
+      <div className="flex flex-col gap-4 p-6 md:p-10">
+        <div className="flex justify-center gap-2 md:justify-start">
+          <img
+            src="/static/img/miolo_name.png"
+            alt="miolo logo"
+            className="absolute inset-0 h-40 w-40 object-contain dark:brightness-[0.8] "
+          />
+
+          {/*
+          <a href="#" className="flex items-center gap-2 font-medium">
+            <div className="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md">
+              <GalleryVerticalEnd className="size-4" />
+            </div>
+            Acme Inc.
+          
+          </a>
+          */}
+        </div>
+        <div className="flex flex-1 items-center justify-center">
+          <div className="w-full max-w-xs">
+            <LoginForm
+            /* TODO orgotLink*/
+            />
+          </div>
+        </div>
+      </div>
+      <div className="bg-muted relative hidden lg:block">
+        <img
+          src="/static/img/miolo_logo.png"
+          alt="miolo logo"
+          className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.8] dark:grayscale"
+        />
+      </div>
+    </div>
+  )
+}
+
+export default Login

package/template/src/cli/pages/offline/LoginForm.jsx

@@ -0,0 +1,115 @@
+import { useCallback, useState } from "react"
+import { Input } from "#cli/components/ui/input.jsx"
+import { Label } from "#cli/components/ui/label.jsx"
+import { Button } from "#cli/components/ui/patched/button.jsx"
+import useSessionContext from "#cli/context/session/useSessionContext.mjs"
+import { cn } from "#cli/lib/utils.mjs"
+
+export function LoginForm({ className, forgotLink }) {
+  const { localLogin, googleLogin } = useSessionContext()
+  const [email, setEmail] = useState("")
+  const [pwd, setPwd] = useState("")
+  const [valid, setValid] = useState(true)
+
+  const handleLocalLogin = useCallback(
+    async (ev) => {
+      ev.preventDefault()
+      const data = await localLogin({ username: email, password: pwd })
+      setValid(data?.authenticated === true)
+    },
+    [email, pwd, localLogin]
+  )
+
+  return (
+    <>
+      <form className={cn("flex flex-col gap-6", className)} onSubmit={handleLocalLogin}>
+        <div className="flex flex-col items-center gap-2 text-center">
+          <h1 className="text-2xl font-bold">miolo-sample</h1>
+        </div>
+        <br />
+        <div className="grid gap-6">
+          <div className="grid gap-3">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="m@example.com"
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className={cn(valid ? "valid" : "invalid")}
+            />
+          </div>
+          <div className="grid gap-3">
+            <div className="flex items-center">
+              <Label htmlFor="password">Password</Label>
+            </div>
+            <Input
+              id="password"
+              type="password"
+              required
+              value={pwd}
+              onChange={(e) => setPwd(e.target.value)}
+              className={cn(valid ? "valid" : "invalid")}
+            />
+          </div>
+          {!valid && (
+            <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center">
+              <p className="text-red-500 text-sm">Email o contraseña incorrectos</p>
+            </div>
+          )}
+          <Button type="submit" className="w-full">
+            Login
+          </Button>
+          {forgotLink !== undefined ? (
+            <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center">
+              <a
+                href={forgotLink}
+                className="bg-background text-muted-foreground relative z-10 px-2 ml-auto text-sm underline-offset-4 hover:underline"
+              >
+                Has olvidado la contraseña?
+              </a>
+            </div>
+          ) : null}
+        </div>
+        {/*
+        <div className="text-center text-sm">
+          Don&apos;t have an account?{" "}
+          <a href="#" className="underline underline-offset-4">
+            Sign up
+          </a>
+        </div>
+        */}
+      </form>
+
+      <div className="mt-8 after:border-border relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t">
+        <span className="bg-background text-muted-foreground relative z-10 px-2">Or</span>
+      </div>
+      <Button variant="outline" className="w-full mt-8" onClick={googleLogin}>
+        <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+          <title>Google</title>
+          <path
+            d="M23.75,16A7.7446,7.7446,0,0,1,8.7177,18.6259L4.2849,22.1721A13.244,13.244,0,0,0,29.25,16"
+            fill="#00ac47"
+          />
+          <path
+            d="M23.75,16a7.7387,7.7387,0,0,1-3.2516,6.2987l4.3824,3.5059A13.2042,13.2042,0,0,0,29.25,16"
+            fill="#4285f4"
+          />
+          <path
+            d="M8.25,16a7.698,7.698,0,0,1,.4677-2.6259L4.2849,9.8279a13.177,13.177,0,0,0,0,12.3442l4.4328-3.5462A7.698,7.698,0,0,1,8.25,16Z"
+            fill="#ffba00"
+          />
+          <polygon fill="#2ab2db" points="8.718 13.374 8.718 13.374 8.718 13.374 8.718 13.374" />
+          <path
+            d="M16,8.25a7.699,7.699,0,0,1,4.558,1.4958l4.06-3.7893A13.2152,13.2152,0,0,0,4.2849,9.8279l4.4328,3.5462A7.756,7.756,0,0,1,16,8.25Z"
+            fill="#ea4435"
+          />
+          <polygon fill="#2ab2db" points="8.718 18.626 8.718 18.626 8.718 18.626 8.718 18.626" />
+          <path d="M29.25,15v1L27,19.5H16.5V14H28.25A1,1,0,0,1,29.25,15Z" fill="#4285f4" />
+        </svg>
+        Login with Google
+      </Button>
+    </>
+  )
+}

package/template/src/cli/pages/security/Security.jsx

@@ -0,0 +1,39 @@
+import { useCallback } from "react"
+import useBreads from "#cli/context/data/useBreads.mjs"
+import useSessionContext from "#cli/context/session/useSessionContext.mjs"
+import useUIContext from "#cli/context/ui/useUIContext.mjs"
+import SecurityForm from "./SecurityForm.jsx"
+
+export default function Security() {
+  const { session, fetcher } = useSessionContext()
+  const { toast } = useUIContext()
+
+  const passwordChange = useCallback(
+    async (pwds) => {
+      try {
+        const params = { username: session.username, passwords: pwds }
+        const resp = await fetcher.post("/user/chpwd", params)
+        if (resp.ok === true) {
+          toast.success(resp.data.msg)
+        } else {
+          toast.error(resp.error)
+        }
+
+        return { ok: resp.ok, error: resp?.error }
+      } catch (e) {
+        return { ok: false, error: `Error al modificar la contraseña: ${e}` }
+      }
+    },
+    [fetcher, session.username, toast]
+  )
+
+  useBreads(() => [["/", "Inicio"], ["Seguridad"]], [])
+
+  return (
+    <div className="flex flex-1 items-center justify-center">
+      <div className="w-full max-w-xs">
+        <SecurityForm onChangePassword={passwordChange} />
+      </div>
+    </div>
+  )
+}

package/template/src/cli/pages/security/SecurityForm.jsx

@@ -0,0 +1,106 @@
+import { useCallback, useEffect, useState } from "react"
+import { Input } from "#cli/components/ui/input.jsx"
+import { Label } from "#cli/components/ui/label.jsx"
+import { Button } from "#cli/components/ui/patched/button.jsx"
+import { cn } from "#cli/lib/utils.mjs"
+
+export default function SecurityForm({ className, onChangePassword }) {
+  const [current, setCurrent] = useState("")
+  const [pwdNew, setPwdNew] = useState("")
+  const [pwdRepeat, setPwdRepeat] = useState("")
+  const [error, setError] = useState(true)
+  const [ready, setReady] = useState(false)
+
+  const validate = useCallback(() => {
+    if (!current || !pwdNew || !pwdRepeat) {
+      //setError('Todos los campos son obligatorios')
+      return false
+    }
+    if (pwdNew === current) {
+      setError("La contraseña nueva no puede ser igual a la actual")
+      return false
+    }
+    if (pwdNew !== pwdRepeat) {
+      setError("Las contraseñas no coinciden")
+      return false
+    }
+    setError(undefined)
+    return true
+  }, [pwdNew, pwdRepeat, current])
+
+  const handleCallback = useCallback(
+    async (ev) => {
+      ev.preventDefault()
+      if (!ready) return
+
+      const { ok, error } = await onChangePassword({ current: current, new: pwdNew })
+
+      if (ok === true) {
+        setError(undefined)
+      } else {
+        setError(error)
+      }
+    },
+    [onChangePassword, current, pwdNew, ready]
+  )
+
+  useEffect(() => {
+    const ok = validate()
+    setReady(ok)
+  }, [validate])
+
+  return (
+    <form className={cn("flex flex-col gap-6", className)} onSubmit={handleCallback}>
+      <div className="flex flex-col items-center gap-2 text-center">
+        <h2 className="font-bcurrent">Cambiar contraseña</h2>
+      </div>
+      <div className="grid gap-6">
+        <div className="grid gap-3">
+          <Label htmlFor="current">Contraseña actual</Label>
+          <Input
+            id="current"
+            type="password"
+            required
+            value={current}
+            onKeyDown={validate}
+            onChange={(e) => setCurrent(e.target.value)}
+          />
+        </div>
+        <div className="grid gap-3">
+          <div className="flex items-center">
+            <Label htmlFor="new">Contraseña nueva</Label>
+          </div>
+          <Input
+            id="new"
+            type="password"
+            required
+            value={pwdNew}
+            onKeyDown={validate}
+            onChange={(e) => setPwdNew(e.target.value)}
+          />
+        </div>
+        <div className="grid gap-3">
+          <div className="flex items-center">
+            <Label htmlFor="repeat">Repita la contraseña nueva</Label>
+          </div>
+          <Input
+            id="repeat"
+            type="password"
+            required
+            value={pwdRepeat}
+            onKeyDown={validate}
+            onChange={(e) => setPwdRepeat(e.target.value)}
+          />
+        </div>
+        {error && (
+          <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center">
+            <p className="text-red-500 text-sm">{error}</p>
+          </div>
+        )}
+        <Button type="submit" className="w-full" disabled={!ready}>
+          Cambiar contraseña
+        </Button>
+      </div>
+    </form>
+  )
+}

package/template/src/cli/pages/todos/TodoActions.jsx

@@ -0,0 +1,99 @@
+import { Bomb, Bone, CircleQuestionMark, Phone, RefreshCw } from "lucide-react"
+import { useState } from "react"
+import { Field, FieldContent, FieldLabel } from "#cli/components/ui/field.jsx"
+import { Button } from "#cli/components/ui/patched/button.jsx"
+import { Switch } from "#cli/components/ui/switch.jsx"
+
+import useTodosContext from "./context/useTodosContext.mjs"
+
+const throwAnError = () => {
+  const obj = {}
+  const _foo = obj.foo.bar
+}
+
+export default function TodoActions() {
+  const {
+    refreshTodoList,
+    checkLastHours,
+    insertFakeTodo,
+    canEdit,
+    useCrud,
+    setUseCrud,
+    pingSocket
+  } = useTodosContext()
+  const [hours, _setHours] = useState(1)
+
+  return (
+    <div className="flex flex-col gap-4 p-4">
+      <h1 className="text-3xl font-bold text-center mb-8 text-gray-800 dark:text-white">Actions</h1>
+
+      <div className="flex flex-col gap-2 mt-4">
+        <Button
+          onClick={refreshTodoList}
+          className={`px-4 py-6  text-white rounded-lg transition-colors flex items-center gap-2 cursor-pointer ${useCrud ? "bg-pink-500 hover:bg-pink-400" : "bg-blue-500 hover:bg-blue-400"}`}
+        >
+          <RefreshCw size={18} />
+          Refresh
+        </Button>
+        <Button
+          onClick={() => insertFakeTodo()}
+          disabled={!canEdit}
+          className={`px-4 py-6  text-white rounded-lg transition-colors flex items-center gap-2 cursor-pointer ${useCrud ? "bg-pink-500 hover:bg-pink-400" : "bg-blue-500 hover:bg-blue-400"}`}
+        >
+          <Bone size={18} />
+          Insert fake
+        </Button>
+
+        <Button
+          onClick={() => checkLastHours({ hours })}
+          className="px-4 py-6 bg-pink-500 text-white rounded-lg hover:bg-pink-400 transition-colors flex items-center gap-2 cursor-pointer"
+        >
+          <CircleQuestionMark size={18} />
+          {`How many todos I have added in the last ${hours} hours?`}
+        </Button>
+        <Button
+          onClick={() => throwAnError()}
+          className="px-4 py-6 bg-pink-500 text-white rounded-lg hover:bg-pink-400 transition-colors flex items-center gap-2 cursor-pointer"
+        >
+          <Bomb size={18} />
+          {`Throw an JS error`}
+        </Button>
+
+        <Button
+          onClick={() => pingSocket()}
+          disabled={!canEdit}
+          className={`px-4 py-6  text-white rounded-lg transition-colors flex items-center gap-2 cursor-pointer ${useCrud ? "bg-pink-500 hover:bg-pink-400" : "bg-blue-500 hover:bg-blue-400"}`}
+        >
+          <Phone size={18} />
+          Ping through socket
+        </Button>
+      </div>
+
+      <h1 className="text-3xl font-bold text-center mt-8 mb-8 text-gray-800 dark:text-white">
+        Options
+      </h1>
+
+      <div className="flex flex-col gap-2 mt-4">
+        <Field orientation="horizontal" className="max-w-sm">
+          <FieldContent>
+            <FieldLabel htmlFor="switch-focus-mode">
+              Use <span className="font-bold text-pink-500">CRUD</span>
+            </FieldLabel>
+            <div className="text-sm text-muted-foreground">
+              <div>
+                <span className="font-bold text-pink-500">CRUD</span> are the routes exposed by{" "}
+                <b>miolo</b> directly from database: <i>one table, one route</i>.
+              </div>
+              <div>
+                <span className="font-bold text-blue-500">API</span> are the routes exposed by the
+                developer.
+              </div>
+              <div>Some actions have the two ways: just pick one of them.</div>
+            </div>
+          </FieldContent>
+          <Switch id="switch-focus-mode" checked={useCrud} onCheckedChange={setUseCrud} />
+        </Field>
+      </div>
+    </div>
+  )
+}

package/template/src/cli/pages/todos/TodoAdd.jsx

@@ -0,0 +1,43 @@
+import { Plus } from "lucide-react"
+import { useState } from "react"
+import { Button } from "#cli/components/ui/patched/button.jsx"
+import useTodosContext from "./context/useTodosContext.mjs"
+
+export default function TodoAdd() {
+  const { addTodo, canEdit, useCrud } = useTodosContext()
+
+  const [inputText, setInputText] = useState("")
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    if (inputText.trim()) {
+      addTodo(inputText)
+      setInputText("")
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="mb-8">
+      <div className="flex gap-2">
+        <input
+          type="text"
+          value={inputText}
+          onChange={(e) => setInputText(e.target.value)}
+          placeholder={
+            canEdit ? "Things to be done..." : "LogIn in order to be able to add todos :/"
+          }
+          disabled={!canEdit}
+          className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
+        />
+        <Button
+          type="submit"
+          disabled={!canEdit}
+          className={`px-4 py-6  text-white rounded-lg transition-colors flex items-center gap-2 cursor-pointer ${useCrud ? "bg-pink-500 hover:bg-pink-400" : "bg-blue-500 hover:bg-blue-400"}`}
+        >
+          <Plus size={18} />
+          Add
+        </Button>
+      </div>
+    </form>
+  )
+}

package/template/src/cli/pages/todos/TodoList.jsx

@@ -0,0 +1,60 @@
+import { Check, CircleQuestionMark, Trash2 } from "lucide-react"
+import { Button } from "#cli/components/ui/patched/button.jsx"
+import useTodosContext from "./context/useTodosContext.mjs"
+
+export default function TodoList() {
+  const { todoList, toggleTodo, removeTodo, canEdit, useCrud } = useTodosContext()
+
+  return (
+    <div className="space-y-3">
+      {todoList.length === 0 ? (
+        <p className="text-center text-gray-500 dark:text-gray-400">No todos yet. Add one above!</p>
+      ) : (
+        <ul className="space-y-2">
+          {todoList.map((todo) => (
+            <li
+              key={todo.id}
+              className="flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-md transition-shadow"
+            >
+              <div className="flex items-center space-x-3">
+                <Button
+                  onClick={() => toggleTodo(todo.id)}
+                  disabled={!canEdit}
+                  className={`w-6 h-6 rounded-full border-2 flex items-center justify-center transition-colors ${
+                    todo.done
+                      ? useCrud
+                        ? "bg-green-500 hover:border-pink-500 text-white "
+                        : "bg-green-500 hover:border-blue-500 text-white "
+                      : useCrud
+                        ? "hover:border-pink-500"
+                        : "hover:border-blue-500"
+                  }`}
+                  aria-label={todo.done ? "Mark as not done" : "Mark as done"}
+                >
+                  {todo.done ? <Check size={16} /> : <CircleQuestionMark size={16} />}
+                </Button>
+                <span
+                  className={`text-lg ${
+                    todo.done
+                      ? "line-through text-gray-500 dark:text-gray-400"
+                      : "text-gray-800 dark:text-gray-200"
+                  }`}
+                >
+                  {todo.description}
+                </span>
+              </div>
+              <Button
+                onClick={() => removeTodo(todo.id)}
+                disabled={!canEdit}
+                className={`p-1.5 rounded-full transition-colors   ${useCrud ? "text-pink-500 hover:text-pink-400 dark:text-gray-400 dark:hover:text-pink-400 hover:bg-pink-50 dark:hover:bg-gray-700" : "text-gray-500 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-gray-700"}`}
+                aria-label="Delete todo"
+              >
+                <Trash2 size={18} />
+              </Button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}

package/template/src/cli/pages/todos/Todos.jsx

@@ -0,0 +1,23 @@
+import TodoActions from "./TodoActions.jsx"
+import TodoAdd from "./TodoAdd.jsx"
+import TodoList from "./TodoList.jsx"
+
+export default function TodosList() {
+  return (
+    <div className="flex flex-row gap-4 p-4">
+      <div className="p-4 flex-1">
+        <h1 className="text-3xl font-bold text-center mb-8 text-gray-800 dark:text-white">
+          My Todo List
+        </h1>
+
+        {/* Add Todo Form */}
+        <TodoAdd />
+
+        {/* Todo List */}
+        <TodoList />
+      </div>
+
+      <TodoActions />
+    </div>
+  )
+}

package/template/src/cli/pages/todos/context/TodosContext.jsx

@@ -0,0 +1,5 @@
+import { createContext } from "react"
+
+const TodosContext = createContext()
+
+export default TodosContext