2022-03-19 10:25:37 +00:00
|
|
|
extends ./layout.pug
|
|
|
|
|
|
|
|
|
|
block title
|
|
|
|
|
|General - Account settings | Icy Network
|
|
|
|
|
|
|
|
|
|
block settings
|
|
|
|
|
h1 General settings
|
2022-03-20 12:09:36 +00:00
|
|
|
if message.text
|
|
|
|
|
if message.error
|
|
|
|
|
.alert.alert-danger
|
|
|
|
|
span #{message.text}
|
|
|
|
|
else
|
|
|
|
|
.alert.alert-success
|
|
|
|
|
span #{message.text}
|
|
|
|
|
.row
|
|
|
|
|
.col
|
|
|
|
|
form(method="post")
|
|
|
|
|
div.form-container
|
2022-03-20 14:50:12 +00:00
|
|
|
input#csrf(type="hidden", name="_csrf", value=csrf)
|
2022-03-20 12:09:36 +00:00
|
|
|
label.form-label(for="username") Username
|
|
|
|
|
input.form-control#username(type="text", name="username", placeholder="Username", disabled, value=user.username)
|
|
|
|
|
label.form-label(for="display_name") Display Name
|
|
|
|
|
input.form-control#display_name(type="text", name="display_name", placeholder="Display name", value=user.display_name)
|
|
|
|
|
button.btn.btn-primary(type="submit") Change
|
|
|
|
|
.col
|
|
|
|
|
.user-avatar.row
|
|
|
|
|
.col.user-avatar__picture
|
|
|
|
|
if user.picture
|
|
|
|
|
img#current-avatar(src='/uploads/' + user.picture.file,alt=user.username)
|
|
|
|
|
else
|
|
|
|
|
img#current-avatar(src='/public/image/avatar.png',alt='No avatar')
|
|
|
|
|
.col.user-avatar__options
|
|
|
|
|
.flex-column(data-script="flex")
|
|
|
|
|
button.btn.btn-primary(data-modal-trigger="avatar") Change avatar
|
|
|
|
|
if user.picture
|
2022-03-20 14:50:12 +00:00
|
|
|
form(method="post", action="/account/avatar/delete")
|
|
|
|
|
input(type="hidden", name="_csrf", value=csrf)
|
|
|
|
|
button.btn.btn-link#remove-avatar(type="submit") Remove avatar
|
2022-08-18 09:34:05 +00:00
|
|
|
|
2022-03-20 12:09:36 +00:00
|
|
|
form(method="post", data-noscript, action="/account/avatar", enctype="multipart/form-data")
|
|
|
|
|
div.form-container
|
2022-03-20 14:50:12 +00:00
|
|
|
input(type="hidden", name="_csrf", value=csrf)
|
2022-03-20 12:09:36 +00:00
|
|
|
label.form-label(for="image") Image
|
|
|
|
|
input.form-control#image(type="file", name="file")
|
2022-08-18 09:34:05 +00:00
|
|
|
small.form-hint Must be less than 10 MB and 1:1 aspect ratio (square). Enable JavaScript to custom crop your image.
|
2022-03-20 12:09:36 +00:00
|
|
|
button.btn.btn-primary(type="submit") Change
|
2022-03-20 14:50:12 +00:00
|
|
|
.modal#avatar-modal(data-modal="avatar", style="display: none")
|
2022-03-20 12:09:36 +00:00
|
|
|
.modal__content
|
|
|
|
|
.modal__title
|
|
|
|
|
|Change avatar
|
|
|
|
|
.modal__title-button
|
|
|
|
|
button.btn.btn-link(data-modal-closer) x
|
|
|
|
|
.modal__body
|
|
|
|
|
div(data-upload-step="1")
|
|
|
|
|
h2 Upload file
|
|
|
|
|
div.form-container
|
|
|
|
|
input#image-file(type="file", name="file")
|
|
|
|
|
small.form-hint Must be less than 10 MB in size.
|
|
|
|
|
div(data-upload-step="2")
|
|
|
|
|
h2 Crop image
|
|
|
|
|
img#cropper
|
|
|
|
|
div(data-upload-step="3")
|
|
|
|
|
h2 Crop result
|
|
|
|
|
p This is how your profile picture will look like:
|
|
|
|
|
img#crop-result
|
|
|
|
|
.modal__footer
|
|
|
|
|
button.btn.btn-link(data-modal-closer) Cancel
|
|
|
|
|
button.btn.btn-primary#continue(data-upload-step="2") Continue
|
|
|
|
|
button.btn.btn-primary#reset(data-upload-step="3") Reset
|
|
|
|
|
button.btn.btn-primary#upload(data-upload-step="3") Upload
|
|
|
|
|
|
