kevisual/system-apps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add login

Browse Source
This commit is contained in:
熊潇
2024-10-20 02:25:09 +08:00
parent 9ce91c593c
commit e4fe97f5e5
13 changed files with 764 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
apps/demo/index.html Normal file
View File

@@ -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>

15
apps/demo/index.js Normal file
View File

@@ -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');
};

68
apps/demo/login.js Normal file
View File

@@ -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);

0
apps/login/index.html Normal file
View File

106
apps/login/login.html Normal file
View File

@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: linear-gradient(135deg, #4facfe, #00f2fe);
font-family: Arial, sans-serif;
}
.login-container {
background: #ffffff;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
}
.login-container h2 {
text-align: center;
margin-bottom: 1.5rem;
color: #333;
}
.form-group {
margin-bottom: 1rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: bold;
}
.form-group input {
width: 100%;
padding: 0.75rem;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
}
.form-group input:focus {
outline: none;
border-color: #4facfe;
}
.login-button {
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:hover {
background: #358fd4;
}
</style>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form id="loginForm">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit" class="login-button">Login</button>
</form>
</div>
<script type="module">
import { query } from 'https://kevisual.xiongxiao.me/system/lib/query.js';
document.getElementById('loginForm').addEventListener('submit', function (event) {
event.preventDefault(); // 阻止表单默认提交行为
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
console.log('Username:', username);
console.log('Password:', password);
// 在这里可以进一步处理登录逻辑，比如发送请求到服务器
});
</script>
</body>
</html>

17
apps/login/package.json Normal file
View File

@@ -0,0 +1,17 @@
{
"name": "login",
"version": "1.0.0",
"description": "",
"main": "index.js",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"vite": "^5.4.9"
}
}

1
apps/login/src/index.js Normal file
View File

@@ -0,0 +1 @@
console.log('login');

47
apps/login/src/login.js Normal file
View File

@@ -0,0 +1,47 @@
// Import lit-html from CDN
import * as lit from 'https://cdn.jsdelivr.net/npm/lit-html@3.2.1/+esm';
// 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', (event) => {
event.preventDefault();
const username = form.username.value;
const password = form.password.value;
console.log('Username:', username);
console.log('Password:', password);
// Further login logic can be implemented here
});
}
};
// 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);

10
apps/login/vite.config.ts Normal file
View File

@@ -0,0 +1,10 @@
import { defineConfig } from 'vite';
export default defineConfig({
build: {
outDir: 'dist',
},
server: {
port: 5174,
},
});

2
apps/store/deploy/me.js
View File

@@ -57,5 +57,3 @@ export const meStore = store.create((set, get) => {
},
};
}, 'me');
meStore.getState().init();