Rewrite avatar upload handling in settings.
This commit is contained in:
parent
5a51ea77d6
commit
694837af1e
9 changed files with 220 additions and 116 deletions
|
|
@ -8,4 +8,5 @@
|
|||
border: 1px solid #9475b2;
|
||||
max-height: 200px;
|
||||
max-width: 200px;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,37 +1,15 @@
|
|||
@mio-settings-avatar-mobile: 700px;
|
||||
|
||||
.settings__avatar {
|
||||
display: flex;
|
||||
min-height: 200px;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
display: block;
|
||||
|
||||
@media (max-width: @mio-settings-avatar-mobile) {
|
||||
flex-direction: column-reverse;
|
||||
|
||||
&__sections {
|
||||
text-align: center;
|
||||
}
|
||||
&__label {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
width: 202px;
|
||||
}
|
||||
|
||||
&__form {
|
||||
display: inline-block;
|
||||
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;
|
||||
&__input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__preview {
|
||||
|
|
@ -39,10 +17,56 @@
|
|||
flex-shrink: 0;
|
||||
min-width: 200px;
|
||||
min-height: 200px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&__container {
|
||||
text-align: center;
|
||||
&__name {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
margin: 1px;
|
||||
}
|
||||
|
||||
&--avatar {
|
||||
&--images {
|
||||
margin: 2px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
34
assets/less/mio/classes/settings/images.less
Normal file
34
assets/less/mio/classes/settings/images.less
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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':
|
||||
if (isset($_POST['delete'])) {
|
||||
if (!tmp_csrf_verify($_POST['delete'])) {
|
||||
$settingsErrors[] = $csrfErrorString;
|
||||
break;
|
||||
}
|
||||
|
||||
user_avatar_delete($app->getUserId());
|
||||
case 'images':
|
||||
if (!tmp_csrf_verify($_POST['csrf'] ?? '')) {
|
||||
$settingsErrors[] = $csrfErrorString;
|
||||
break;
|
||||
}
|
||||
|
||||
if (isset($_POST['upload'])) {
|
||||
if (!tmp_csrf_verify($_POST['upload'])) {
|
||||
$settingsErrors[] = $csrfErrorString;
|
||||
break;
|
||||
}
|
||||
if (!empty($_POST['avatar']) && is_array($_POST['avatar']) && !empty($_POST['avatar']['mode'])) {
|
||||
switch ($_POST['avatar']['mode']) {
|
||||
case 'delete':
|
||||
user_avatar_delete($app->getUserId());
|
||||
break;
|
||||
|
||||
if ($_FILES['avatar']['error'] !== UPLOAD_ERR_OK) {
|
||||
$settingsErrors[] = sprintf(
|
||||
$avatarErrorStrings['upload'][$_FILES['avatar']['error']]
|
||||
?? $avatarErrorStrings['upload']['default'],
|
||||
$_FILES['avatar']['error'],
|
||||
byte_symbol($avatarFileSizeMax, true),
|
||||
$avatarWidthMax,
|
||||
$avatarHeightMax
|
||||
);
|
||||
break;
|
||||
}
|
||||
case 'upload':
|
||||
if (empty($_FILES['avatar'])
|
||||
|| !is_array($_FILES['avatar'])
|
||||
|| empty($_FILES['avatar']['name']['file'])) {
|
||||
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) {
|
||||
$settingsErrors[] = sprintf(
|
||||
$avatarErrorStrings['set'][$setAvatar]
|
||||
?? $avatarErrorStrings['set']['default'],
|
||||
$setAvatar,
|
||||
byte_symbol($avatarFileSizeMax, true),
|
||||
$avatarWidthMax,
|
||||
$avatarHeightMax
|
||||
);
|
||||
$setAvatar = user_avatar_set_from_path(
|
||||
$app->getUserId(),
|
||||
$_FILES['avatar']['tmp_name']['file']
|
||||
);
|
||||
|
||||
if ($setAvatar !== MSZ_USER_AVATAR_NO_ERRORS) {
|
||||
$settingsErrors[] = sprintf(
|
||||
$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(),
|
||||
|
|
|
|||
|
|
@ -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 }}&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 }}&m=avatar');"></a>
|
||||
|
||||
<div class="header__user__links__container">
|
||||
<ul class="header__user__links">
|
||||
|
|
|
|||
|
|
@ -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 }}&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 %}
|
||||
77
views/mio/settings/images.twig
Normal file
77
views/mio/settings/images.twig
Normal file
|
|
@ -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 }}&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 %}
|
||||
Loading…
Add table
Reference in a new issue