Rewrite avatar upload handling in settings.

assets/less/mio/classes/avatar.less

@@ -8,4 +8,5 @@
     border: 1px solid #9475b2;
     max-height: 200px;
     max-width: 200px;
+    box-sizing: content-box;
 }

assets/less/mio/classes/settings/avatar.less

@@ -1,37 +1,15 @@
-@mio-settings-avatar-mobile: 700px;
-
 .settings__avatar {
-    display: flex;
+    text-align: center;
-    min-height: 200px;
+    display: block;
-    justify-content: space-between;
 
-    @media (max-width: @mio-settings-avatar-mobile) {
+    &__label {
-        flex-direction: column-reverse;
+        cursor: pointer;
-
+        display: block;
-        &__sections {
+        width: 202px;
-            text-align: center;
-        }
     }
 
-    &__form {
+    &__input {
-        display: inline-block;
+        display: none;
-        margin-bottom: 2px;
-    }
-
-    &__requirements {
-        text-align: left;
-        display: inline-block;
-        border: 3px double #9475b2;
-        padding: .5em 2em;
-
-        &__list {
-            list-style: square;
-        }
-    }
-
-    &__forms {
-        padding-top: 2px;
-        flex-grow: 1;
     }
 
     &__preview {
@@ -39,10 +17,56 @@
         flex-shrink: 0;
         min-width: 200px;
         min-height: 200px;
-        display: inline-block;
+    }
 
-        &__container {
+    &__name {
-            text-align: center;
+        background-color: #9475b2;
+        color: #306;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        padding: 0 4px;
+        border-bottom: 1px solid #306;
+    }
+
+    &__buttons {
+        display: flex;
+    }
+
+    &__button {
+        flex: 1 1 auto;
+        border-width: 0;
+        padding: 5px;
+        cursor: pointer;
+        font-family: inherit;
+        background-color: #9475b2;
+        color: #306;
+        font-weight: 700;
+
+        &:not(&--disabled) {
+            &:hover {
+                background-color: #a586c3;
+            }
+
+            &:active {
+                background-color: #8364a1;
+            }
+        }
+
+        &--delete:not(&--disabled) {
+            &:hover {
+                background-color: #b00;
+                color: #400;
+            }
+
+            &:active {
+                background-color: #900;
+                color: #400;
+            }
+        }
+
+        &--disabled {
+            background-color: #888;
+            color: #222;
         }
     }
 }

assets/less/mio/classes/settings/content.less

@@ -5,7 +5,7 @@
         margin: 1px;
     }
 
-    &--avatar {
+    &--images {
         margin: 2px;
     }
 }

assets/less/mio/classes/settings/images.less

@@ -0,0 +1,34 @@
+@mio-settings-images-mobile: 700px;
+
+.settings__images {
+    display: flex;
+    min-height: 200px;
+    justify-content: space-between;
+
+    @media (max-width: @mio-settings-images-mobile) {
+        flex-direction: column-reverse;
+
+        &__sections {
+            text-align: center;
+        }
+    }
+
+    &__requirements {
+        text-align: left;
+        display: inline-block;
+        border: 3px double #9475b2;
+        padding: .5em 2em;
+
+        &__list {
+            list-style: square;
+        }
+    }
+
+    &__requirement {
+        &--header {
+            font-weight: 700;
+            list-style: none;
+            margin-left: -1em;
+        }
+    }
+}

assets/less/mio/main.less

@@ -61,6 +61,7 @@ body {
 @import "classes/settings/errors";
 @import "classes/settings/pagination";
 @import "classes/settings/account";
+@import "classes/settings/images";
 @import "classes/settings/avatar";
 @import "classes/settings/login-history";
 @import "classes/settings/sessions";

public/settings.php

@@ -17,7 +17,7 @@ $settingsModes = [
         'title' => 'Account',
         'allow' => perms_check($userPerms, MSZ_USER_PERM_EDIT_PROFILE),
     ],
-    'avatar' => [
+    'images' => [
         'title' => 'Avatar',
         'allow' => perms_check($userPerms, MSZ_USER_PERM_CHANGE_AVATAR),
     ],
@@ -32,6 +32,11 @@ $settingsModes = [
 ];
 $settingsMode = $_GET['m'] ?? null;
 
+if ($settingsMode === 'avatar') {
+    header('Location: ?m=images');
+    return;
+}
+
 $settingsNavigation = [];
 
 foreach ($settingsModes as $key => $value) {
@@ -223,51 +228,55 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
             }
             break;
 
-        case 'avatar':
+        case 'images':
-            if (isset($_POST['delete'])) {
+            if (!tmp_csrf_verify($_POST['csrf'] ?? '')) {
-                if (!tmp_csrf_verify($_POST['delete'])) {
+                $settingsErrors[] = $csrfErrorString;
-                    $settingsErrors[] = $csrfErrorString;
-                    break;
-                }
-
-                user_avatar_delete($app->getUserId());
                 break;
             }
 
-            if (isset($_POST['upload'])) {
+            if (!empty($_POST['avatar']) && is_array($_POST['avatar']) && !empty($_POST['avatar']['mode'])) {
-                if (!tmp_csrf_verify($_POST['upload'])) {
+                switch ($_POST['avatar']['mode']) {
-                    $settingsErrors[] = $csrfErrorString;
+                    case 'delete':
-                    break;
+                        user_avatar_delete($app->getUserId());
-                }
+                        break;
 
-                if ($_FILES['avatar']['error'] !== UPLOAD_ERR_OK) {
+                    case 'upload':
-                    $settingsErrors[] = sprintf(
+                        if (empty($_FILES['avatar'])
-                        $avatarErrorStrings['upload'][$_FILES['avatar']['error']]
+                            || !is_array($_FILES['avatar'])
-                            ?? $avatarErrorStrings['upload']['default'],
+                            || empty($_FILES['avatar']['name']['file'])) {
-                        $_FILES['avatar']['error'],
+                            break;
-                        byte_symbol($avatarFileSizeMax, true),
+                        }
-                        $avatarWidthMax,
-                        $avatarHeightMax
-                    );
-                    break;
-                }
 
-                $setAvatar = user_avatar_set_from_path($app->getUserId(), $_FILES['avatar']['tmp_name']);
+                        if ($_FILES['avatar']['error']['file'] !== UPLOAD_ERR_OK) {
+                            $settingsErrors[] = sprintf(
+                                $avatarErrorStrings['upload'][$_FILES['avatar']['error']['file']]
+                                    ?? $avatarErrorStrings['upload']['default'],
+                                $_FILES['avatar']['error']['file'],
+                                byte_symbol($avatarFileSizeMax, true),
+                                $avatarWidthMax,
+                                $avatarHeightMax
+                            );
+                            break;
+                        }
 
-                if ($setAvatar !== MSZ_USER_AVATAR_NO_ERRORS) {
+                        $setAvatar = user_avatar_set_from_path(
-                    $settingsErrors[] = sprintf(
+                            $app->getUserId(),
-                        $avatarErrorStrings['set'][$setAvatar]
+                            $_FILES['avatar']['tmp_name']['file']
-                            ?? $avatarErrorStrings['set']['default'],
+                        );
-                        $setAvatar,
+
-                        byte_symbol($avatarFileSizeMax, true),
+                        if ($setAvatar !== MSZ_USER_AVATAR_NO_ERRORS) {
-                        $avatarWidthMax,
+                            $settingsErrors[] = sprintf(
-                        $avatarHeightMax
+                                $avatarErrorStrings['set'][$setAvatar]
-                    );
+                                    ?? $avatarErrorStrings['set']['default'],
+                                $setAvatar,
+                                byte_symbol($avatarFileSizeMax, true),
+                                $avatarWidthMax,
+                                $avatarHeightMax
+                            );
+                        }
+                        break;
                 }
-                break;
             }
-
-            $settingsErrors[] = "You shouldn't have done that.";
             break;
 
         case 'sessions':
@@ -327,7 +336,7 @@ switch ($settingsMode) {
         ]);
         break;
 
-    case 'avatar':
+    case 'images':
         $userHasAvatar = File::exists($app->getStore('avatars/original')->filename($avatarFileName));
         $tpl->vars([
             'avatar_user_id' => $app->getUserId(),

views/mio/master.twig

@@ -32,7 +32,7 @@
                         <div class="container header__user">
                             <div class="container__title">Hey, {{ current_user.username }}!</div>
                             <div class="container__content header__user__content">
-                                <a href="/settings.php?m=avatar" class="avatar header__user__avatar" style="background-image:url('/profile.php?u={{ current_user.user_id }}&amp;m=avatar');"></a>
+                                <a href="/settings.php?m=images" class="avatar header__user__avatar" style="background-image:url('/profile.php?u={{ current_user.user_id }}&amp;m=avatar');"></a>
 
                                 <div class="header__user__links__container">
                                     <ul class="header__user__links">

views/mio/settings/avatar.twig

@@ -1,42 +0,0 @@
-{% extends '@mio/settings/master.twig' %}
-
-{% block settings_content %}
-    <div class="settings__avatar">
-        <div class="settings__avatar__sections">
-            <div class="settings__avatar__requirements">
-                <ul class="settings__avatar__requirements__list">
-                    <li>Your avatar may not be larger than <strong>{{ avatar_max_width }}x{{ avatar_max_height }}</strong>.</li>
-                    <li>The avatar will be centre cropped to be <strong>200x200</strong>.</li>
-                    <li>Your avatar may not exceed the <strong>{{ avatar_max_filesize|byte_symbol(true) }}</strong> filesize limit.</li>
-                    <li>Animated gif images are allowed.</li>
-                    <li>Keep things sane and suitable for all ages.</li>
-                </ul>
-            </div>
-            <div class="settings__avatar__forms">
-                <form class="settings__avatar__form" method="post" action="?m=avatar" enctype="multipart/form-data">
-                    <input type="hidden" name="MAX_FILE_SIZE" value="{{ avatar_max_filesize }}">
-                    <input accept="image/png,image/jpeg,image/gif" type="file" name="avatar" id="avatar-selection">
-                    <button class="input__button" name="upload" value="{{ csrf_token() }}">Upload</button>
-                </form>
-
-                <form class="settings__avatar__form" method="post" action="?m=avatar">
-                    <button class="input__button{% if not user_has_avatar %} input__button--disabled{% endif %}" name="delete" value="{{ csrf_token() }}"{% if not user_has_avatar %} disabled{% endif %}>Delete</button>
-                </form>
-            </div>
-        </div>
-        <div class="settings__avatar__preview__container">
-            <div class="avatar settings__avatar__preview" id="avatar-preview" style="background-image:url('/profile.php?u={{ avatar_user_id }}&amp;m=avatar')"></div>
-        </div>
-    </div>
-    <script>
-        function updateAvatarPreview(url, element) {
-            url = url || "/profile.php?u={{ avatar_user_id }}&m=avatar";
-            element = element || document.getElementById('avatar-preview');
-            element.style.backgroundImage = 'url(\'' + url + '\')';
-        }
-
-        document.getElementById('avatar-selection').addEventListener('change', function (ev) {
-            updateAvatarPreview(URL.createObjectURL(ev.target.files[0]));
-        });
-    </script>
-{% endblock %}

views/mio/settings/images.twig

@@ -0,0 +1,77 @@
+{% extends '@mio/settings/master.twig' %}
+
+{% block settings_content %}
+    <form
+        class="settings__images"
+        method="post"
+        action="?m=avatar"
+        enctype="multipart/form-data">
+        <input type="hidden"
+            name="MAX_FILE_SIZE"
+            value="{{ avatar_max_filesize }}">
+        <input type="hidden"
+            name="csrf"
+            value="{{ csrf_token() }}">
+
+        <div class="settings__images__sections">
+            <div class="settings__images__requirements">
+                <ul class="settings__images__requirements__list">
+                    <li class="settings__images__requirement settings__images__requirement--header">Guidelines</li>
+                    <li class="settings__images__requirement">Keep things sane and suitable for all ages.</li>
+                    <li class="settings__images__requirement">Image may not exceed the <strong>{{ avatar_max_filesize|byte_symbol(true) }}</strong> filesize limit.</li>
+                    <li class="settings__images__requirement settings__images__requirement--header">Avatar</li>
+                    <li class="settings__images__requirement">May not be larger than <strong>{{ avatar_max_width }}x{{ avatar_max_height }}</strong>.</li>
+                    <li class="settings__images__requirement">Will be centre cropped to be <strong>200x200</strong>.</li>
+                    <li class="settings__images__requirement">Animated gif images are allowed.</li>
+                </ul>
+            </div>
+        </div>
+
+        <div class="settings__avatar">
+            <label class="settings__avatar__label">
+                <div
+                    class="avatar settings__avatar__preview"
+                    id="avatar-preview"
+                    style="background-image:url('/profile.php?u={{ avatar_user_id }}&amp;m=avatar')"></div>
+                <input
+                    class="settings__avatar__input"
+                    accept="image/png,image/jpeg,image/gif"
+                    type="file"
+                    name="avatar[file]"
+                    id="avatar-selection">
+                <div class="settings__avatar__name" id="avatar-name">
+                    Click to select a file!
+                </div>
+            </label>
+
+            <div class="settings__avatar__buttons">
+                <button
+                    class="settings__avatar__button"
+                    name="avatar[mode]"
+                    value="upload">
+                    Upload
+                </button>
+                <button
+                    class="settings__avatar__button settings__avatar__button--delete{{ user_has_avatar ? '' : ' settings__avatar__button--disabled' }}"
+                    {{ user_has_avatar ? '' : 'disabled' }}
+                    name="avatar[mode]"
+                    value="delete">
+                    Delete
+                </button>
+            </div>
+        </div>
+    </form>
+    <script>
+        function updateAvatarPreview(name, url, previewEl, nameEl) {
+            url = url || "/profile.php?u={{ avatar_user_id }}&m=avatar";
+            previewEl = previewEl || document.getElementById('avatar-preview');
+            nameEl = nameEl || document.getElementById('avatar-name');
+            previewEl.style.backgroundImage = 'url(\'' + url + '\')';
+            nameEl.textContent = name;
+        }
+
+        document.getElementById('avatar-selection').addEventListener('change', function (ev) {
+            updateAvatarPreview(ev.target.files[0].name, URL.createObjectURL(ev.target.files[0]));
+        });
+    </script>
+{% endblock %}