diff --git a/src/script/main.js b/src/script/main.js index a71b8ea..8a007ad 100644 --- a/src/script/main.js +++ b/src/script/main.js @@ -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({ diff --git a/views/includes/external.pug b/views/includes/external.pug index 18154f3..f8fff47 100644 --- a/views/includes/external.pug +++ b/views/includes/external.pug @@ -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 diff --git a/views/user/login.pug b/views/user/login.pug index 02e783d..052d068 100644 --- a/views/user/login.pug +++ b/views/user/login.pug @@ -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 diff --git a/views/user/partials/avatar.pug b/views/user/partials/avatar.pug index 8866051..5993fa4 100644 --- a/views/user/partials/avatar.pug +++ b/views/user/partials/avatar.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 - 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 + .row#fileChoose + .col + h3 Current Avatar + .avatar + include ../../includes/avatar.pug + .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 { - file = input.files[0] - fr = new FileReader() - fr.readAsDataURL(file) - fr.addEventListener('load', function (e) { - ready(fr.result) - }) - return + 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) + }) } - $('#fileinput').on('change', function (e) { - e.preventDefault() - handleFileSelect() + $(window).ready(function () { + $('#avatarModal').on('hidden.bs.modal', function (e) { + cancel() + }) + + $('#fileinput').on('change', function (e) { + e.preventDefault() + handleFileSelect() + }) + + $('#btnDone').click(function (e) { + cropReady() + }) }) - $('#cancel').click(function (e) { - $('.inputting').show() - $('.otherdata').show() - $('.editor').hide() - $('#image').cropper('destroy') - }) - - $('#done').click(function (e) { - cropReady() - }) - - $('.message').hide() - diff --git a/views/user/register.pug b/views/user/register.pug index b0d5193..48cc306 100644 --- a/views/user/register.pug +++ b/views/user/register.pug @@ -5,43 +5,39 @@ 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 - span #{message.text} - else - .alert.alert-success - span #{message.text} - form#loginForm(method="POST", action="") - input(type="hidden", name="csrf", value=csrf) - .form-group - label(for="username") Username - input.form-control#username(type="text", name="username", value=formkeep.username, aria-labelledby="usernameText") - small#usernameText English characters, numbers and -_ only. - .form-group - label(for="display_name") Display Name - input.form-control#display_name(type="text", name="display_name", value=formkeep.display_name, aria-labelledby="display_nameText") - small#display_nameText The name displayed on your public profiles. - .form-group - label(for="email") Email Address - input.form-control#email(type="email", name="email", value=formkeep.email) - .form-group - label(for="password") Password - input.form-control#password(type="password", name="password", aria-labelledby="passwordText") - small#passwordText 8 characters minimum. - .form-group - label(for="password_repeat") Repeat Password - input.form-control#password_repeat(type="password", name="password_repeat", autocomplete="off") - small#repeatcheck(style="display: none") - if recaptcha - .form-group - label Captcha - script(src='https://www.google.com/recaptcha/api.js') - .g-recaptcha(data-sitekey=recaptcha) - button.btn.btn-primary(type="submit") Register - | or - a(href="/login") log in with an existing account - aside.col - include ../includes/external.pug + if message.text + if message.error + .alert.alert-danger + span #{message.text} + else + .alert.alert-success + span #{message.text} + form#loginForm(method="POST", action="") + input(type="hidden", name="csrf", value=csrf) + .form-group + label(for="username") Username + input.form-control#username(type="text", name="username", value=formkeep.username, aria-labelledby="usernameText") + small#usernameText English characters, numbers and -_ only. + .form-group + label(for="display_name") Display Name + input.form-control#display_name(type="text", name="display_name", value=formkeep.display_name, aria-labelledby="display_nameText") + small#display_nameText The name displayed on your public profiles. + .form-group + label(for="email") Email Address + input.form-control#email(type="email", name="email", value=formkeep.email) + .form-group + label(for="password") Password + input.form-control#password(type="password", name="password", aria-labelledby="passwordText") + small#passwordText 8 characters minimum. + .form-group + label(for="password_repeat") Repeat Password + input.form-control#password_repeat(type="password", name="password_repeat", autocomplete="off") + small#repeatcheck(style="display: none") + if recaptcha + .form-group + label Captcha + script(src='https://www.google.com/recaptcha/api.js') + .g-recaptcha(data-sitekey=recaptcha) + button.btn.btn-primary(type="submit") Register + | or + a(href="/login") log in with an existing account diff --git a/views/user/settings.pug b/views/user/settings.pug index 03125fe..7447cb6 100644 --- a/views/user/settings.pug +++ b/views/user/settings.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,11 +82,10 @@ 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 - p Please enable JavaScript to view this content. + 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 + p Please enable JavaScript to view this content. .tab-pane.fade#v-pills-actions(role="tabpanel", aria-labelledby="v-pills-actions") h3 Account Actions if password