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

153
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 .col
.inputting .alert.alert-danger#avatarAlert(style="display: none")
h3 Upload new .form-group
.message.error label(for="#fileinput") Choose File
small Max filesize: 1 MB, only .png and .jpg allowed input.form-control-file#fileinput(type="file", aria-labelledby="#maxFileText")
br small#maxFileText Max file size: 5 MB, only .png and .jpg allowed
input(type="file", id="fileinput") .content#crop(style="display: none;")
.editor(style="display: none") h3 Crop the Image
h3 Crop the image .alert.alert-info#cropAlert(style="display: none;") Uploading..
img.preview(id="image") img.preview#imageCropTag
.buttons
.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) {
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
} }
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) { $(window).ready(function () {
e.preventDefault() $('#avatarModal').on('hidden.bs.modal', function (e) {
handleFileSelect() 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()

76
views/user/register.pug
View File

@ -5,43 +5,39 @@ 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 if message.text
.col if message.error
if message.text .alert.alert-danger
if message.error span #{message.text}
.alert.alert-danger else
span #{message.text} .alert.alert-success
else span #{message.text}
.alert.alert-success form#loginForm(method="POST", action="")
span #{message.text} input(type="hidden", name="csrf", value=csrf)
form#loginForm(method="POST", action="") .form-group
input(type="hidden", name="csrf", value=csrf) label(for="username") Username
.form-group input.form-control#username(type="text", name="username", value=formkeep.username, aria-labelledby="usernameText")
label(for="username") Username small#usernameText English characters, numbers and -_ only.
input.form-control#username(type="text", name="username", value=formkeep.username, aria-labelledby="usernameText") .form-group
small#usernameText English characters, numbers and -_ only. label(for="display_name") Display Name
.form-group input.form-control#display_name(type="text", name="display_name", value=formkeep.display_name, aria-labelledby="display_nameText")
label(for="display_name") Display Name small#display_nameText The name displayed on your public profiles.
input.form-control#display_name(type="text", name="display_name", value=formkeep.display_name, aria-labelledby="display_nameText") .form-group
small#display_nameText The name displayed on your public profiles. label(for="email") Email Address
.form-group input.form-control#email(type="email", name="email", value=formkeep.email)
label(for="email") Email Address .form-group
input.form-control#email(type="email", name="email", value=formkeep.email) label(for="password") Password
.form-group input.form-control#password(type="password", name="password", aria-labelledby="passwordText")
label(for="password") Password small#passwordText 8 characters minimum.
input.form-control#password(type="password", name="password", aria-labelledby="passwordText") .form-group
small#passwordText 8 characters minimum. label(for="password_repeat") Repeat Password
.form-group input.form-control#password_repeat(type="password", name="password_repeat", autocomplete="off")
label(for="password_repeat") Repeat Password small#repeatcheck(style="display: none")
input.form-control#password_repeat(type="password", name="password_repeat", autocomplete="off") if recaptcha
small#repeatcheck(style="display: none") .form-group
if recaptcha label Captcha
.form-group script(src='https://www.google.com/recaptcha/api.js')
label Captcha .g-recaptcha(data-sitekey=recaptcha)
script(src='https://www.google.com/recaptcha/api.js') button.btn.btn-primary(type="submit") Register
.g-recaptcha(data-sitekey=recaptcha) | or
button.btn.btn-primary(type="submit") Register a(href="/login") log in with an existing account
| or
a(href="/login") log in with an existing account
aside.col
include ../includes/external.pug

28
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,11 +82,10 @@ 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 p Please enable JavaScript to view this content.
p Please enable JavaScript to view this content.
.tab-pane.fade#v-pills-actions(role="tabpanel", aria-labelledby="v-pills-actions") .tab-pane.fade#v-pills-actions(role="tabpanel", aria-labelledby="v-pills-actions")
h3 Account Actions h3 Account Actions
if password if password