feat: add login

2024-10-20 02:25:09 +08:00
parent 9ce91c593c
commit e4fe97f5e5
13 changed files with 764 additions and 9 deletions
--- a/apps/demo/index.html
+++ b/apps/demo/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Demo</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module">
+    import { ContainerOne, mount } from 'https://kevisual.xiongxiao.me/system/lib/container.js';
+    import { render, unmount } from './login.js'
+    // import { render, unmount } from './index.js'
+    const container = new ContainerOne({
+      root: '#root',
+    });
+    const run = async () => {
+      await new Promise((resolve) => {
+        setTimeout(() => {
+          resolve()
+        }, 2000)
+      })
+      console.log(container);
+      await container.renderOne({
+        code: {
+          render,
+          unmount
+        }
+      });
+      console.log(container.data)
+    }
+    run()
+    // mount({
+    //   render,
+    //   unmount
+    // }, '#root')
+
+  </script>
+</body>
+
+</html>
--- a/apps/demo/index.js
+++ b/apps/demo/index.js
@@ -0,0 +1,15 @@
+import * as lit from 'https://cdn.jsdelivr.net/npm/lit-html@3.2.1/+esm';
+
+export const render = (ctx) => {
+  //
+  const demo = lit.html`
+    <div>
+      <h1>Demo</h1>
+    </div>
+  `;
+  lit.render(demo, ctx.renderRoot || ctx.root);
+};
+
+export const unmount = (ctx) => {
+  console.log('unMount');
+};
--- a/apps/demo/login.js
+++ b/apps/demo/login.js
@@ -0,0 +1,68 @@
+// Import lit-html from CDN
+import * as lit from 'https://kevisual.xiongxiao.me/system/lib/html.js';
+import { client as query } from 'https://kevisual.xiongxiao.me/system/lib/query.js';
+import { message } from 'https://kevisual.xiongxiao.me/system/ui/message.js';
+// Function to render a login template into a given context's renderRoot
+export const render = (ctx) => {
+  const template = lit.html`
+    <div style="max-width: 400px; margin: auto; padding: 2rem; border-radius: 8px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);">
+      <h2 style="text-align: center; color: #333;">Login</h2>
+      <form id="loginForm">
+        <div style="margin-bottom: 1rem;">
+          <label for="username" style="display: block; margin-bottom: 0.5rem; font-weight: bold;">Username</label>
+          <input type="text" id="username" name="username" required style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem;">
+        </div>
+        <div style="margin-bottom: 1rem;">
+          <label for="password" style="display: block; margin-bottom: 0.5rem; font-weight: bold;">Password</label>
+          <input type="password" id="password" name="password" required style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem;">
+        </div>
+        <button type="submit" style="width: 100%; padding: 0.75rem; background: #4facfe; color: #fff; font-size: 1rem; border: none; border-radius: 4px; cursor: pointer; transition: background 0.3s;">Login</button>
+      </form>
+    </div>
+  `;
+  lit.render(template, ctx.renderRoot);
+
+  // Add event listener for form submission
+  const form = ctx.renderRoot.querySelector('#loginForm');
+  if (form) {
+    form.addEventListener('submit', async (event) => {
+      event.preventDefault();
+      const username = form.username.value;
+      const password = form.password.value;
+      if (!username || !password) {
+        message.error('Username and password are required');
+        return;
+      }
+      // console.log('Username:', username);
+      // console.log('Password:', password);
+      const res = await query.post(
+        {
+          path: 'user',
+          key: 'login',
+          username,
+          password,
+        },
+        {
+          url: 'https://envision.xiongxiao.me/api/router',
+        },
+      ); // Implement login request
+      // Further login logic can be implemented here
+      if (res.code === 200) {
+        message.success('Login success');
+        // Redirect to home page
+        // window.location.href = '/';
+      }
+    });
+  }
+};
+
+// Function to unmount or perform any clean-up operations
+export const unmount = (ctx) => {
+  console.log('unMount');
+  lit.render(lit.nothing, ctx.renderRoot); // Clear the rendered content
+};
+
+// Usage Example:
+// import { renderTemplate, unMountTemplate } from './render-library.js';
+// render(context);
+// unmount(context);