flashii/misuzu
flashii/misuzu
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make it possible to have more than one login form on a page.

Browse source
This commit is contained in:
flash 2018-11-15 23:02:57 +01:00
parent a1f891fd22
commit 89afab2d96
2 changed files with 14 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
assets/typescript/misuzu.ts
View file

@ -29,17 +29,20 @@ window.addEventListener('load', () => {
changelogChangeAction.title = "This is supposed to be sideways, but your browser doesn't support that."; changelogChangeAction.title = "This is supposed to be sideways, but your browser doesn't support that.";
} }
const loginForm: HTMLFormElement = document.getElementById('msz-login-form') as HTMLFormElement; const loginForms: HTMLCollectionOf<HTMLFormElement> = document.getElementsByClassName('js-login-form') as HTMLCollectionOf<HTMLFormElement>;
if (loginForm) { if (loginForms.length > 0) {
const loginAvatar: HTMLElement = document.getElementById('login-avatar'), for (let i = 0; i < loginForms.length; i++) {
loginUsername: HTMLInputElement = document.getElementById('login-username') as HTMLInputElement; const loginForm: HTMLFormElement = loginForms[i],
loginAvatar: HTMLElement = loginForm.getElementsByClassName('js-login-avatar')[0] as HTMLElement,
loginUsername: HTMLInputElement = loginForm.getElementsByClassName('js-login-username')[0] as HTMLInputElement;
// Initial bump, in case anything is prefilled. // Initial bump, in case anything is prefilled.
loginFormUpdateAvatar(loginAvatar, loginUsername, true); loginFormUpdateAvatar(loginAvatar, loginUsername, true);
loginUsername.addEventListener('keyup', () => loginFormUpdateAvatar(loginAvatar, loginUsername)); loginUsername.addEventListener('keyup', () => loginFormUpdateAvatar(loginAvatar, loginUsername));
} }
}
}); });
function loginFormUpdateAvatar(avatarElement: HTMLElement, usernameElement: HTMLInputElement, force: boolean = false): void { function loginFormUpdateAvatar(avatarElement: HTMLElement, usernameElement: HTMLInputElement, force: boolean = false): void {

8
templates/auth/macros.twig
View file

@ -1,15 +1,15 @@
{% macro auth_login(username, message, is_welcome) %} {# please only use this once per page, it has script shit rn #} {% macro auth_login(username, message, is_welcome) %}
{% set is_welcome = is_welcome|default(false) %} {% set is_welcome = is_welcome|default(false) %}
{% from '_layout/input.twig' import input_hidden, input_csrf, input_text %} {% from '_layout/input.twig' import input_hidden, input_csrf, input_text %}
<form class="container auth" method="post" action="/auth.php" id="msz-login-form"> <form class="container auth js-login-form" method="post" action="/auth.php">
{{ input_hidden('auth[mode]', 'login') }} {{ input_hidden('auth[mode]', 'login') }}
{{ input_csrf('login') }} {{ input_csrf('login') }}
<div class="auth__header"> <div class="auth__header">
<div class="auth__header__wrapper"> <div class="auth__header__wrapper">
<div class="avatar auth__avatar" id="login-avatar" <div class="avatar auth__avatar js-login-avatar"
style="background-image:url('/profile.php?u=0&amp;m=avatar');"></div> style="background-image:url('/profile.php?u=0&amp;m=avatar');"></div>
</div> </div>
</div> </div>
@ -23,7 +23,7 @@
{% endif %} {% endif %}
<div class="auth__form"> <div class="auth__form">
{{ input_text('auth[username]', 'auth__input', username|default(''), 'text', 'Username', true, {'id':'login-username'}) }} {{ input_text('auth[username]', 'auth__input js-login-username', username|default(''), 'text', 'Username', true) }}
{{ input_text('auth[password]', 'auth__input', '', 'password', 'Password', true) }} {{ input_text('auth[password]', 'auth__input', '', 'password', 'Password', true) }}
<button class="input__button">Login</button> <button class="input__button">Login</button>