Updated auth styles to match site styling.

assets/less/auth/classes/button.less

@@ -1,14 +0,0 @@
-.button {
-    border-radius: 4px;
-    border: 0;
-    padding: 7px 10px;
-    background: #462e55;
-    color: #fff;
-    text-align: left;
-    cursor: pointer;
-    line-height: 1.4em;
-    display: inline-block;
-    text-decoration: none;
-    font-family: sans-serif;
-    font-size: 12px;
-}

assets/less/auth/classes/container.less

@@ -1,16 +0,0 @@
-.auth-container {
-    box-shadow: 0 2px 5px fade(#111, 80%);
-    color: #fff;
-    background: #222;
-    margin: 2px auto;
-    width: 400px;
-    min-height: @auth-form-height;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    @media (max-width: @auth-mobile) {
-        min-width: 0;
-        width: 100%;
-    }
-}

assets/less/auth/classes/form.less

@@ -1,94 +0,0 @@
-.form {
-    height: @auth-title-height;
-    overflow: hidden;
-    transition: height .3s ease-in-out;
-
-    &__wrapper {
-
-        &:not(:last-child) {
-            border-bottom: 1px solid #333;
-        }
-    }
-
-    &__toggle {
-        display: none;
-
-        &:checked ~ .form {
-            height: @auth-form-height;
-        }
-
-        &:not(:checked) ~ .form .form__title:hover {
-            cursor: pointer;
-            background: #333;
-            z-index: 100;
-            box-shadow: 0 2px 5px fade(#111, 80%);
-        }
-    }
-
-    &__title {
-        font-size: 1.4em;
-        display: block;
-        padding: 10px;
-        height: @auth-title-height;
-        transition: background .2s, box-shadow .2s;
-        -webkit-touch-callout: none;
-        -webkit-user-select: none;
-        -khtml-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-    }
-
-    &__content {
-        display: flex;
-        flex-direction: column;
-        margin: 0 5px;
-        height: @auth-form-height - @auth-title-height;
-        overflow: hidden;
-        transition: height .5s ease-in-out;
-        align-items: center;
-        flex-grow: 1;
-        justify-content: center;
-
-        &--no-registration {
-            max-width: 400px;
-        }
-    }
-
-    &__link {
-        color: #88c;
-        text-decoration: none;
-
-        &:hover {
-            text-decoration: underline;
-        }
-
-        &:active {
-            color: #c88;
-        }
-    }
-
-    &__row {
-        margin-bottom: 5px;
-        width: 100%;
-
-        &--columns {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-    }
-
-    &__column {
-
-        &--message {
-            padding-left: 10px;
-            color: #aaa;
-            max-width: 220px;
-        }
-
-        &--error {
-            color: #a33;
-        }
-    }
-}

assets/less/auth/classes/logout.less

@@ -1,20 +0,0 @@
-.logout {
-    max-width: 400px;
-    padding: 5px;
-
-    &__message {
-        font-size: 1.2em;
-    }
-
-    &__paragraph {
-        &:not(:last-child) {
-            margin-bottom: 2px;
-        }
-    }
-
-    &__buttons {
-        margin-top: 5px;
-        display: flex;
-        justify-content: flex-end;
-    }
-}

assets/less/auth/classes/text.less

@@ -1,22 +0,0 @@
-.text {
-    display: block;
-    width: 100%;
-    border: 0;
-    background: #1a1a1a;
-    border-radius: 4px;
-    color: #fff;
-    padding: 5px;
-
-    @media (max-width: @auth-mobile) {
-        font-size: 1.2em;
-    }
-
-    &__label {
-        display: block;
-    }
-
-    &--disabled {
-        // same colour as placeholder (in firefox)
-        color: #959595;
-    }
-}

assets/less/auth/main.less

@@ -1,9 +0,0 @@
-@auth-mobile: 500px;
-@auth-title-height: 40px;
-@auth-form-height: 200px;
-
-@import "classes/button";
-@import "classes/container";
-@import "classes/form";
-@import "classes/logout";
-@import "classes/text";

assets/less/classes/auth.less

@@ -0,0 +1,37 @@
+.auth {
+    max-width: 400px;
+    margin: 0 auto;
+    margin-bottom: 2px;
+
+    &__header {
+        display: flex;
+        justify-content: center;
+        padding: 20px;
+        background-image: linear-gradient(0deg, #111, var(--accent-colour));
+    }
+
+    &__warning {
+        margin: 2px 5px 0;
+
+        &--welcome {
+            --start-colour: var(--accent-colour);
+            --end-colour: #222;
+        }
+    }
+
+    &__avatar {
+        width: 100px;
+        height: 100px;
+    }
+
+    &__paragraph,
+    &__input {
+        margin-bottom: 5px;
+    }
+
+    &__form {
+        padding: 5px;
+        display: flex;
+        flex-direction: column;
+    }
+}

assets/less/classes/input/button.less

@@ -0,0 +1,58 @@
+.input__button {
+    background-image: linear-gradient(0deg, transparent, var(--gradient-start));
+    background-color: var(--accent-colour);
+    font-family: @mio-font-regular;
+    font-size: 1.1em;
+    line-height: 1.4em;
+    padding: 4px 10px;
+    min-width: 80px;
+    text-align: center;
+    cursor: pointer;
+    transition: background-color .2s, box-shadow .2s;
+    color: var(--text-colour-header);
+    border: 1px solid var(--text-colour-header);
+    border-radius: 2px;
+    display: inline-block;
+    text-decoration: none;
+
+    &--disabled {
+        background: linear-gradient(0deg, #888, #aaa) !important;
+        border-color: #333;
+        color: #333;
+        box-shadow: initial !important;
+    }
+
+    &:focus {
+        box-shadow: inset 0 0 2px 0 var(--text-colour-header);
+    }
+
+    &:hover {
+        background-color: #a586c3;
+    }
+
+    &:active {
+        background-color: var(--gradient-start);
+    }
+
+    &--new {
+        color: var(--accent-colour);
+        background: #111;
+        border: 1px solid var(--accent-colour);
+        padding: 5px 10px;
+        font-size: 1.2em;
+        transition: color .2s, background-color .2s;
+        box-shadow: initial !important;
+
+        &:hover,
+        &:active,
+        &:focus {
+            color: #111;
+            background-color: var(--accent-colour);
+            text-shadow: initial;
+        }
+    }
+
+    &--destroy {
+        --accent-colour: #c00;
+    }
+}

assets/less/classes/input/text.less

@@ -0,0 +1,29 @@
+.input__text {
+    border: 1px solid #aaa;
+    padding: 1px;
+    background: #fff;
+    color: #111;
+
+    &:focus {
+        border-color: var(--accent-colour);
+    }
+
+    &--readonly {
+        color: #666;
+    }
+
+    &--monospace {
+        font-family: @mio-font-mono;
+    }
+
+    &--new {
+        font-size: 1.2em;
+        padding: 5px 10px;
+        color: #fff;
+        border-radius: 2px;
+        background: #222;
+        box-shadow: inset 0 0 4px #111;
+        border-color: #222;
+        transition: border-color .2s;
+    }
+}

assets/less/classes/input/textarea.less

@@ -4,6 +4,8 @@
     vertical-align: bottom;
     background: #fff;
     color: #111;
+    font-family: @mio-font-mono;
+    font-size: 1em;
 
     &:focus {
         border-color: var(--accent-colour);

assets/less/classes/profile/header.less

@@ -59,34 +59,6 @@
         align-items: center;
     }
 
-    &__action {
-        border-radius: 2px;
-        color: var(--accent-colour);
-        background-color: #111;
-        text-decoration: none;
-        border: 1px solid var(--accent-colour);
-        margin-right: 10px;
-        padding: 5px 10px;
-        cursor: pointer;
-        font-size: 1.2em;
-        transition: color .2s, background-color .2s;
-
-        &:hover {
-            color: #111;
-            background-color: var(--accent-colour);
-            text-shadow: initial;
-        }
-
-        &--destroy {
-            color: #c00;
-            border-color: #c00;
-
-            &:hover {
-                background-color: #c00;
-            }
-        }
-    }
-
     &__stats {
         display: flex;
     }

assets/less/main.less

@@ -1,5 +1,6 @@
 @mio-font-heading: Verdana, 'Dejavu Sans', Arial, Helvetica, sans-serif;
 @mio-font-regular: Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
+@mio-font-mono: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
 @site-max-width: 1200px;
 @site-mobile-width: 800px;
 
@@ -69,13 +70,14 @@ body {
 @import "classes/pagination";
 @import "classes/management";
 @import "classes/side-navigation";
+@import "classes/warning";
 
 // Specific styles
 @import "classes/footer";
 @import "classes/header";
 @import "classes/index";
 @import "classes/permissions";
-@import "classes/warning";
+@import "classes/auth";
 
 // Profile
 @import "classes/profile/profile";

assets/less/mio/classes/input/button.less

@@ -1,37 +0,0 @@
-.input__button {
-    background-image: linear-gradient(0deg, transparent, var(--gradient-start));
-    background-color: var(--accent-colour);
-    font-family: @mio-font-regular;
-    font-size: 1.1em;
-    line-height: 1.4em;
-    padding: 4px 10px;
-    min-width: 80px;
-    text-align: center;
-    cursor: pointer;
-    transition: background-color .2s, box-shadow .2s;
-    color: var(--text-colour-header);
-    border: 1px solid var(--text-colour-header);
-    border-radius: 2px;
-    display: inline-block;
-    text-decoration: none;
-
-    &--disabled {
-        background-image: linear-gradient(0deg, #888, #aaa);
-        border-color: #333;
-        color: #333;
-    }
-
-    &:not(&--disabled) {
-        &:focus {
-            box-shadow: inset 0 0 2px 0 var(--text-colour-header);
-        }
-
-        &:hover {
-            background-color: #a586c3;
-        }
-
-        &:active {
-            background-color: var(--gradient-start);
-        }
-    }
-}

assets/less/mio/classes/input/text.less

@@ -1,14 +0,0 @@
-.input__text {
-    border: 1px solid #aaa;
-    padding: 1px;
-    background: #fff;
-    color: #111;
-
-    &:focus {
-        border-color: var(--accent-colour);
-    }
-
-    &--readonly {
-        color: #666;
-    }
-}

build.php

@@ -36,7 +36,7 @@ define('PUBLIC_DIR', __DIR__ . '/public');
 define('CSS_DIR', PUBLIC_DIR . '/css');
 define('JS_DIR', PUBLIC_DIR . '/js');
 
-define('LESS_DEST', CSS_DIR . '/%s.css');
+define('LESS_DEST', CSS_DIR . '/style.css');
 define('TS_DEST', JS_DIR . '/%s.js');
 define('DTS_DEST', TS_DIR . '/%s.d.ts');
 
@@ -94,21 +94,10 @@ deleteAllFilesInDir(TS_DIR, '*.d.ts');
 misuzu_log();
 misuzu_log('Compiling LESS');
 
-$styles = globDir(LESS_DIR, '*', GLOB_ONLYDIR);
+if (!is_file(LESS_DIR . LESS_ENTRY_POINT)) {
-
+    misuzu_log('==> ERR: Entry point for this style does not exist (' . basename(LESS_ENTRY_POINT) . ')');
-foreach ($styles as $style) {
+} else {
-    $basename = basename($style);
+    system(sprintf(LESS_CMD, escapeshellarg(LESS_DIR . LESS_ENTRY_POINT), LESS_DEST));
-    $destination = sprintf(LESS_DEST, $basename);
-    $entryPoint = $style . LESS_ENTRY_POINT;
-    misuzu_log("=> {$basename}");
-
-    if (!file_exists($entryPoint)) {
-        misuzu_log('==> ERR: Entry point for this style does not exist (' . basename(LESS_ENTRY_POINT) . ')');
-        continue;
-    }
-
-    $compileCmd = sprintf(LESS_CMD, escapeshellarg($entryPoint), escapeshellarg($destination));
-    system($compileCmd);
 }
 
 // figure this out

misuzu.php

@@ -268,7 +268,7 @@ MIG;
 
     if ($app->underLockdown()) {
         http_response_code(503);
-        echo tpl_render('auth/lockdown');
+        echo tpl_render('auth.lockdown');
         exit;
     }
 

public/auth.php

@@ -15,17 +15,27 @@ $usernameValidationErrors = [
     'in-use' => 'This username is already taken!',
 ];
 
-$authMode = $_GET['m'] ?? 'login';
 $preventRegistration = $app->disableRegistration();
 
+$isSubmission = !empty($_POST['auth']) && is_array($_POST['auth']);
+$authMode = $isSubmission ? ($_POST['auth']['mode'] ?? '') : ($_GET['m'] ?? 'login');
+$authUsername = $isSubmission ? ($_POST['auth']['username'] ?? '') : ($_GET['username'] ?? '');
+$authEmail = $isSubmission ? ($_POST['auth']['email'] ?? '') : ($_GET['email'] ?? '');
+$authPassword = $_POST['auth']['password'] ?? '';
+$authVerification = $_POST['auth']['verification'] ?? '';
+
 tpl_vars([
     'prevent_registration' => $preventRegistration,
     'auth_mode' => $authMode,
-    'auth_username' => $_REQUEST['username'] ?? '',
+    'auth_username' => $authUsername,
-    'auth_email' => $_REQUEST['email'] ?? '',
+    'auth_email' => $authEmail,
 ]);
 
 switch ($authMode) {
+    case 'get_user':
+        echo user_id_from_username($_GET['u'] ?? '');
+        break;
+
     case 'logout':
         if (!$app->hasActiveSession()) {
             header('Location: /');
@@ -63,9 +73,9 @@ switch ($authMode) {
             break;
         }
 
-        tpl_var('auth_reset_message', 'A verification code should\'ve been sent to your e-mail address.');
+        tpl_var('auth_reset_message', "A verification code should've been sent to your e-mail address.");
 
-        while ($_SERVER['REQUEST_METHOD'] === 'POST') {
+        while ($isSubmission) {
             $validateRequest = Database::prepare('
                 SELECT COUNT(`user_id`) > 0
                 FROM `msz_users_password_resets`
@@ -75,7 +85,7 @@ switch ($authMode) {
                 AND `reset_requested` > NOW() - INTERVAL 1 HOUR
             ');
             $validateRequest->bindValue('user', $resetUser['user_id']);
-            $validateRequest->bindValue('code', $_POST['verification'] ?? '');
+            $validateRequest->bindValue('code', $authVerification);
             $validateRequest = $validateRequest->execute()
                 ? (bool)$validateRequest->fetchColumn()
                 : false;
@@ -85,16 +95,16 @@ switch ($authMode) {
                 break;
             }
 
-            tpl_var('reset_verify', $_POST['verification']);
+            tpl_var('reset_verify', $authVerification);
 
-            if (empty($_POST['password']['new'])
+            if (empty($authPassword['new'])
-                || empty($_POST['password']['confirm'])
+                || empty($authPassword['confirm'])
-                || $_POST['password']['new'] !== $_POST['password']['confirm']) {
+                || $authPassword['new'] !== $authPassword['confirm']) {
                 tpl_var('auth_reset_error', 'Your passwords didn\'t match!');
                 break;
             }
 
-            if (user_validate_password($_POST['password']['new']) !== '') {
+            if (user_validate_password($authPassword['new']) !== '') {
                 tpl_var('auth_reset_error', 'Your password is too weak!');
                 break;
             }
@@ -105,7 +115,7 @@ switch ($authMode) {
                 WHERE `user_id` = :user
             ');
             $updatePassword->bindValue('user', $resetUser['user_id']);
-            $updatePassword->bindValue('password', user_password_hash($_POST['password']['new']));
+            $updatePassword->bindValue('password', user_password_hash($authPassword['new']));
 
             if ($updatePassword->execute()) {
                 audit_log('PASSWORD_RESET', $resetUser['user_id']);
@@ -120,13 +130,13 @@ switch ($authMode) {
                 AND `user_id` = :user
             ');
             $invalidateCode->bindValue('user', $resetUser['user_id']);
-            $invalidateCode->bindValue('code', $_POST['verification']);
+            $invalidateCode->bindValue('code', $authVerification);
 
             if (!$invalidateCode->execute()) {
                 throw new UnexpectedValueException('Verification code invalidation failed.');
             }
 
-            header('Location: /auth.php?m=login');
+            header('Location: /auth.php?m=login&u=' . $resetUser['username']);
             break;
         }
 
@@ -141,8 +151,8 @@ switch ($authMode) {
             break;
         }
 
-        while ($_SERVER['REQUEST_METHOD'] === 'POST') {
+        while ($isSubmission) {
-            if (empty($_POST['email'])) {
+            if (empty($authEmail)) {
                 tpl_var('auth_forgot_error', 'Please enter an e-mail address.');
                 break;
             }
@@ -152,10 +162,11 @@ switch ($authMode) {
                 FROM `msz_users`
                 WHERE LOWER(`email`) = LOWER(:email)
             ');
-            $forgotUser->bindValue('email', $_POST['email']);
+            $forgotUser->bindValue('email', $authEmail);
             $forgotUser = $forgotUser->execute() ? $forgotUser->fetch(PDO::FETCH_ASSOC) : [];
 
             if (empty($forgotUser)) {
+                tpl_var('auth_forgot_error', 'This user is not registered with us.');
                 break;
             }
 
@@ -208,7 +219,7 @@ MSG;
                 Application::mailer()->send($message);
             }
 
-            header("Location: ?m=reset&u={$forgotUser['user_id']}");
+            header("Location: ?m=reset&username={$forgotUser['user_id']}");
             break;
         }
 
@@ -224,10 +235,10 @@ MSG;
         $userAgent = $_SERVER['HTTP_USER_AGENT'] ?? '';
         $authLoginError = '';
 
-        while ($_SERVER['REQUEST_METHOD'] === 'POST') {
+        while ($isSubmission) {
             $ipAddress = IPAddress::remote()->getString();
 
-            if (!isset($_POST['username'], $_POST['password'])) {
+            if (!isset($authUsername, $authPassword)) {
                 $authLoginError = "You didn't fill all the forms!";
                 break;
             }
@@ -239,17 +250,14 @@ MSG;
                 break;
             }
 
-            $username = $_POST['username'] ?? '';
-            $password = $_POST['password'] ?? '';
-
             $getUser = Database::prepare('
                 SELECT `user_id`, `password`
                 FROM `msz_users`
                 WHERE LOWER(`email`) = LOWER(:email)
                 OR LOWER(`username`) = LOWER(:username)
             ');
-            $getUser->bindValue('email', $username);
+            $getUser->bindValue('email', $authUsername);
-            $getUser->bindValue('username', $username);
+            $getUser->bindValue('username', $authUsername);
             $userData = $getUser->execute() ? $getUser->fetch() : [];
             $userId = (int)($userData['user_id'] ?? 0);
 
@@ -265,7 +273,7 @@ MSG;
                 break;
             }
 
-            if (!password_verify($password, $userData['password'])) {
+            if (!password_verify($authPassword, $userData['password'])) {
                 user_login_attempt_record(false, $userId, $ipAddress, $userAgent);
                 $authLoginError = $loginFailedError;
                 break;
@@ -302,28 +310,24 @@ MSG;
 
         $authRegistrationError = '';
 
-        while ($_SERVER['REQUEST_METHOD'] === 'POST') {
+        while ($isSubmission) {
             if ($preventRegistration) {
                 $authRegistrationError = 'Registration is not allowed on this instance.';
                 break;
             }
 
-            if (!isset($_POST['username'], $_POST['password'], $_POST['email'])) {
+            if (!isset($authUsername, $authPassword, $authEmail)) {
                 $authRegistrationError = "You didn't fill all the forms!";
                 break;
             }
 
-            $username = $_POST['username'] ?? '';
+            $usernameValidation = user_validate_username($authUsername, true);
-            $password = $_POST['password'] ?? '';
-            $email = $_POST['email'] ?? '';
-
-            $usernameValidation = user_validate_username($username, true);
             if ($usernameValidation !== '') {
                 $authRegistrationError = $usernameValidationErrors[$usernameValidation];
                 break;
             }
 
-            $emailValidation = user_validate_email($email, true);
+            $emailValidation = user_validate_email($authEmail, true);
             if ($emailValidation !== '') {
                 $authRegistrationError = $emailValidation === 'in-use'
                     ? 'This e-mail address has already been used!'
@@ -331,15 +335,15 @@ MSG;
                 break;
             }
 
-            if (user_validate_password($password) !== '') {
+            if (user_validate_password($authPassword) !== '') {
                 $authRegistrationError = 'Your password is too weak!';
                 break;
             }
 
             $createUser = user_create(
-                $username,
+                $authUsername,
-                $password,
+                $authPassword,
-                $email,
+                $authEmail,
                 IPAddress::remote()->getString()
             );
 

templates/auth/auth.twig

@@ -1,87 +1,126 @@
 {% extends 'auth/master.twig' %}
 
 {% block content %}
-    <div class="auth-container">
+    <form class="container container--new auth" method="post" action="">
-        <div class="form__wrapper">
+        <input type="hidden" name="auth[mode]" value="login">
-            <input class="form__toggle" id="_authmode_login" type="radio" name="_authmode"{% if auth_mode == 'login' %} checked{% endif %}>
-            <div class="form form--login">
-                <label class="form__title" for="_authmode_login">Login</label>
-                <form class="form__content" method="post" action="?m=login">
-                    <label class="form__row">
-                        <input class="text text--username" type="text" name="username" placeholder="username" value="{{ auth_username|default('') }}" required>
-                    </label>
 
-                    <label class="form__row">
+        <div class="auth__header">
-                        <input class="text text--password" type="password" name="password" placeholder="password" required>
+            <div class="avatar avatar--new auth__avatar" id="login-avatar"
-                    </label>
+                style="background-image:url('/profile.php?u=0&amp;m=avatar');"></div>
-
-                    <div class="form__row form__row--columns">
-                        <div class="form__column form__column--message{% if auth_login_error is defined %} form__column--error{% endif %}">
-                            {{ auth_login_message|default(auth_login_error|default('')) }}
-                        </div>
-
-                        <div class="form__column">
-                            <button class="button button--login">Login</button>
-                        </div>
-                    </div>
-                </form>
-            </div>
         </div>
 
-        <div class="form__wrapper">
+        {% if auth_register_message is defined %}
-            <input class="form__toggle" id="_authmode_register" type="radio" name="_authmode"{% if auth_mode == 'register' %} checked{% endif %}>
+            <div class="warning auth__warning auth__warning--welcome">
-            <div class="form form-register">
+                <div class="warning__content">
-                <label class="form__title" for="_authmode_register">Create an account</label>
+                    {{ auth_register_message }}
-                {% if prevent_registration|default(false) %}
+                </div>
-                    <div class="form__content form__content--no-registration">
-                        <p>You're currently using the site via the public testing website, if you want to create an account please do so from the <a class="form__link" href="https://flashii.net/auth.php?m=register" rel="noopener noreferrer">main website</a>.</p>
-                    </div>
-                {% else %}
-                    <form class="form__content" method="post" action="?m=register">
-                        <label class="form__row">
-                            <input class="text text--username" type="text" name="username" placeholder="username" value="{{ auth_username|default('') }}" required>
-                        </label>
-
-                        <label class="form__row">
-                            <input class="text text--password" type="password" name="password" placeholder="password" required>
-                        </label>
-
-                        <label class="form__row">
-                            <input class="text text--email" type="text" name="email" placeholder="e-mail" value="{{ auth_email|default('') }}" required>
-                        </label>
-
-                        <div class="form__row form__row--columns">
-                            <div class="form__column form__column--message{% if auth_register_error is defined %} form__column--error{% endif %}">
-                                {{ auth_register_message|default(auth_register_error|default('')) }}
-                            </div>
-                            <div class="form__column">
-                                <button class="button button--register">Sign up</button>
-                            </div>
-                        </div>
-                    </form>
-                {% endif %}
             </div>
-        </div>
+        {% elseif auth_login_error is defined %}
-
+            <div class="warning auth__warning">
-        <div class="form__wrapper">
+                <div class="warning__content">
-            <input class="form__toggle" id="_authmode_forgot" type="radio" name="_authmode"{% if auth_mode == 'forgot' %} checked{% endif %}>
+                    {{ auth_login_error }}
-            <div class="form form--forgot">
+                </div>
-                <label class="form__title" for="_authmode_forgot">Forgot your password</label>
-                <form class="form__content" method="post" action="?m=forgot">
-                    <label class="form__row">
-                        <input class="text text--email" type="text" name="email" placeholder="e-mail" value="{{ auth_email|default('') }}" required>
-                    </label>
-
-                    <div class="form__row form__row--columns">
-                        <div class="form__column form__column--message{% if auth_forgot_error is defined %} form__column--error{% endif %}">
-                            {{ auth_forgot_message|default(auth_forgot_error|default('')) }}
-                        </div>
-                        <div class="form__column">
-                            <button class="button button--forgot">Send reminder</button>
-                        </div>
-                    </div>
-                </form>
             </div>
+        {% endif %}
+
+        <div class="auth__form">
+            <input class="input__text input__text--new auth__input" type="text"
+                name="auth[username]" placeholder="Username" id="login-username"
+                value="{{ auth_username|default('') }}" required>
+
+            <input class="input__text input__text--new auth__input" type="password"
+                name="auth[password]" placeholder="Password" required>
+
+            <button class="input__button input__button--new">Login</button>
         </div>
-    </div>
+    </form>
+
+    <form class="container container--new auth" method="post" action="">
+        <input type="hidden" name="auth[mode]" value="register">
+        <div class="container__title">Register</div>
+
+        {% if auth_register_error is defined %}
+            <div class="warning auth__warning">
+                <div class="warning__content">
+                    {{ auth_register_error }}
+                </div>
+            </div>
+        {% endif %}
+
+        <div class="auth__form">
+            <input class="input__text input__text--new auth__input" type="text"
+                name="auth[username]" placeholder="Username"
+                value="{{ auth_username|default('') }}" required>
+
+            <input class="input__text input__text--new auth__input" type="password"
+                name="auth[password]" placeholder="Password" required>
+
+            <input class="input__text input__text--new auth__input" type="text"
+                name="auth[email]" placeholder="E-mail"
+                value="{{ auth_email|default('') }}" required>
+
+            <button class="input__button input__button--new">Sign up</button>
+        </div>
+    </form>
+
+    <form class="container container--new auth" method="post" action="">
+        <input type="hidden" name="auth[mode]" value="forgot">
+        <div class="container__title">Forgot password</div>
+
+        {% if auth_forgot_error is defined %}
+            <div class="warning auth__warning">
+                <div class="warning__content">
+                    {{ auth_forgot_error }}
+                </div>
+            </div>
+        {% endif %}
+
+        <div class="auth__form">
+            <input class="input__text input__text--new auth__input" type="text"
+                name="auth[email]" placeholder="E-mail"
+                value="{{ auth_email|default('') }}" required>
+
+            <button class="input__button input__button--new">Send reminder</button>
+        </div>
+    </form>
+
+    <script>
+        let avatarTimeout = 0;
+
+        function updateLoginAvatar(avatar, username, force) {
+            if (!force) {
+                if (avatarTimeout)
+                    return;
+                console.log(avatarTimeout);
+
+                avatarTimeout = setTimeout(() => {
+                    updateLoginAvatar(avatar, username, true);
+                    clearTimeout(avatarTimeout);
+                    avatarTimeout = 0;
+                }, 750);
+                return;
+            }
+
+            const request = new XMLHttpRequest;
+            request.addEventListener('readystatechange', () => {
+                if (request.readyState !== 4)
+                    return;
+
+                avatar.style.backgroundImage = 'url(\'/profile.php?u=%d&m=avatar\')'.replace('%d', request.responseText);
+            });
+            request.open('GET', '/auth.php?m=get_user&u=' + encodeURI(username.value));
+            request.send();
+        }
+
+        window.addEventListener('load', () => {
+            const avatar = document.getElementById('login-avatar'),
+                username = document.getElementById('login-username');
+
+            updateLoginAvatar(avatar, username, true); // in case there's anything prefilled
+
+            username.addEventListener('keyup', function (ev) {
+                updateLoginAvatar(avatar, username);
+            });
+        });
+    </script>
 {% endblock %}

templates/auth/lockdown.twig

@@ -1,9 +1,11 @@
 {% extends 'auth/master.twig' %}
 
 {% block content %}
-    <div class="auth-container logout">
+    <div class="container container--new auth">
-        <div class="logout__message">
+        <div class="container__title">Unavailable</div>
-            <p class="logout__paragraph">The site is currently unavailable, try again later.</p>
+
+        <div class="container__content">
+            The site is currently unavailable, try again later.
         </div>
     </div>
 {% endblock %}

templates/auth/logout.twig

@@ -1,13 +1,13 @@
 {% extends 'auth/master.twig' %}
 
 {% block content %}
-    <div class="auth-container logout">
+    <div class="container container--new auth">
-        <div class="logout__message">
+        <div class="container__title">Logout confirmation</div>
-            <p class="logout__paragraph">We couldn't verify that you were actually the person attempting to log out.</p>
+
-            <p class="logout__paragraph">Press the button below to verify the logout request, otherwise click back in your browser or close this tab.</p>
+        <div class="auth__form">
-        </div>
+            <p class="auth__paragraph">We couldn't verify that you were actually the person attempting to log out.</p>
-        <div class="logout__buttons">
+            <p class="auth__paragraph">Press the button below to verify the logout request, otherwise click back in your browser or close this tab.</p>
-            <a href="?m=logout&amp;s={{ csrf_token() }}" class="button button--logout">Logout</a>
+            <a href="?m=logout&amp;s={{ csrf_token() }}" class="input__button input__button--new">Logout</a>
         </div>
     </div>
 {% endblock %}

templates/auth/master.twig

@@ -1,2 +1 @@
 {% extends 'master.twig' %}
-{% set is_auth = true %}

templates/auth/password.twig

@@ -1,37 +1,30 @@
 {% extends 'auth/master.twig' %}
 
 {% block content %}
-    <div class="auth-container">
+    <form class="container container--new auth" method="post" action="">
-        <div class="form__wrapper">
+        <input type="hidden" name="auth[mode]" value="reset">
-            <input class="form__toggle" id="_authmode_reset" type="radio" name="_authmode" checked>
+        <input type="hidden" name="auth[user]" value="{{ reset_user.user_id }}">
-            <div class="form form--reset">
+        <div class="container__title">Resetting password for {{ reset_user.username }}</div>
-                <label class="form__title" for="_authmode_reset">Resetting password for {{ reset_user.username }}</label>
-                <form class="form__content" method="post" action="?m=reset">
-                    <input type="hidden" name="user" value="{{ reset_user.user_id }}">
 
-                    <label class="form__row">
+        <div class="warning auth__warning{% if auth_reset_error is not defined %} auth__warning--welcome{% endif %}">
-                        <input class="text text--password" type="text" name="verification" placeholder="verification code" maxlength="12" value="{{ reset_verify|default('') }}" required>
+            <div class="warning__content">
-                    </label>
+                {{ auth_reset_error|default(auth_reset_message|default('')) }}
-
-                    <label class="form__row">
-                        <input class="text text--password" type="password" name="password[new]" placeholder="new password" required>
-                    </label>
-
-                    <label class="form__row">
-                        <input class="text text--password" type="password" name="password[confirm]" placeholder="confirm password" required>
-                    </label>
-
-                    <div class="form__row form__row--columns">
-                        <div class="form__column form__column--message{% if auth_reset_error is defined %} form__column--error{% endif %}">
-                            {{ auth_reset_error|default(auth_reset_message|default('')) }}
-                        </div>
-
-                        <div class="form__column">
-                            <button class="button button--change">Change password</button>
-                        </div>
-                    </div>
-                </form>
             </div>
         </div>
+
+        <div class="auth__form">
+            <input type="{{ reset_verify is defined ? 'hidden' : 'text' }}"
+                class="input__text input__text--new input__text--monospace auth__input" type="text"
+                name="auth[verification]" placeholder="verification code" maxlength="12"
+                value="{{ reset_verify|default('') }}" required>
+
+            <input class="input__text input__text--new auth__input" type="password"
+                name="auth[password][new]" placeholder="new password" required>
+
+            <input class="input__text input__text--new auth__input" type="password"
+                name="auth[password][confirm]" placeholder="confirm password" required>
+
+            <button class="input__button input__button--new">Change password</button>
+        </div>
     </div>
 {% endblock %}

templates/master.twig

@@ -4,13 +4,9 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         {% include '_layout/meta.twig' %}
-        <link href="{{ '/css/mio.css'|asset_url }}" rel="stylesheet">
+        <link href="{{ '/css/style.css'|asset_url }}" rel="stylesheet">
         <link href="{{ '/css/libraries.css'|asset_url }}" rel="stylesheet">
-        {% if is_auth|default(false) %}
-            <link href="{{ '/css/auth.css'|asset_url }}" rel="stylesheet" type="text/css">
-        {% endif %}
         {% if manage_menu is defined %}
-            <link href="{{ '/css/manage.css'|asset_url }}" rel="stylesheet">
             <style>
                 :root {
                     --site-max-width: 1500px;

templates/user/profile.twig

@@ -54,12 +54,12 @@
             <div class="profile__header__options">
                 <div class="profile__header__actions">
                     {% if current_user.user_id|default(0) == profile.user_id %}
-                        <a href="/settings.php" class="profile__header__action">Edit Profile</a>
+                        <a href="/settings.php" class="input__button input__button--new">Edit Profile</a>
                     {% elseif current_user is defined %}
                         {% if friend_info.visitor_relation == constant('MSZ_USER_RELATION_FOLLOW') %}
-                            <a href="/relations.php?u={{ profile.user_id }}&amp;m=remove" class="profile__header__action profile__header__action--destroy">{{ friend_info.profile_relation == constant('MSZ_USER_RELATION_FOLLOW') ? 'Unfriend' : 'Unfollow' }}</a>
+                            <a href="/relations.php?u={{ profile.user_id }}&amp;m=remove" class="input__button input__button--new input__button--destroy">{{ friend_info.profile_relation == constant('MSZ_USER_RELATION_FOLLOW') ? 'Unfriend' : 'Unfollow' }}</a>
                         {% else %}
-                            <a href="/relations.php?u={{ profile.user_id }}&amp;m=add&amp;t=follow" class="profile__header__action">{{ friend_info.profile_relation == constant('MSZ_USER_RELATION_FOLLOW') ? 'Add as Friend' : 'Follow' }}</a>
+                            <a href="/relations.php?u={{ profile.user_id }}&amp;m=add&amp;t=follow" class="input__button input__button--new">{{ friend_info.profile_relation == constant('MSZ_USER_RELATION_FOLLOW') ? 'Add as Friend' : 'Follow' }}</a>
                         {% endif %}
                     {% endif %}
                 </div>
@@ -141,7 +141,7 @@
         <div class="profile__container">
             <div class="profile__container__side">
                 {% if current_user is not defined %}
-                    <div class="profile__accounts">
+                    <div class="container container--new">
                         <div class="profile__accounts__notice">
                             You must <a href="/auth.php?m=login" class="profile__accounts__link">log in</a> to view full profiles!
                         </div>