cleanup semicolon from js
This commit is contained in:
@@ -2,52 +2,52 @@
|
||||
* Auth Modal - Login/Register with UUID
|
||||
*/
|
||||
|
||||
import { t, i18n } from '../i18n.js';
|
||||
import { auth } from '../services/auth.js';
|
||||
import { t, i18n } from '../i18n.js'
|
||||
import { auth } from '../services/auth.js'
|
||||
|
||||
class AuthModal extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.mode = 'login'; // 'login' | 'register' | 'show-uuid'
|
||||
this.generatedUuid = null;
|
||||
this.error = null;
|
||||
this.loading = false;
|
||||
super()
|
||||
this.mode = 'login' // 'login' | 'register' | 'show-uuid'
|
||||
this.generatedUuid = null
|
||||
this.error = null
|
||||
this.loading = false
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.render();
|
||||
this.unsubscribe = i18n.subscribe(() => this.render());
|
||||
this.render()
|
||||
this.unsubscribe = i18n.subscribe(() => this.render())
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
if (this.unsubscribe) this.unsubscribe();
|
||||
if (this.unsubscribe) this.unsubscribe()
|
||||
}
|
||||
|
||||
show(mode = 'login') {
|
||||
this.mode = mode;
|
||||
this.error = null;
|
||||
this.generatedUuid = null;
|
||||
this.hidden = false;
|
||||
this.render();
|
||||
document.body.style.overflow = 'hidden';
|
||||
this.mode = mode
|
||||
this.error = null
|
||||
this.generatedUuid = null
|
||||
this.hidden = false
|
||||
this.render()
|
||||
document.body.style.overflow = 'hidden'
|
||||
}
|
||||
|
||||
hide() {
|
||||
this.hidden = true;
|
||||
document.body.style.overflow = '';
|
||||
this.dispatchEvent(new CustomEvent('close'));
|
||||
this.hidden = true
|
||||
document.body.style.overflow = ''
|
||||
this.dispatchEvent(new CustomEvent('close'))
|
||||
}
|
||||
|
||||
switchMode(mode) {
|
||||
this.mode = mode;
|
||||
this.error = null;
|
||||
this.render();
|
||||
this.mode = mode
|
||||
this.error = null
|
||||
this.render()
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.hidden) {
|
||||
this.innerHTML = '';
|
||||
return;
|
||||
this.innerHTML = ''
|
||||
return
|
||||
}
|
||||
|
||||
this.innerHTML = /* html */`
|
||||
@@ -65,13 +65,13 @@ class AuthModal extends HTMLElement {
|
||||
${this.mode === 'show-uuid' ? this.renderShowUuid() : ''}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
`
|
||||
|
||||
this.setupEventListeners();
|
||||
this.setupEventListeners()
|
||||
}
|
||||
|
||||
renderLogin() {
|
||||
const storedUuid = auth.getStoredUuid();
|
||||
const storedUuid = auth.getStoredUuid()
|
||||
|
||||
return /* html */`
|
||||
<h2 class="modal-title">${t('auth.login')}</h2>
|
||||
@@ -104,7 +104,7 @@ class AuthModal extends HTMLElement {
|
||||
<button class="link-btn" id="switch-register">${t('auth.createAccount')}</button>
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
`
|
||||
}
|
||||
|
||||
renderRegister() {
|
||||
@@ -130,7 +130,7 @@ class AuthModal extends HTMLElement {
|
||||
<button class="link-btn" id="switch-login">${t('auth.login')}</button>
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
`
|
||||
}
|
||||
|
||||
renderShowUuid() {
|
||||
@@ -161,100 +161,100 @@ class AuthModal extends HTMLElement {
|
||||
<button class="btn btn-primary btn-lg btn-block" id="confirm-saved">
|
||||
${t('auth.confirmSaved')}
|
||||
</button>
|
||||
`;
|
||||
`
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
// Close modal
|
||||
this.querySelector('#modal-overlay')?.addEventListener('click', (e) => {
|
||||
if (e.target.id === 'modal-overlay') this.hide();
|
||||
});
|
||||
this.querySelector('#modal-close')?.addEventListener('click', () => this.hide());
|
||||
if (e.target.id === 'modal-overlay') this.hide()
|
||||
})
|
||||
this.querySelector('#modal-close')?.addEventListener('click', () => this.hide())
|
||||
|
||||
// Switch modes
|
||||
this.querySelector('#switch-register')?.addEventListener('click', () => this.switchMode('register'));
|
||||
this.querySelector('#switch-login')?.addEventListener('click', () => this.switchMode('login'));
|
||||
this.querySelector('#switch-register')?.addEventListener('click', () => this.switchMode('register'))
|
||||
this.querySelector('#switch-login')?.addEventListener('click', () => this.switchMode('login'))
|
||||
|
||||
// Login form
|
||||
this.querySelector('#login-form')?.addEventListener('submit', (e) => this.handleLogin(e));
|
||||
this.querySelector('#login-form')?.addEventListener('submit', (e) => this.handleLogin(e))
|
||||
|
||||
// Generate UUID
|
||||
this.querySelector('#generate-uuid')?.addEventListener('click', () => this.handleRegister());
|
||||
this.querySelector('#generate-uuid')?.addEventListener('click', () => this.handleRegister())
|
||||
|
||||
// Copy UUID
|
||||
this.querySelector('#copy-uuid')?.addEventListener('click', () => this.copyUuid());
|
||||
this.querySelector('#copy-uuid')?.addEventListener('click', () => this.copyUuid())
|
||||
|
||||
// Download backup
|
||||
this.querySelector('#download-uuid')?.addEventListener('click', () => this.downloadBackup());
|
||||
this.querySelector('#download-uuid')?.addEventListener('click', () => this.downloadBackup())
|
||||
|
||||
// Confirm saved
|
||||
this.querySelector('#confirm-saved')?.addEventListener('click', () => this.hide());
|
||||
this.querySelector('#confirm-saved')?.addEventListener('click', () => this.hide())
|
||||
|
||||
// Escape key
|
||||
document.addEventListener('keydown', this.handleKeydown.bind(this));
|
||||
document.addEventListener('keydown', this.handleKeydown.bind(this))
|
||||
}
|
||||
|
||||
handleKeydown(e) {
|
||||
if (e.key === 'Escape' && !this.hidden) {
|
||||
this.hide();
|
||||
this.hide()
|
||||
}
|
||||
}
|
||||
|
||||
async handleLogin(e) {
|
||||
e.preventDefault();
|
||||
const uuid = this.querySelector('#uuid').value.trim();
|
||||
e.preventDefault()
|
||||
const uuid = this.querySelector('#uuid').value.trim()
|
||||
|
||||
if (!uuid) {
|
||||
this.error = t('auth.enterUuid');
|
||||
this.render();
|
||||
return;
|
||||
this.error = t('auth.enterUuid')
|
||||
this.render()
|
||||
return
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
this.error = null;
|
||||
this.render();
|
||||
this.loading = true
|
||||
this.error = null
|
||||
this.render()
|
||||
|
||||
const result = await auth.login(uuid);
|
||||
const result = await auth.login(uuid)
|
||||
|
||||
this.loading = false;
|
||||
this.loading = false
|
||||
|
||||
if (result.success) {
|
||||
this.hide();
|
||||
this.dispatchEvent(new CustomEvent('login', { detail: { success: true } }));
|
||||
this.hide()
|
||||
this.dispatchEvent(new CustomEvent('login', { detail: { success: true } }))
|
||||
} else {
|
||||
this.error = result.error || t('auth.invalidUuid');
|
||||
this.render();
|
||||
this.error = result.error || t('auth.invalidUuid')
|
||||
this.render()
|
||||
}
|
||||
}
|
||||
|
||||
async handleRegister() {
|
||||
this.loading = true;
|
||||
this.error = null;
|
||||
this.render();
|
||||
this.loading = true
|
||||
this.error = null
|
||||
this.render()
|
||||
|
||||
const result = await auth.createAccount();
|
||||
const result = await auth.createAccount()
|
||||
|
||||
this.loading = false;
|
||||
this.loading = false
|
||||
|
||||
if (result.success) {
|
||||
this.generatedUuid = result.uuid;
|
||||
this.mode = 'show-uuid';
|
||||
this.render();
|
||||
this.dispatchEvent(new CustomEvent('register', { detail: { uuid: result.uuid } }));
|
||||
this.generatedUuid = result.uuid
|
||||
this.mode = 'show-uuid'
|
||||
this.render()
|
||||
this.dispatchEvent(new CustomEvent('register', { detail: { uuid: result.uuid } }))
|
||||
} else {
|
||||
this.error = result.error || t('auth.registrationFailed');
|
||||
this.render();
|
||||
this.error = result.error || t('auth.registrationFailed')
|
||||
this.render()
|
||||
}
|
||||
}
|
||||
|
||||
async copyUuid() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(this.generatedUuid);
|
||||
const btn = this.querySelector('#copy-uuid');
|
||||
btn.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>';
|
||||
setTimeout(() => this.render(), 2000);
|
||||
await navigator.clipboard.writeText(this.generatedUuid)
|
||||
const btn = this.querySelector('#copy-uuid')
|
||||
btn.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>'
|
||||
setTimeout(() => this.render(), 2000)
|
||||
} catch (e) {
|
||||
console.error('Copy failed:', e);
|
||||
console.error('Copy failed:', e)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -271,21 +271,21 @@ https://dgray.io/#/login
|
||||
Created: ${new Date().toISOString()}
|
||||
|
||||
WARNING: If you lose this UUID, you cannot recover your account!
|
||||
`;
|
||||
`
|
||||
|
||||
const blob = new Blob([content], { type: 'text/plain' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `dgray-backup-${this.generatedUuid.slice(0, 8)}.txt`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
const blob = new Blob([content], { type: 'text/plain' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = `dgray-backup-${this.generatedUuid.slice(0, 8)}.txt`
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('auth-modal', AuthModal);
|
||||
customElements.define('auth-modal', AuthModal)
|
||||
|
||||
const style = document.createElement('style');
|
||||
const style = document.createElement('style')
|
||||
style.textContent = /* css */`
|
||||
auth-modal {
|
||||
position: fixed;
|
||||
@@ -420,7 +420,7 @@ style.textContent = /* css */`
|
||||
auth-modal .link-btn:hover {
|
||||
color: var(--color-accent-hover);
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
`
|
||||
document.head.appendChild(style)
|
||||
|
||||
export default AuthModal;
|
||||
export default AuthModal
|
||||
|
||||
Reference in New Issue
Block a user