IcyNetwork/IcyNet.eu
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Port avatar dialog, fix login align

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/script/main.js
View File

@ -1,4 +1,4 @@
window.$ = require('jquery') window.$ = window.jQuery = require('jquery')
window.Popper = require('popper.js') window.Popper = require('popper.js')
require('bootstrap') require('bootstrap')
@ -245,12 +245,7 @@ $(document).ready(function () {
}) })
} }
if ($('#newAvatar').length) { if ($('#removeAvatar').length) {
$('#newAvatar').click(function (e) {
e.preventDefault()
window.Dialog.openPartial('Change Avatar', 'avatar')
})
$('#removeAvatar').click(function (e) { $('#removeAvatar').click(function (e) {
e.preventDefault() e.preventDefault()
$.ajax({ $.ajax({

6
views/includes/external.pug
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") 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 if google_auth
script(src="https://apis.google.com/js/api:client.js") 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 i.fa.fa-fw.fa-google
span Log in With Google span Log in With Google
script. script.
@ -60,10 +60,10 @@
startApp() startApp()
if twitter_auth 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 i.fa.fa-fw.fa-twitter
span Log in With Twitter span Log in With Twitter
if discord_auth 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") img(src="/static/image/Discord-Logo-White.svg")
span Log in With Discord span Log in With Discord

4
views/user/login.pug
View File

@ -6,7 +6,7 @@ block body
.container.mb-4.mt-4 .container.mb-4.mt-4
h1 Log in h1 Log in
.row .row
.col .col-sm-8
if message.text if message.text
if message.error if message.error
.alert.alert-danger .alert.alert-danger
@ -26,5 +26,5 @@ block body
a(href="/register") Create an account a(href="/register") Create an account
| · | ·
a(href="/login/reset") Forgot password? a(href="/login/reset") Forgot password?
aside.col aside.col-sm-4
include ../includes/external.pug include ../includes/external.pug

125
views/user/partials/avatar.pug
View File

@ -1,29 +1,24 @@
.rel.cropbox .rel.cropbox
link(rel="stylesheet", type="text/css", href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css") .row#fileChoose
script(src="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.js") .col
.otherdata
h3 Current Avatar h3 Current Avatar
.avatar .avatar
include ../../includes/avatar.pug include ../../includes/avatar.pug
.inputting .col
h3 Upload new .alert.alert-danger#avatarAlert(style="display: none")
.message.error .form-group
small Max filesize: 1 MB, only .png and .jpg allowed label(for="#fileinput") Choose File
br input.form-control-file#fileinput(type="file", aria-labelledby="#maxFileText")
input(type="file", id="fileinput") small#maxFileText Max file size: 5 MB, only .png and .jpg allowed
.editor(style="display: none") .content#crop(style="display: none;")
h3 Crop the image h3 Crop the Image
img.preview(id="image") .alert.alert-info#cropAlert(style="display: none;") Uploading..
.buttons img.preview#imageCropTag
.button#done Done
.button#cancel Cancel
.button#upload Upload Now
script. script.
window.jQuery = $ function failAlert (msg) {
function message (msg) { $('#avatarAlert').text(msg)
$('.message').text(msg) $('#avatarAlert').show()
$('.message').show()
} }
function dataURItoBlob (dataURI) { function dataURItoBlob (dataURI) {
@ -51,20 +46,21 @@ script.
} }
function cropReady() { function cropReady() {
let cropargs = $('#image').cropper('getData') let cropargs = $('#imageCropTag').cropper('getData')
let cropimage = $('#image').cropper('getCroppedCanvas') let cropimage = $('#imageCropTag').cropper('getCroppedCanvas')
$('#upload').show() $('#btnUpload').show()
$('#done').hide() $('#btnDone').hide()
$('.preview').attr('src', cropimage.toDataURL()) $('#imageCropTag').attr('src', cropimage.toDataURL())
$('.preview').show() $('#imageCropTag').show()
$('#image').cropper('destroy') $('#imageCropTag').cropper('destroy')
let called = false let called = false
$('#upload').click(function (e) { $('#btnUpload').click(function (e) {
if (called) return if (called) return
called = true called = true
$('#upload').hide() $('#btnUpload').hide()
$('#cropAlert').show()
let formData = new FormData() let formData = new FormData()
formData.append('image', dataURItoBlob(fr.result)) formData.append('image', dataURItoBlob(fr.result))
@ -79,14 +75,14 @@ script.
processData: false, processData: false,
contentType: false, contentType: false,
success: function (data) { success: function (data) {
window.Dialog.close() $('avatarModal').modal('hide')
window.location.reload() window.location.reload()
}, },
error: function (err) { error: function (err) {
if (err.responseJSON && err.responseJSON.error) { 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 match = blob.match(/data:image\/(\w+);/)
let screenlen = $('.mobview').is(':visible') let screenlen = $('.mobview').is(':visible')
if (!match) { if (!match) {
return message('Not an image file!') return failAlert('Not an image file!')
} }
if (match[1] !== 'png' && match[1] !== 'jpg' && match[1] !== 'jpeg') { 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() $('#imageCropTag').attr('src', fr.result).hide()
$('.inputting').hide() $('#fileChoose').hide()
$('.otherdata').hide() $('#btnUpload').hide()
$('#upload').hide() $('#btnDone').show()
$('#done').show() $('#crop').show()
$('.editor').show() $('#imageCropTag').cropper({
$('#image').cropper({
aspectRatio: 1 / 1, aspectRatio: 1 / 1,
minContainerHeight: screenlen ? 128 : 512, minContainerHeight: screenlen ? 128 : 512,
minContainerWidth: 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() { function handleFileSelect() {
if (!window.File || !window.FileReader || !window.FileList || !window.Blob) { 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') let input = document.getElementById('fileinput')
if (!input.files) { if (!input.files) {
message('This browser doesn\'t seem to support the `files` property of file inputs.') return failAlert('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) { if (!input.files[0]) {
message('This file is too big. Max: 1 MB') return failAlert('Please select a file.')
} else { }
if (input.files[0].size > 5000000) {
return failAlert('This file is too big. Max: 5 MB')
}
file = input.files[0] file = input.files[0]
fr = new FileReader() fr = new FileReader()
fr.readAsDataURL(file) fr.readAsDataURL(file)
fr.addEventListener('load', function (e) { fr.addEventListener('load', function (e) {
ready(fr.result) ready(fr.result)
}) })
return
}
} }
$(window).ready(function () {
$('#avatarModal').on('hidden.bs.modal', function (e) {
cancel()
})
$('#fileinput').on('change', function (e) { $('#fileinput').on('change', function (e) {
e.preventDefault() e.preventDefault()
handleFileSelect() handleFileSelect()
}) })
$('#cancel').click(function (e) { $('#btnDone').click(function (e) {
$('.inputting').show()
$('.otherdata').show()
$('.editor').hide()
$('#image').cropper('destroy')
})
$('#done').click(function (e) {
cropReady() cropReady()
}) })
})
$('.message').hide()

4
views/user/register.pug
View File

@ -5,8 +5,6 @@ block title
block body block body
.container.mb-4.mt-4 .container.mb-4.mt-4
h1 Create a new account h1 Create a new account
.row
.col
if message.text if message.text
if message.error if message.error
.alert.alert-danger .alert.alert-danger
@ -43,5 +41,3 @@ block body
button.btn.btn-primary(type="submit") Register button.btn.btn-primary(type="submit") Register
| or | or
a(href="/login") log in with an existing account a(href="/login") log in with an existing account
aside.col
include ../includes/external.pug

20
views/user/settings.pug
View File

@ -2,6 +2,10 @@ extends ../layout.pug
block title block title
|Icy Network - User Settings |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 block body
.container.mt-4.mb-4 .container.mt-4.mb-4
nav(aria-label="breadcrumb") nav(aria-label="breadcrumb")
@ -10,6 +14,19 @@ block body
a(href="/") Home a(href="/") Home
li.breadcrumb-item.active(aria-current="page") User Settings li.breadcrumb-item.active(aria-current="page") User Settings
h1 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 .row
.col-3 .col-3
.nav.flex-column.nav-pills#v-pills-tab(role="tablist", aria-orientation="vertical") .nav.flex-column.nav-pills#v-pills-tab(role="tablist", aria-orientation="vertical")
@ -40,7 +57,7 @@ block body
.avatarCont .avatarCont
include ../includes/avatar.pug include ../includes/avatar.pug
.options .options
a#newAvatar(href='#') Change Avatar a(data-toggle="modal", data-target="#avatarModal" href='#') Change Avatar
if user.avatar_file if user.avatar_file
a#removeAvatar(href='#') Remove Avatar a#removeAvatar(href='#') Remove Avatar
button.btn.btn-primary(type="submit") Save Settings button.btn.btn-primary(type="submit") Save Settings
@ -65,7 +82,6 @@ block body
i.fa.fa-fw.fa-times i.fa.fa-fw.fa-times
|Unlink Discord |Unlink Discord
.tab-pane.fade#v-pills-oauth2(role="tabpanel", aria-labelledby="v-pills-oauth2") .tab-pane.fade#v-pills-oauth2(role="tabpanel", aria-labelledby="v-pills-oauth2")
.clients
h2 Authorized Applications 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. 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 .cl#clientlist