69 lines
2.8 KiB
JavaScript
69 lines
2.8 KiB
JavaScript
// 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);
|