Port avatar dialog, fix login align
This commit is contained in:
parent
23bfd503c3
commit
1e6b7ee52d
GPG Key ID:
1688DA83D222D0B5
@ -1,4 +1,4 @@
|
||||
window.$ = require('jquery')
|
||||
window.$ = window.jQuery = require('jquery')
|
||||
window.Popper = require('popper.js')
|
||||
require('bootstrap')
|
||||
|
||||
@ -245,12 +245,7 @@ $(document).ready(function () {
|
||||
})
|
||||
}
|
||||
|
||||
if ($('#newAvatar').length) {
|
||||
$('#newAvatar').click(function (e) {
|
||||
e.preventDefault()
|
||||
window.Dialog.openPartial('Change Avatar', 'avatar')
|
||||
})
|
||||
|
||||
if ($('#removeAvatar').length) {
|
||||
$('#removeAvatar').click(function (e) {
|
||||
e.preventDefault()
|
||||
$.ajax({
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
fb:login-button(scope="public_profile,email", onlogin="checkLoginState();" data-max-rows="1", data-size="large", data-button-type="login_with", data-show-faces="false", data-auto-logout-link="false", data-use-continue-as="false")
|
||||
if google_auth
|
||||
script(src="https://apis.google.com/js/api:client.js")
|
||||
a.login-btn.google-login
|
||||
a.login-btn.google-login.float-lg-right
|
||||
i.fa.fa-fw.fa-google
|
||||
span Log in With Google
|
||||
script.
|
||||
@ -60,10 +60,10 @@
|
||||
|
||||
startApp()
|
||||
if twitter_auth
|
||||
a.login-btn.twitter-login.login-dialog-pop(href="/api/external/twitter/login")
|
||||
a.login-btn.twitter-login.login-dialog-pop.float-lg-right(href="/api/external/twitter/login")
|
||||
i.fa.fa-fw.fa-twitter
|
||||
span Log in With Twitter
|
||||
if discord_auth
|
||||
a.login-btn.discord-login.login-dialog-pop(href="/api/external/discord/login")
|
||||
a.login-btn.discord-login.login-dialog-pop.float-lg-right(href="/api/external/discord/login")
|
||||
img(src="/static/image/Discord-Logo-White.svg")
|
||||
span Log in With Discord
|
||||
|
||||
@ -6,7 +6,7 @@ block body
|
||||
.container.mb-4.mt-4
|
||||
h1 Log in
|
||||
.row
|
||||
.col
|
||||
.col-sm-8
|
||||
if message.text
|
||||
if message.error
|
||||
.alert.alert-danger
|
||||
@ -26,5 +26,5 @@ block body
|
||||
a(href="/register") Create an account
|
||||
| ·
|
||||
a(href="/login/reset") Forgot password?
|
||||
aside.col
|
||||
aside.col-sm-4
|
||||
include ../includes/external.pug
|
||||
|
||||
@ -1,29 +1,24 @@
|
||||
.rel.cropbox
|
||||
link(rel="stylesheet", type="text/css", href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css")
|
||||
script(src="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.js")
|
||||
.otherdata
|
||||
.row#fileChoose
|
||||
.col
|
||||
h3 Current Avatar
|
||||
.avatar
|
||||
include ../../includes/avatar.pug
|
||||
.inputting
|
||||
h3 Upload new
|
||||
.message.error
|
||||
small Max filesize: 1 MB, only .png and .jpg allowed
|
||||
br
|
||||
input(type="file", id="fileinput")
|
||||
.editor(style="display: none")
|
||||
h3 Crop the image
|
||||
img.preview(id="image")
|
||||
.buttons
|
||||
.button#done Done
|
||||
.button#cancel Cancel
|
||||
.button#upload Upload Now
|
||||
.col
|
||||
.alert.alert-danger#avatarAlert(style="display: none")
|
||||
.form-group
|
||||
label(for="#fileinput") Choose File
|
||||
input.form-control-file#fileinput(type="file", aria-labelledby="#maxFileText")
|
||||
small#maxFileText Max file size: 5 MB, only .png and .jpg allowed
|
||||
.content#crop(style="display: none;")
|
||||
h3 Crop the Image
|
||||
.alert.alert-info#cropAlert(style="display: none;") Uploading..
|
||||
img.preview#imageCropTag
|
||||
|
||||
script.
|
||||
window.jQuery = $
|
||||
function message (msg) {
|
||||
$('.message').text(msg)
|
||||
$('.message').show()
|
||||
function failAlert (msg) {
|
||||
$('#avatarAlert').text(msg)
|
||||
$('#avatarAlert').show()
|
||||
}
|
||||
|
||||
function dataURItoBlob (dataURI) {
|
||||
@ -51,20 +46,21 @@ script.
|
||||
}
|
||||
|
||||
function cropReady() {
|
||||
let cropargs = $('#image').cropper('getData')
|
||||
let cropimage = $('#image').cropper('getCroppedCanvas')
|
||||
let cropargs = $('#imageCropTag').cropper('getData')
|
||||
let cropimage = $('#imageCropTag').cropper('getCroppedCanvas')
|
||||
|
||||
$('#upload').show()
|
||||
$('#done').hide()
|
||||
$('.preview').attr('src', cropimage.toDataURL())
|
||||
$('.preview').show()
|
||||
$('#image').cropper('destroy')
|
||||
$('#btnUpload').show()
|
||||
$('#btnDone').hide()
|
||||
$('#imageCropTag').attr('src', cropimage.toDataURL())
|
||||
$('#imageCropTag').show()
|
||||
$('#imageCropTag').cropper('destroy')
|
||||
|
||||
let called = false
|
||||
$('#upload').click(function (e) {
|
||||
$('#btnUpload').click(function (e) {
|
||||
if (called) return
|
||||
called = true
|
||||
$('#upload').hide()
|
||||
$('#btnUpload').hide()
|
||||
$('#cropAlert').show()
|
||||
let formData = new FormData()
|
||||
formData.append('image', dataURItoBlob(fr.result))
|
||||
|
||||
@ -79,14 +75,14 @@ script.
|
||||
processData: false,
|
||||
contentType: false,
|
||||
success: function (data) {
|
||||
window.Dialog.close()
|
||||
$('avatarModal').modal('hide')
|
||||
window.location.reload()
|
||||
},
|
||||
error: function (err) {
|
||||
if (err.responseJSON && err.responseJSON.error) {
|
||||
message(err.responseJSON.error)
|
||||
failAlert(err.responseJSON.error)
|
||||
}
|
||||
$('#cancel').click()
|
||||
cancel()
|
||||
}
|
||||
})
|
||||
})
|
||||
@ -96,20 +92,19 @@ script.
|
||||
let match = blob.match(/data:image\/(\w+);/)
|
||||
let screenlen = $('.mobview').is(':visible')
|
||||
if (!match) {
|
||||
return message('Not an image file!')
|
||||
return failAlert('Not an image file!')
|
||||
}
|
||||
|
||||
if (match[1] !== 'png' && match[1] !== 'jpg' && match[1] !== 'jpeg') {
|
||||
return message('Unsupported image file')
|
||||
return failAlert('Unsupported image file')
|
||||
}
|
||||
|
||||
$('#image').attr('src', fr.result).hide()
|
||||
$('.inputting').hide()
|
||||
$('.otherdata').hide()
|
||||
$('#upload').hide()
|
||||
$('#done').show()
|
||||
$('.editor').show()
|
||||
$('#image').cropper({
|
||||
$('#imageCropTag').attr('src', fr.result).hide()
|
||||
$('#fileChoose').hide()
|
||||
$('#btnUpload').hide()
|
||||
$('#btnDone').show()
|
||||
$('#crop').show()
|
||||
$('#imageCropTag').cropper({
|
||||
aspectRatio: 1 / 1,
|
||||
minContainerHeight: screenlen ? 128 : 512,
|
||||
minContainerWidth: screenlen ? 128 : 512,
|
||||
@ -117,44 +112,54 @@ script.
|
||||
})
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
$('#fileChoose').show()
|
||||
$('#cropAlert').hide()
|
||||
$('#btnDone').hide()
|
||||
$('#btnUpload').hide()
|
||||
$('#crop').hide()
|
||||
$('#imageCropTag').cropper('destroy')
|
||||
fr = null
|
||||
}
|
||||
|
||||
function handleFileSelect() {
|
||||
if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
|
||||
return message('The File APIs are not fully supported in this browser.')
|
||||
return failAlert('The File APIs are not fully supported in this browser.')
|
||||
}
|
||||
|
||||
let input = document.getElementById('fileinput')
|
||||
if (!input.files) {
|
||||
message('This browser doesn\'t seem to support the `files` property of file inputs.')
|
||||
} else if (!input.files[0]) {
|
||||
message('Please select a file.')
|
||||
} else if (input.files[0].size > 1000000) {
|
||||
message('This file is too big. Max: 1 MB')
|
||||
} else {
|
||||
return failAlert('This browser doesn\'t seem to support the `files` property of file inputs.')
|
||||
}
|
||||
|
||||
if (!input.files[0]) {
|
||||
return failAlert('Please select a file.')
|
||||
}
|
||||
|
||||
if (input.files[0].size > 5000000) {
|
||||
return failAlert('This file is too big. Max: 5 MB')
|
||||
}
|
||||
|
||||
file = input.files[0]
|
||||
fr = new FileReader()
|
||||
fr.readAsDataURL(file)
|
||||
fr.addEventListener('load', function (e) {
|
||||
ready(fr.result)
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
$(window).ready(function () {
|
||||
$('#avatarModal').on('hidden.bs.modal', function (e) {
|
||||
cancel()
|
||||
})
|
||||
|
||||
$('#fileinput').on('change', function (e) {
|
||||
e.preventDefault()
|
||||
handleFileSelect()
|
||||
})
|
||||
|
||||
$('#cancel').click(function (e) {
|
||||
$('.inputting').show()
|
||||
$('.otherdata').show()
|
||||
$('.editor').hide()
|
||||
$('#image').cropper('destroy')
|
||||
})
|
||||
|
||||
$('#done').click(function (e) {
|
||||
$('#btnDone').click(function (e) {
|
||||
cropReady()
|
||||
})
|
||||
|
||||
$('.message').hide()
|
||||
})
|
||||
|
||||
|
||||
@ -5,8 +5,6 @@ block title
|
||||
block body
|
||||
.container.mb-4.mt-4
|
||||
h1 Create a new account
|
||||
.row
|
||||
.col
|
||||
if message.text
|
||||
if message.error
|
||||
.alert.alert-danger
|
||||
@ -43,5 +41,3 @@ block body
|
||||
button.btn.btn-primary(type="submit") Register
|
||||
| or
|
||||
a(href="/login") log in with an existing account
|
||||
aside.col
|
||||
include ../includes/external.pug
|
||||
|
||||
@ -2,6 +2,10 @@ extends ../layout.pug
|
||||
block title
|
||||
|Icy Network - User Settings
|
||||
|
||||
block append links
|
||||
link(rel="stylesheet", type="text/css", href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css")
|
||||
script(src="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.js")
|
||||
|
||||
block body
|
||||
.container.mt-4.mb-4
|
||||
nav(aria-label="breadcrumb")
|
||||
@ -10,6 +14,19 @@ block body
|
||||
a(href="/") Home
|
||||
li.breadcrumb-item.active(aria-current="page") User Settings
|
||||
h1 User Settings
|
||||
.modal.fade#avatarModal(tabindex="-1", role="dialog", aria-labelledby="avatarModalTitle", aria-hidden="true")
|
||||
.modal-dialog.modal-lg(role="document")
|
||||
.modal-content
|
||||
.modal-header
|
||||
h5.modal-title#avatarModalTitle Change Avatar
|
||||
button.close(type="button", data-dismiss="modal", aria-label="Close")
|
||||
span(aria-hidden="true") ×
|
||||
.modal-body
|
||||
include partials/avatar.pug
|
||||
.modal-footer
|
||||
button.btn.btn-secondary(type="button", data-dismiss="modal") Close
|
||||
button.btn.btn-primary#btnDone(type="button", style="display: none;") Done
|
||||
button.btn.btn-primary#btnUpload(type="button", style="display: none;") Upload
|
||||
.row
|
||||
.col-3
|
||||
.nav.flex-column.nav-pills#v-pills-tab(role="tablist", aria-orientation="vertical")
|
||||
@ -40,7 +57,7 @@ block body
|
||||
.avatarCont
|
||||
include ../includes/avatar.pug
|
||||
.options
|
||||
a#newAvatar(href='#') Change Avatar
|
||||
a(data-toggle="modal", data-target="#avatarModal" href='#') Change Avatar
|
||||
if user.avatar_file
|
||||
a#removeAvatar(href='#') Remove Avatar
|
||||
button.btn.btn-primary(type="submit") Save Settings
|
||||
@ -65,7 +82,6 @@ block body
|
||||
i.fa.fa-fw.fa-times
|
||||
|Unlink Discord
|
||||
.tab-pane.fade#v-pills-oauth2(role="tabpanel", aria-labelledby="v-pills-oauth2")
|
||||
.clients
|
||||
h2 Authorized Applications
|
||||
p Applications which have access to basic user information. You may restrict access at any time by pressing the red icon on the top right of the application card.
|
||||
.cl#clientlist
|
||||
|
||||
Reference in New Issue
Block a user