icynet-auth-server/views/settings/general.pug

72 lines
2.9 KiB
Plaintext

extends ./layout.pug
block title
|General - Account settings | Icy Network
block settings
h1 General settings
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
input#csrf(type="hidden", name="_csrf", value=csrf)
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
form(method="post", action="/account/avatar/delete")
input(type="hidden", name="_csrf", value=csrf)
button.btn.btn-link#remove-avatar(type="submit") Remove avatar
form(method="post", data-noscript, action="/account/avatar", enctype="multipart/form-data")
div.form-container
input(type="hidden", name="_csrf", value=csrf)
label.form-label(for="image") Image
input.form-control#image(type="file", name="file")
small.form-hint Must be less than 10 MB and 1:1 aspect ratio. Enable JavaScript to custom crop your image.
button.btn.btn-primary(type="submit") Change
.modal#avatar-modal(data-modal="avatar", style="display: none")
.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