Added lite login model window, closes #79.

assets/less/classes/auth.less

@@ -33,4 +33,17 @@
         display: flex;
         flex-direction: column;
     }
+
+    &__buttons {
+        display: flex;
+        justify-content: space-evenly;
+    }
+
+    &__button {
+        flex: 1 1 auto;
+
+        &:not(:first-child) {
+            margin-left: 2px;
+        }
+    }
 }

assets/typescript/misuzu.ts

@@ -28,6 +28,15 @@ window.addEventListener('load', () => {
         changelogChangeAction.title = "This is supposed to be sideways, but your browser doesn't support that.";
     }
 
+    const loginButtons: HTMLCollectionOf<HTMLAnchorElement> = document.getElementsByClassName('js-login-button') as HTMLCollectionOf<HTMLAnchorElement>;
+
+    if (loginButtons.length > 0) {
+        for (let i = 0; i < loginButtons.length; i++) {
+            loginButtons[i].href = 'javascript:void(0);';
+            loginButtons[i].addEventListener('click', () => loginModal());
+        }
+    }
+
     const loginForms: HTMLCollectionOf<HTMLFormElement> = document.getElementsByClassName('js-login-form') as HTMLCollectionOf<HTMLFormElement>;
 
     if (loginForms.length > 0) {
@@ -76,8 +85,7 @@ interface MessageBoxButton {
     callback: Function;
 }
 
-function messageBox(text: string, title: string = null, buttons: MessageBoxButton[] = []): boolean
+function messageBox(text: string, title: string = null, buttons: MessageBoxButton[] = []): boolean {
-{
     if (document.querySelector('.messagebox')) {
         return false;
     }
@@ -104,11 +112,13 @@ function messageBox(text: string, title: string = null, buttons: MessageBoxButto
     const buttonsContainer = container.appendChild(document.createElement('div'));
     buttonsContainer.className = 'messagebox__buttons';
 
+    let firstButton = null;
+
     if (buttons.length < 1) {
-        const okButton = buttonsContainer.appendChild(document.createElement('button'));
+        firstButton = buttonsContainer.appendChild(document.createElement('button'));
-        okButton.className = 'input__button';
+        firstButton.className = 'input__button';
-        okButton.textContent = 'OK';
+        firstButton.textContent = 'OK';
-        okButton.addEventListener('click', () => element.remove());
+        firstButton.addEventListener('click', () => element.remove());
     } else {
         for (let i = 0; i < buttons.length; i++) {
             let button = buttonsContainer.appendChild(document.createElement('button'));
@@ -118,9 +128,87 @@ function messageBox(text: string, title: string = null, buttons: MessageBoxButto
                 element.remove();
                 buttons[i].callback();
             });
+
+            if (firstButton === null)
+                firstButton = button;
         }
     }
 
     document.body.appendChild(element);
+    firstButton.focus();
+    return true;
+}
+
+function loginModal(): boolean {
+    if (document.querySelector('.messagebox') || getCurrentUser('user_id') > 0) {
+        return false;
+    }
+
+    const element: HTMLDivElement = document.createElement('div');
+    element.className = 'messagebox';
+
+    const container: HTMLFormElement = element.appendChild(document.createElement('form'));
+    container.className = 'container messagebox__container auth js-login-form';
+    container.method = 'post';
+    container.action = '/auth.php';
+
+    const titleElement = container.appendChild(document.createElement('div')),
+        titleBackground = titleElement.appendChild(document.createElement('div')),
+        titleHeader = titleElement.appendChild(document.createElement('div'));
+
+    titleElement.className = 'container__title';
+    titleBackground.className = 'container__title__background';
+    titleHeader.className = 'auth__header';
+
+    const authAvatar: HTMLDivElement = titleHeader.appendChild(document.createElement('div'));
+    authAvatar.className = 'avatar auth__avatar';
+    authAvatar.style.backgroundImage = "url('/profile.php?u=0&m=avatar')";
+
+    const hiddenMode: HTMLInputElement = container.appendChild(document.createElement('input'));
+    hiddenMode.type = 'hidden';
+    hiddenMode.name = 'auth[mode]';
+    hiddenMode.value = 'login';
+
+    const hiddenCsrf: HTMLInputElement = container.appendChild(document.createElement('input'));
+    hiddenCsrf.type = 'hidden';
+    hiddenCsrf.name = 'csrf[login]';
+    hiddenCsrf.value = getCSRFToken('login');
+
+    const hiddenRedirect: HTMLInputElement = container.appendChild(document.createElement('input'));
+    hiddenRedirect.type = 'hidden';
+    hiddenRedirect.name = 'auth[redirect]';
+    hiddenRedirect.value = location.toString();
+
+    const authForm: HTMLDivElement = container.appendChild(document.createElement('div'));
+    authForm.className = 'auth__form';
+
+    const inputUsername: HTMLInputElement = authForm.appendChild(document.createElement('input'));
+    inputUsername.className = 'input__text auth__input';
+    inputUsername.placeholder = 'Username';
+    inputUsername.type = 'text';
+    inputUsername.name = 'auth[username]';
+    inputUsername.addEventListener('keyup', () => loginFormUpdateAvatar(authAvatar, inputUsername));
+
+    const inputPassword: HTMLInputElement = authForm.appendChild(document.createElement('input'));
+    inputPassword.className = 'input__text auth__input';
+    inputPassword.placeholder = 'Password';
+    inputPassword.type = 'password';
+    inputPassword.name = 'auth[password]';
+
+    const formButtons: HTMLDivElement = authForm.appendChild(document.createElement('div'));
+    formButtons.className = 'auth__buttons';
+
+    const inputLogin: HTMLButtonElement = formButtons.appendChild(document.createElement('button'));
+    inputLogin.className = 'input__button auth__button';
+    inputLogin.textContent = 'Log in';
+
+    const inputClose: HTMLButtonElement = formButtons.appendChild(document.createElement('button'));
+    inputClose.className = 'input__button auth__button';
+    inputClose.textContent = 'Close';
+    inputClose.type = 'button';
+    inputClose.addEventListener('click', () => element.remove());
+
+    document.body.appendChild(element);
+    inputUsername.focus();
     return true;
 }

misuzu.php

@@ -390,6 +390,9 @@ MIG;
 
     if (!empty($userDisplayInfo)) {
         tpl_var('current_user', $userDisplayInfo);
+    } else {
+        // make sure the login csrf token is available
+        csrf_token('login');
     }
 
     $inManageMode = starts_with($_SERVER['REQUEST_URI'], '/manage');

public/auth.php

@@ -227,7 +227,7 @@ MSG;
                 $remainingAttempts === 2 ? '' : 's'
             );
 
-            if ($userData['user_id'] < 1) {
+            if (empty($userData) || $userData['user_id'] < 1) {
                 user_login_attempt_record(false, null, $ipAddress, $userAgent);
                 $authLoginError = $loginFailedError;
                 break;

templates/_layout/header.twig

@@ -82,6 +82,7 @@
             'title': 'Log in',
             'url': '/auth.php?m=login',
             'icon': 'fas fa-sign-in-alt fa-fw',
+            'class': 'js-login-button',
         },
     ]
 %}
@@ -116,7 +117,7 @@
         <div class="header__desktop__user">
             {% for item in user_menu %}
                 {% if item.display is not defined or item.display %}
-                    <a href="{{ item.url }}" title="{{ item.title }}" class="header__desktop__user__button">
+                    <a href="{{ item.url }}" title="{{ item.title }}" class="header__desktop__user__button {{ item.class|default('') }}">
                         <i class="{{ item.icon }}"></i>
                     </a>
                 {% endif %}
@@ -126,7 +127,7 @@
                 <a href="{{ url('user-profile', {'user': current_user.user_id}) }}" class="avatar header__desktop__user__avatar" title="{{ current_user.username }}"
                     style="background-image:url('{{ url('user-avatar', {'user': current_user.user_id}) }}');{{ current_user.user_colour|html_colour }}"></a>
             {% else %}
-                <a href="{{ url('auth-login') }}" class="avatar header__desktop__user__avatar"
+                <a href="{{ url('auth-login') }}" class="avatar header__desktop__user__avatar js-login-button"
                     style="background-image:url('{{ url('guest-avatar') }}');"></a>
             {% endif %}
         </div>
@@ -154,7 +155,7 @@
             <div class="header__mobile__user">
                 {% for item in user_menu %}
                     {% if item.display is not defined or item.display %}
-                        <a href="{{ item.url }}" class="header__mobile__link header__mobile__link--user">
+                        <a href="{{ item.url }}" class="header__mobile__link header__mobile__link--user {{ item.class|default('') }}">
                             <i class="{{ item.icon }}"></i> {{ item.title }}
                         </a>
                     {% endif %}

templates/auth/macros.twig

@@ -31,7 +31,9 @@
             {{ input_text('auth[username]', 'auth__input js-login-username', username|default(''), 'text', 'Username', true, null, 0, autofocus) }}
             {{ input_text('auth[password]', 'auth__input', '', 'password', 'Password', true, null) }}
 
-            <button class="input__button">Log in</button>
+            <div class="auth__buttons">
+                <button class="input__button auth__button">Log in</button>
+            </div>
         </div>
     </form>
 {% endmacro %}