From 69af1d2ae1d0d5b2ef22603c93a0aa65d6bcc6a0 Mon Sep 17 00:00:00 2001 From: Evert Date: Fri, 25 Aug 2017 21:09:04 +0300 Subject: [PATCH] external logins now open a popup for convenience --- server/routes/api.js | 4 +-- src/script/main.js | 50 ++++++++++++++++++++++++++++++++----- src/style/main.styl | 26 +++++++++++++------ views/includes/external.pug | 4 +-- views/partials/avatar.pug | 5 ++-- views/redirect.pug | 15 +++++++++++ views/settings.pug | 14 ++++++++--- 7 files changed, 95 insertions(+), 23 deletions(-) create mode 100644 views/redirect.pug diff --git a/server/routes/api.js b/server/routes/api.js index a8007d4..74418f5 100644 --- a/server/routes/api.js +++ b/server/routes/api.js @@ -159,7 +159,7 @@ router.get('/external/twitter/callback', wrap(async (req, res) => { uri = createSession(req, user) } - res.redirect(uri) + res.render('redirect', {url: uri}) })) router.get('/external/twitter/remove', wrap(async (req, res) => { @@ -229,7 +229,7 @@ router.get('/external/discord/callback', wrap(async (req, res) => { uri = createSession(req, user) } - res.redirect(uri) + res.render('redirect', {url: uri}) })) router.get('/external/discord/remove', wrap(async (req, res) => { diff --git a/src/script/main.js b/src/script/main.js index 8957024..b5e877d 100644 --- a/src/script/main.js +++ b/src/script/main.js @@ -15,6 +15,27 @@ $(document).ready(function () { } } + // http://www.xtf.dk/2011/08/center-new-popup-window-even-on.html + function PopupCenter (url, title, w, h) { + // Fixes dual-screen position Most browsers Firefox + var dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left + var dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top + + var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width + var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height + + var left = ((width / 2) - (w / 2)) + dualScreenLeft + var top = ((height / 2) - (h / 2)) + dualScreenTop + var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left) + + // Puts focus on the newWindow + if (window.focus) { + newWindow.focus() + } + + return newWindow + } + window.Dialog = $('#dialog') window.Dialog.open = function (title, content, pad) { $('#dialog #title').text(title) @@ -158,18 +179,12 @@ $(document).ready(function () { dataType: 'json', data: response, success: function (data) { - console.log(data) if (data.error) { $('.message').addClass('error') $('.message span').text(data.error) return } - if (data.redirect) { - window.location.href = data.redirect - return - } - window.location.reload() } }).fail(function () { @@ -178,4 +193,27 @@ $(document).ready(function () { }) }) } + + $('.loginDiag').click(function (e) { + e.preventDefault() + var url = $(this).attr('href') + var popup = PopupCenter(url, '_blank', 800, 620) + var timer = setInterval(function () { + if (popup.closed) { + clearInterval(timer) + window.location.reload() + } + }, 1000) + }) + + $('.accdisconnect').click(function (e) { + e.preventDefault() + var url = $(this).attr('href') + $.get({ + url: url, + success: function (e) { + window.location.reload() + } + }) + }) }) diff --git a/src/style/main.styl b/src/style/main.styl index d6d0f7c..0db3408 100644 --- a/src/style/main.styl +++ b/src/style/main.styl @@ -280,7 +280,7 @@ input:not([type="submit"]) display: block padding: 10px width: 215px - margin: 5px 0 + margin-top: 5px background-color: #fff border: 1px solid #ddd border-radius: 5px @@ -296,12 +296,13 @@ input:not([type="submit"]) margin-left: 12px; .discordLogin - display: block; - background-color: #99AAB5; - width: 225px; - height: 40px; - padding: 5px 5px; - border-radius: 5px; + display: block + background-color: #99AAB5 + width: 225px + height: 40px + margin-top: 5px + padding: 5px 5px + border-radius: 5px text-decoration: none span color: white @@ -313,6 +314,14 @@ input:not([type="submit"]) width: 45px display: inline-block +.accdisconnect + margin-top: 5px + padding: 10px + background-color: #ff6c6c + color: #fff + width: 215px + border-radius: 5px + span.divider color: #ddd margin: 0 5px @@ -565,6 +574,9 @@ input.invalid border: 0 !important width: fit-content !important margin: auto + .dialog + width: 100vw !important + min-width: 100vw !important @media all and (max-width: 500px) section diff --git a/views/includes/external.pug b/views/includes/external.pug index a749588..15fc178 100644 --- a/views/includes/external.pug +++ b/views/includes/external.pug @@ -21,10 +21,10 @@ }(document, 'script', 'facebook-jssdk')); 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 twitter_auth - a.twitterLogin(href="/api/external/twitter/login") + a.twitterLogin.loginDiag(href="/api/external/twitter/login") i.fa.fa-fw.fa-twitter span Log in With Twitter if discord_auth - a.discordLogin(href="/api/external/discord/login") + a.discordLogin.loginDiag(href="/api/external/discord/login") img(src="/static/image/Discord-Logo-White.svg") span Log in With Discord diff --git a/views/partials/avatar.pug b/views/partials/avatar.pug index 081fa52..bca2935 100644 --- a/views/partials/avatar.pug +++ b/views/partials/avatar.pug @@ -92,6 +92,7 @@ script. function ready (blob) { let match = blob.match(/data:image\/(\w+);/) + let screenlen = $('.mobview').is(':visible') if (!match) { return message('Not an image file!') } @@ -108,8 +109,8 @@ script. $('.editor').show() $('#image').cropper({ aspectRatio: 1 / 1, - minContainerHeight: 512, - minContainerWidth: 512, + minContainerHeight: screenlen ? 128 : 512, + minContainerWidth: screenlen ? 128 : 512, viewMode: 1 }) } diff --git a/views/redirect.pug b/views/redirect.pug new file mode 100644 index 0000000..fa7db69 --- /dev/null +++ b/views/redirect.pug @@ -0,0 +1,15 @@ +extends layout.pug +block title + |Icy Network - Redirecting + +block body + .wrapper + .boxcont + .box#totpcheck + h1 Redirecting + p Please wait.. + script. + window.close() + setTimeout(() => { + window.location.href = '#{url}' + }, 1000) diff --git a/views/settings.pug b/views/settings.pug index 65d37a2..a7a1db6 100644 --- a/views/settings.pug +++ b/views/settings.pug @@ -21,7 +21,7 @@ block body input(type="text", name="username", id="username", value=user.username, disabled) label(for="display_name") Display Name input(type="text", name="display_name", id="display_name", value=user.display_name) - label(for="display_name") Avatar + label Avatar .avatarCont include includes/avatar.pug .options @@ -33,11 +33,17 @@ block body h3 Social Media Accounts include includes/external.pug if twitter_auth == false - a.option(href="/api/external/twitter/remove") Unlink Twitter + a.option.accdisconnect(href="/api/external/twitter/remove") + i.fa.fa-fw.fa-times + |Unlink Twitter if facebook_auth == false - a.option(href="/api/external/facebook/remove") Unlink Facebook + a.option.accdisconnect(href="/api/external/facebook/remove") + i.fa.fa-fw.fa-times + |Unlink Facebook if discord_auth == false - a.option(href="/api/external/discord/remove") Unlink Discord + a.option.accdisconnect(href="/api/external/discord/remove") + i.fa.fa-fw.fa-times + |Unlink Discord h3 Other Options if password a.option(href="/user/manage/password")