external logins now open a popup for convenience

This commit is contained in:
Evert Prants 2017-08-25 21:09:04 +03:00
parent ab06f1a4cd
commit 69af1d2ae1
Signed by: evert
GPG Key ID: 1688DA83D222D0B5
7 changed files with 95 additions and 23 deletions

View File

@ -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) => {

View File

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

View File

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

View File

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

View File

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

15
views/redirect.pug Normal file
View File

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

View File

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