Port avatar dialog, fix login align

This commit is contained in:
Evert Prants 2018-01-29 14:00:06 +02:00
parent 23bfd503c3
commit 1e6b7ee52d
Signed by: evert
GPG Key ID: 1688DA83D222D0B5
6 changed files with 144 additions and 132 deletions

View File

@ -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({

View File

@ -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

View File

@ -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

View File

@ -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()
})

View File

@ -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

View File

@ -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