external logins now open a popup for convenience

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

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

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

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

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

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)

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