nr.defineComponent({
name: "login",
template: `
`,
beforeCreate: () => {
return { useShadowRoot: false }
},
afterCreate: (shadowRoot, config = {}, env) => {
const compName = nr.components[nr.mountedComponents[env.mountingTo]].name;
const ctx = nr.findComponentById(env.cid);
const form = {
loginButton: ctx.querySelector('button'),
progressBar: ctx.querySelector('.linear-progress'),
usernameField: ctx.querySelector('.textfield input'),
errorContainer: ctx.querySelector('.alert')
}
if (localStorage.getItem('username')) {
form.usernameField.value = localStorage.getItem('username');
handleLogin();
}
form.loginButton.addEventListener('click', handleLogin);
function showError(error) {
form.progressBar.style.display = 'none';
form.loginButton.disabled = false;
form.usernameField.disabled = false;
form.errorContainer.style.display = 'block';
form.errorContainer.textContent = error;
form.usernameField.focus();
}
function handleLogin() {
try {
form.errorContainer.style.display = 'none';
form.progressBar.style.display = 'block';
form.loginButton.disabled = true;
form.usernameField.disabled = true;
const username = form.usernameField.value;
if (!username) throw new Error('Username cannot be empty');
console.log(`[${compName}] Trying to connect as ${username}`);
let protocol
switch (window.location.protocol) {
case 'http:':
protocol = 'ws:';
break;
case 'https:':
protocol = 'wss:';
break;
default:
throw new Error('Unknown page protocol');
}
window.callback = {
socket: new WebSocket(`${protocol}//${window.location.host}?u=${encodeURIComponent(username)}`)
}
function handleWSLogin(message) {
try {
const res = JSON.parse(message.data);
if (res.error) throw new Error(res.message);
localStorage.setItem('username', username);
console.log(`[${compName}] Logged in as ${username}`)
nr.unmount(env.mountingTo);
nr.mount(config?.appComponent || 'callback', env.mountingTo)
} catch (e) {
showError(e.message);
console.error(e);
}
}
window.callback.socket.addEventListener('open', console.log(`[${compName}] Connected to websocket`));
window.callback.socket.addEventListener('message', handleWSLogin);
} catch (e) {
showError(e.message);
console.error(e);
}
}
}
});
nr.defineComponent({
name: 'callback',
template: `
`,
beforeCreate: () => {
return { useShadowRoot: false }
},
afterCreate: () => {
const sidebar = document.querySelector('#sidebar');
const sidebarBody = document.querySelector('#sidebarbody');
const menutoggle = document.querySelector('#menutoggle');
menutoggle.addEventListener('click', () => {
sidebar.style.left = "0";
});
sidebar.addEventListener('click', (event) => {
if (!sidebarBody.contains(event.target)) {
sidebar.style.left = "-100%";
}
});
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
const fortyRemInPixels = 65 * rootFontSize;
if (entry.contentRect.width > fortyRemInPixels) {
sidebar.style.position = 'static';
sidebarBody.classList.remove('modal');
sidebarBody.classList.add('standart');
menutoggle.style.display = 'none';
} else {
sidebar.style.position = 'fixed';
sidebarBody.classList.remove('standart');
sidebarBody.classList.add('modal');
menutoggle.style.display = 'block';
}
}
});
resizeObserver.observe(document.body);
}
})