From caf6ab891523b42b28dd899a437d0783f6c4d705 Mon Sep 17 00:00:00 2001
From: Evert <imsonotsleepy@gmail.com>
Date: Sun, 28 Jan 2018 21:15:53 +0200
Subject: [PATCH 1/5] Start redesign using Bootstrap 4

---
 documents/privacy-policy.html   |   2 +-
 documents/terms-of-service.html |   2 +-
 package-lock.json               |  12 ++
 package.json                    |   2 +
 src/script/main.js              |  13 +-
 src/style/main.styl             | 209 +++++++++++++-------------------
 views/document.pug              |   2 +-
 views/donate.pug                |  76 ++++++------
 views/includes/external.pug     |   8 +-
 views/index.pug                 |  65 ++++++----
 views/layout.pug                | 102 +++++++---------
 views/news/article.pug          |  82 +++++++------
 views/news/composer.pug         |  45 ++++---
 views/news/news.pug             |  64 ++++++----
 views/user/banned.pug           |  43 +++----
 views/user/email_change.pug     |  55 +++++----
 views/user/login.pug            |  45 +++----
 views/user/password.pug         |  33 +++--
 views/user/password_new.pug     |  53 ++++----
 views/user/register.pug         |  60 +++++----
 views/user/settings.pug         | 149 +++++++++++++----------
 views/user/totp-check.pug       |  33 +++--
 views/user/totp.pug             |  65 +++++-----
 23 files changed, 637 insertions(+), 583 deletions(-)

diff --git a/documents/privacy-policy.html b/documents/privacy-policy.html
index 20a3a65..fac384b 100644
--- a/documents/privacy-policy.html
+++ b/documents/privacy-policy.html
@@ -1,4 +1,4 @@
-<div class="tos">
+<div>
 <h1>Privacy Policy</h1>
 <span class="last-modified">Last modified: Friday, 13 Oct 2017</span>
 <p>By using Services of Icy Network, you acknowledge and agree to these policies.</p>
diff --git a/documents/terms-of-service.html b/documents/terms-of-service.html
index 62b97b6..e83077b 100644
--- a/documents/terms-of-service.html
+++ b/documents/terms-of-service.html
@@ -1,4 +1,4 @@
-<div class="tos">
+<div>
 <h1>Terms of Service</h1>
 <span class="last-modified">Last modified: Wednesday, 03 Jan 2018</span>
 <p>Please read the following Terms and Conditions carefully. By using Icy Network services, you signify that you have read, understood and agreed to be bound by these Terms and Conditions. Icy Network reserves the right to modify, replace or remove any of the Terms and Conditions written in this document at any given time without restrictions. We will try to notify you of any such amendments. If you do not agree to these Terms and Conditions, you may not use any of the services provided by Icy Network.</p>
diff --git a/package-lock.json b/package-lock.json
index 3255d55..820a828 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -962,6 +962,12 @@
         "hoek": "4.2.0"
       }
     },
+    "bootstrap": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0.tgz",
+      "integrity": "sha512-gulJE5dGFo6Q61V/whS6VM4WIyrlydXfCgkE+Gxe5hjrJ8rXLLZlALq7zq2RPhOc45PSwQpJkrTnc2KgD6cvmA==",
+      "dev": true
+    },
     "brace-expansion": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.8.tgz",
@@ -5690,6 +5696,12 @@
       "integrity": "sha1-0aIUg/0iu0HlihL6NCGCMUCJfEU=",
       "dev": true
     },
+    "popper.js": {
+      "version": "1.12.9",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.12.9.tgz",
+      "integrity": "sha1-DfvC3/lsRRuzMu3Pz6r1ZtMx1bM=",
+      "dev": true
+    },
     "postcss": {
       "version": "6.0.14",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.14.tgz",
diff --git a/package.json b/package.json
index f7b64d7..b970fe7 100644
--- a/package.json
+++ b/package.json
@@ -62,11 +62,13 @@
   "devDependencies": {
     "babel-loader": "^7.1.2",
     "babel-preset-env": "^1.6.1",
+    "bootstrap": "^4.0.0",
     "concurrently": "^3.5.1",
     "eslint-plugin-import": "^2.8.0",
     "jquery": "^3.2.1",
     "morgan": "^1.9.0",
     "mustache": "^2.3.0",
+    "popper.js": "^1.12.9",
     "standard": "^10.0.3",
     "uglifyjs-webpack-plugin": "^1.1.2",
     "vue-clickaway": "^2.1.0",
diff --git a/src/script/main.js b/src/script/main.js
index b510445..a71b8ea 100644
--- a/src/script/main.js
+++ b/src/script/main.js
@@ -1,4 +1,6 @@
 window.$ = require('jquery')
+window.Popper = require('popper.js')
+require('bootstrap')
 
 $(document).ready(function () {
   function pwcheck (e) {
@@ -201,11 +203,10 @@ $(document).ready(function () {
         var html = ''
         for (var i in data) {
           var article = data[i]
-          html += '<div class="prvarticle">'
-          html += '<a class="title" href="/news/' + article.id + '-' + article.slug + '">' + article.title + '</a>'
-          html += '<span class="timestamp">Published at ' + new Date(article.created_at) + '</span>'
-          html += '<div class="prvcontent">' + article.description + '</div>'
-          html += '<a href="/news/' + article.id + '-' + article.slug + '">Read More</a>'
+          html += '<div class="news-article">'
+          html += '<h2 class="news-title"><a href="/news/' + article.id + '-' + article.slug + '">' + article.title + '</a></h2>'
+          html += '<p class="news-meta">Published at ' + new Date(article.created_at) + '</p>'
+          html += '<div class="news-content">' + article.content + '</div>'
           html += '</div>'
         }
         $('.newsfeed').html(html)
@@ -303,7 +304,7 @@ $(document).ready(function () {
     })
   }
 
-  $('.loginDiag').click(function (e) {
+  $('.login-dialog-pop').click(function (e) {
     e.preventDefault()
     var url = $(this).attr('href')
     var popup = PopupCenter(url, '_blank', 800, 620)
diff --git a/src/style/main.styl b/src/style/main.styl
index af880f2..4d0c033 100644
--- a/src/style/main.styl
+++ b/src/style/main.styl
@@ -1,22 +1,6 @@
 body
     margin: 0
     color: black
-    font-family: sans-serif
-    /*background-color: #82fff4;
-    background-image: linear-gradient(-45deg, #80d7ff 25%, transparent 25.5%, transparent 50%, 
-        #80d7ff 50.5%, #80d7ff 75%, transparent 75.5%, transparent)
-    height: 100vh;
-    background-size: 50px 50px;*/
-    background: #6fefff
-    background: -moz-linear-gradient(top, #6fefff 0%, #53cbf1 51%, #05abe0 100%)
-    background: -webkit-linear-gradient(top, #6fefff 0%,#53cbf1 51%,#05abe0 100%)
-    background: linear-gradient(to bottom, #6fefff 0%,#53cbf1 51%,#05abe0 100%)
-
-a
-    color: green
-    text-decoration: none
-    &:hover
-        text-decoration: underline
 
 .logo
     font-size: 8vw
@@ -109,30 +93,44 @@ a
         &:checked ~ .list
             max-height: 500px
 
-section
-    font-family: "Open Sans"
-    position: relative
-    min-height: 100vh
-    .content
-        position: absolute
-        left: 0
-        right: 0
-        top: 0
-        bottom: 40%
-        overflow: auto
-        background-color: #ffffff
-        padding: 20px
-    &#home
-        h1
-            font-size: 300%
-            text-align: center
-            color: green
-            margin-bottom: 0
-        p
-            text-align: center;
-            font-size: 200%
-            color: #0074d0;
-            font-weight: bold;
+.carousel
+    margin-bottom: 4rem
+
+    .carousel-item
+        height: 40rem
+        background-color: #777
+
+        & > img
+            position: absolute
+            top: 0
+            left: 0
+            min-width: 100%
+            height: 40rem
+
+.marketing .col-lg-4
+    margin-bottom: 1.5rem
+    text-align: center
+    
+    .circular-header
+        width: 140px
+        height: 140px
+        vertical-align: middle
+        display: inline-block
+        border-radius: 50% !important
+        line-height: 9rem
+        font-size: 5rem
+        color: #fff
+
+.news-article
+    margin-bottom: 4rem
+    
+    .news-title
+        margin-bottom: .25rem
+        font-size: 2.5rem
+    
+    .news-meta
+        margin-bottom: 1.25rem
+        color: #999
 
 .divboxes
     text-align: center
@@ -178,35 +176,6 @@ section
 code
     white-space: pre
 
-label
-    display: block
-    margin-top: 20px
-
-input:not([type="submit"])
-    padding: 5px
-    font-size: 120%
-    border-radius: 5px
-    border: 1px solid #c1c1c1
-    background-color: #f5f5f5
-    color: #000
-    box-shadow: inset 2px 2px 5px #ddd
-    transition: border 0.1s linear
-
-button, .button, input[type="submit"]
-    display: block
-    padding: 5px 10px
-    background-color: #fbfbfb
-    color: #000
-    border: 1px solid #c1c1c1
-    border-radius: 5px
-    font-size: 120%
-    margin: 10px 0
-    cursor: pointer
-    &.active
-        background-color: #ddd
-
-input[disabled]
-    color: #959595
 
 .button
     display: inline-block
@@ -260,8 +229,8 @@ input[disabled]
         color: #a9a9a9
         font-style: italic
 
-.dlbtn 
-    display: block
+.app-button
+    display: inline-block
     img
         width: 200px
     &.apple
@@ -269,63 +238,56 @@ input[disabled]
             width: 175px
             padding: 0 12px
 
-.twitterLogin
+.login-btn
     display: block
-    padding: 10px
-    width: 215px
-    margin-top: 5px
-    background-color: #fff
-    border: 1px solid #ddd
-    border-radius: 5px
     text-decoration: none
-    i
-        color: #03A9F4
-        font-size: 22px
-    span
-        color: #000
-        display: inline-block
-        vertical-align: top
-        margin-top: 3px
-        margin-left: 12px
-
-.discordLogin
-    display: block
-    background-color: #99AAB5
-    width: 225px
-    height: 40px
+    border-radius: 5px
     margin-top: 5px
     padding: 5px 5px
-    border-radius: 5px
-    text-decoration: none
-    span
-        color: white
-        vertical-align: top
-        margin-top: 11px
-        margin-left: 3px
-        display: inline-block
-    img
-        width: 45px
-        display: inline-block
-
-.googleLogin
-    padding: 10px
     width: 215px
-    margin-top: 5px
-    background-color: #4285f4
-    border: 1px solid #ddd
-    border-radius: 5px
-    text-decoration: none
-    display: block
+    height: 50px
     cursor: pointer
-    i
-        color: #fff
-        font-size: 22px
-    span
-        color: #fff
-        display: inline-block
-        vertical-align: top
-        margin-top: 3px
-        margin-left: 12px
+
+    &.twitter-login
+        background-color: #fff
+        border: 1px solid #ddd
+        line-height: 2.2rem
+        
+        i
+            color: #03A9F4
+            font-size: 22px
+        span
+            color: #000
+            display: inline-block
+            vertical-align: top
+            margin-left: 12px
+
+    &.discord-login
+        background-color: #99aab5
+        line-height: 2.4rem
+        
+        span
+            color: white
+            vertical-align: top
+            margin-left: 3px
+            display: inline-block
+        img
+            width: 45px
+            display: inline-block
+
+    &.google-login
+        background-color: #4285f4
+        border: 1px solid #ddd
+        line-height: 2.2rem
+
+        i
+            color: #fff
+            font-size: 22px
+        span
+            color: #fff
+            display: inline-block
+            vertical-align: top
+            margin-left: 12px
 
 .accdisconnect
     margin-top: 5px
@@ -462,9 +424,6 @@ span.load
         .prvcontent
             margin: 10px 0
 
-.return
-    margin-top: 40px
-
 .content
     hr
         border-color: #ffffff
diff --git a/views/document.pug b/views/document.pug
index 4a3fbeb..7e9c419 100644
--- a/views/document.pug
+++ b/views/document.pug
@@ -4,5 +4,5 @@ block title
 	|Icy Network
 
 block body
-	.document
+	.container.mt-4
 		.content !{doc}
diff --git a/views/donate.pug b/views/donate.pug
index 6d22ca4..5f18331 100644
--- a/views/donate.pug
+++ b/views/donate.pug
@@ -3,43 +3,43 @@ block title
 	|Icy Network - Donate
 
 block body
-	.wrapper
-		.boxcont
-			.box#donate
-				h1 Donate
-				p Donations help us pay for the services required to keep Icy Network running. Donating any amount would be highly appreciated!
-				
-				- var formurl = "https://www.paypal.com/cgi-bin/webscr"
-				if sandbox
-					- formurl = "https://www.sandbox.paypal.com/cgi-bin/webscr"
-				
-				form(action=formurl, method="post")
-					input(type="hidden" name="cmd" value="_xclick")
-					input(type="hidden" name="business" value=business)
-					input(type="hidden" name="item_name" value=name)
-					input(type="hidden" name="item_number" value="1")
-					input(type="hidden" name="no_shipping" value="1")
-					input(type="hidden" name="quantity" value="1")
-					input(type="hidden" name="tax" value="0")
-					input(type="hidden" name="notify_url" value=ipn_url)
-					label(for="amount") Amount
-					input(type="number", name="amount" value="1.00")
-					select(name="currency_code")
+	.container.mb-4.mt-4
+		h1 Donate
+		p Donations help us pay for the servers required to keep Icy Network running. Donating any amount would be highly appreciated!
+		
+		- var formurl = "https://www.paypal.com/cgi-bin/webscr"
+		if sandbox
+			- formurl = "https://www.sandbox.paypal.com/cgi-bin/webscr"
+		
+		form(action=formurl, method="post")
+			input(type="hidden" name="cmd" value="_xclick")
+			input(type="hidden" name="business" value=business)
+			input(type="hidden" name="item_name" value=name)
+			input(type="hidden" name="item_number" value="1")
+			input(type="hidden" name="no_shipping" value="1")
+			input(type="hidden" name="quantity" value="1")
+			input(type="hidden" name="tax" value="0")
+			input(type="hidden" name="notify_url" value=ipn_url)
+			label(for="amount") Amount
+			.row.form-group
+				.col-10
+					input.form-control(type="number", name="amount" value="1.00")
+				.col
+					select.form-control(name="currency_code")
 						option(value="EUR") EUR
 						option(value="USD") USD
-					if user
-						input#custominfo(type="hidden", name="custom", value="userid:" + user.id)
-					else
-						input#custominfo(type="hidden", name="custom", value="")
-					if minecraft
-						.check
-							label(for="mcinclude") Include Minecraft Username
-							input(id="mcinclude" type="checkbox")
-							.mcuname(style="display: none;")
-								input(id="mcusername", autocomplete="off")
-					.buttoncont
-						a.button.donate(name="submit", onclick="$(this).closest('form').submit()")
-							i.fa.fa-fw.fa-paypal
-							|Donate
-					br
-					b Currently you can only donate using PayPal.
+			if user
+				input#custominfo(type="hidden", name="custom", value="userid:" + user.id)
+			else
+				input#custominfo(type="hidden", name="custom", value="")
+			if minecraft
+				.form-check.form-check-inline
+					input.form-check-input(id="mcinclude" type="checkbox" checked="false")
+					label.form-check-label(for="mcinclude") Include Minecraft Username
+				.mcuname.form-group(style="display: none;")
+					label(for="mcusername") Minecraft Username
+					input.form-control(id="mcusername", autocomplete="off")
+			.buttoncont
+				a.btn.btn-primary.text-light(name="submit", onclick="$(this).closest('form').submit()")
+					i.fa.fa-fw.fa-paypal
+					|&nbsp;Donate
diff --git a/views/includes/external.pug b/views/includes/external.pug
index 3bfee73..18154f3 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.googleLogin
+		a.login-btn.google-login
 			i.fa.fa-fw.fa-google
 			span Log in With Google
 		script.
@@ -35,7 +35,7 @@
 						cookiepolicy: 'single_host_origin',
 						fetch_basic_profile: true
 					});
-					attachSignin(document.querySelector('.googleLogin'));
+					attachSignin(document.querySelector('.google-login'));
 				});
 			};
 
@@ -60,10 +60,10 @@
 
 			startApp()
 	if twitter_auth
-		a.twitterLogin.loginDiag(href="/api/external/twitter/login")
+		a.login-btn.twitter-login.login-dialog-pop(href="/api/external/twitter/login")
 			i.fa.fa-fw.fa-twitter
 			span Log in With Twitter
 	if discord_auth
-		a.discordLogin.loginDiag(href="/api/external/discord/login")
+		a.login-btn.discord-login.login-dialog-pop(href="/api/external/discord/login")
 			img(src="/static/image/Discord-Logo-White.svg")
 			span Log in With Discord
diff --git a/views/index.pug b/views/index.pug
index 3d1138a..80f549e 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -3,25 +3,46 @@ block title
 	|Icy Network
 
 block body
-	section#home
-		.content
-			h1 Welcome to Icy Network!
-			p Icy Network is a Global Network of Communities and Websites, United by a Single Login
-			.divboxes
-				.divbox#secure
-					span.head 
-						i.fa.fa-lock.fa-fw
-						span.text Secure Login
-					span.text A secure login system with Two-Factor Authentication possibility
-				.divbox#secure
-					span.head 
-						i.fa.fa-github.fa-fw
-						span.text Open Source
-					span.text All of our platforms are Open Source Software hosted on our 
-						a(href="https://github.com/IcyNet", target="_blank") GitHub Organization
-	section#news
-		.content
-			h1 Icy Network News
-			.newsfeed
-				p Please enable JavaScript to view this content.
-			a.older(href="/news") View all articles
+	.carousel.slide#myCarousel(data-ride="carousel")
+		ol.carousel-indicators
+			li.active(data-target="#myCarousel" data-slide-to="0")
+			li(data-target="#myCarousel" data-slide-to="1")
+		.carousel-inner
+			.carousel-item.active
+				img.first-slide(src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==", alt="First Slide")
+				.container
+					.carousel-caption.text-left
+						h1 Welcome to Icy Network
+						p Icy Network is a Global Network of Communities and Websites, United by a Single Login
+						a.btn.btn-lg.btn-primary(href="#" role="button") Learn More
+			.carousel-item
+				img.second-slide(src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==", alt="Second Slide")
+				.container
+					.carousel-caption.text-left
+						h1 Join our Minecraft Server
+						p We have a Minecraft Server up at mc.icynet.eu, join now!
+		a.carousel-control-prev(href="#myCarousel" role="button" data-slide="prev")
+			span.carousel-control-prev-icon(aria-hidden="true")
+			span.sr-only Previous
+		a.carousel-control-next(href="#myCarousel" role="button" data-slide="next")
+			span.carousel-control-next-icon(aria-hidden="true")
+			span.sr-only Next
+	.container.marketing
+		.row
+			.col-lg-4
+				span.circular-header.bg-warning
+					i.fa.fa-fw.fa-lock
+				h2 Secure Login
+				p We have a secure login system with the possibility to even further secure your account with Two-Factor Authentication.
+			.col-lg-4
+				span.circular-header.bg-success
+					i.fa.fa-fw.fa-github
+				h2 Open Source
+				p All of our services are Free and Open Source Software (FOSS) hosted on GitHub.
+				p
+					a.btn.btn-secondary(href="https://github.com/IcyNet", target="_blank") Browse Repositories
+			.col-lg-4
+				span.circular-header.bg-info
+					i.fa.fa-fw.fa-users
+				h2 Community-oriented
+				p Our services are made to serve communities. We unite them all with a single login system with support for multiple authentication protocols.
diff --git a/views/layout.pug b/views/layout.pug
index 2edeb80..faa481d 100644
--- a/views/layout.pug
+++ b/views/layout.pug
@@ -2,7 +2,7 @@ doctype html
 html
 	head
 		meta(charset="utf8")
-		meta(name="viewport", content="width=device-width, initial-scale=1")
+		meta(name="viewport", content="width=device-width, initial-scale=1, shrink-to-fit=no")
 		block meta
 			meta(name="og:title", content="Icy Network")
 			meta(name="og:description", content="Icy Network is a Global Network of Communities and Websites, United by a Single Login")
@@ -27,8 +27,8 @@ html
 					g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
 				})();
 		block links
+			link(rel="stylesheet", type="text/css", href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css")
 			link(rel="stylesheet", type="text/css", href="/style/main.css")
-			link(rel="stylesheet", type="text/css", href="/style/footer.css")
 			link(rel="stylesheet", type="text/css", href="//fonts.googleapis.com/css?family=Open+Sans")
 			link(rel="stylesheet", type="text/css", href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css")
 			script(src="/script/main.js")
@@ -59,69 +59,51 @@ html
 			p Please consider enabling JavaScript for the full experience.
 			if matomo
 				p
-					img(src="#{matomo.track_url}piwik.php?idsite=1&rec=1" style="border:0;" alt="")
-		block banner
-			.banner
-				.logo
-					.part1 Icy
-					.part2 Network
-		block dialog
-			.dialog-drop#dialog
-				.dialog
-					.head
-						#title
-						#close
-							i.fa.fa-fw.fa-times
-					.content#content
+					img.d-inline-block.align-top(src="#{matomo.track_url}piwik.php?idsite=1&rec=1" style="border:0;" alt="")
+
 		block nav
-			.anchor
-			nav.navigator
-				li.hidden#navlogo
-					a(href="/")
-						.logo.small
-							.part1 Icy
-							.part2 Network
-				.menu
-					label.showButton(for="show-menu")
-						i.fa.fa-fw.fa-bars
-					input(type="checkbox" id="show-menu")
-					.list
-						ul
-							li
-								a.scroll(href="/#home") Home
-							li
-								a.scroll(href="/#news") News
-							li
-								a(href="https://forum.icynet.eu/") Forum
-						ul.floating
-							if user
-								li#user
-									a(href="/user/manage") #{user.display_name}
-								li
-									a(href="/logout") Log out
-							else
-								li
-									a(href="/login") Log in
-		block body
-		block footer
-			footer
-				img.squeebot(src="/static/image/squeebot.svg")
-				span.copyright
-					.logo.small
-							.part1 Icy
-							.part2 Network
-					.social
+			nav.navbar.navbar-expand-lg.navbar-light.bg-light.sticky-top
+				a.navbar-brand(href="/")
+					img(src="/static/image/icynet-icon.svg" width="30" heigth="30")
+					|Icy Network
+
+				button.navbar-toggler(type="button" data-toggle="collapse" data-target="#navCollapse" aria-controls="navCollapse" aria-expanded="false" aria-label="Toggle navigation")
+					span.navbar-toggler-icon
+
+				.navbar-collapse.collapse#navCollapse
+					ul.mr-auto.navbar-nav
+						li.nav-item
+							a.nav-link(href="/") Home
+						li.nav-item
+							a.nav-link(href="/news") News
+						li.nav-item
+							a.nav-link(href="https://forum.icynet.eu/") Forum
+					ul.navbar-nav.my-2.my-lg-0
+						if user
+							li.nav-item
+								a.nav-link(href="/user/manage") #{user.display_name}
+							li.nav-item
+								a.nav-link(href="/logout") Log out
+						else
+							li.nav-item
+								a.nav-link(href="/login") Log in
+		main(role="main")
+			block body
+			block footer
+				//FOOTER
+				footer.container
+					p.float-right
 						a.socialbtn#github(href="https://github.com/IcyNet/" target="_blank")
 							i.fa.fa-fw.fa-github
 						a.socialbtn#twitter(href="https://twitter.com/IcyNet" target="_blank")
 							i.fa.fa-fw.fa-twitter
 						a.socialbtn#discord(href="https://discord.gg/Xe7MKSx" target="_blank")
 							span.discordlogo
-					span &copy; 2018 - Icy Network - Some Rights Reserved
-					br
-					span 
-						a(href="/docs/terms-of-service") Terms of Service
-						span.divider |
-						a(href="/docs/privacy-policy") Privacy Policy
-						span.divider |
+					p
+						|&copy; 2017-2018 Icy Network
+						|  · 
+						a(href="/docs/terms-of-service") Terms
+						|  · 
+						a(href="/docs/privacy-policy") Privacy
+						|  · 
 						a(href="/donate") Donate
diff --git a/views/news/article.pug b/views/news/article.pug
index 4e3c647..8b77a82 100644
--- a/views/news/article.pug
+++ b/views/news/article.pug
@@ -24,45 +24,47 @@ block title
 		|Icy Network - News - 404
 
 block body
-	.document
-		.content
-			if !article
-				span.error No such article
-			else
-				.article
-					if user && user.privilege && user.privilege > 0 && !editing
-						a.button(style="float: right;" href="?edit=1") Edit
-					.title= article.title
-					.author Published by 
-						span #{article.author.display_name} 
-						|at 
-						.timestamp #{new Date(article.created_at)}
-					if editing
-						.content(contenteditable="true" id="editor1")!= article.content
-					else
-						.content!= article.content
-					if editing
-						.button(id="done") Done editing
-						br
-						script.
-							CKEDITOR.disableAutoInline = true;
-							CKEDITOR.inline('editor1');
-							$('#done').click(function (e) {
-								let data = CKEDITOR.instances.editor1.getData();
-								$.post({
-									url: '/api/news/edit/#{article.id}',
-									data: {content: data},
-									success: function () {
-										window.location.href = '/news/#{article.id}-#{article.slug}'
-									},
-									error: function (e) {
-										if (e.responseJSON && e.responseJSON.error) {
-											alert(e.responseJSON.error);
-										}
+	.container.mt-4
+		if !article
+			span.error No such article
+		else
+			nav(aria-label="breadcrumb")
+				ol.breadcrumb
+					li.breadcrumb-item 
+						a(href="/") Home
+					li.breadcrumb-item 
+						a(href="/news") News
+					li.breadcrumb-item.active(aria-current="page")= article.title
+
+			.news-article
+				if user && user.privilege && user.privilege > 0 && !editing
+					a.btn.btn-primary.float-right(href="?edit=1") Edit
+				h1.news-title= article.title
+				p.news-meta Published by 
+					span #{article.author.display_name} 
+					|at #{new Date(article.created_at)}
+				if editing
+					.content(contenteditable="true" id="editor1")!= article.content
+				else
+					.content!= article.content
+				if editing
+					.btn.btn-success(id="done") Done editing
+					br
+					script.
+						CKEDITOR.disableAutoInline = true;
+						CKEDITOR.inline('editor1');
+						$('#done').click(function (e) {
+							let data = CKEDITOR.instances.editor1.getData();
+							$.post({
+								url: '/api/news/edit/#{article.id}',
+								data: {content: data},
+								success: function () {
+									window.location.href = '/news/#{article.id}-#{article.slug}'
+								},
+								error: function (e) {
+									if (e.responseJSON && e.responseJSON.error) {
+										alert(e.responseJSON.error);
 									}
-								});
+								}
 							});
-
-			.return
-				a(href="/news") Back to the news archive
-
+						});
diff --git a/views/news/composer.pug b/views/news/composer.pug
index cbd0059..d25a02b 100644
--- a/views/news/composer.pug
+++ b/views/news/composer.pug
@@ -7,25 +7,34 @@ block title
 	|Icy Network - News - Compose
 
 block body
-	.document
-		.content
-			if message.text
-				if message.error
-					.message.error
-						span #{message.text}
-				else
-					.message
-						span #{message.text}
-			form(action="", method="post")
-				input(type="hidden", name="csrf", value=csrf)
+	.container.mt-4.mb-4
+		nav(aria-label="breadcrumb")
+			ol.breadcrumb
+				li.breadcrumb-item 
+					a(href="/") Home
+				li.breadcrumb-item 
+					a(href="/news") News
+				li.breadcrumb-item.active(aria-current="page") Compose
+		if message.text
+			if message.error
+				.alert.alert-danger
+					span #{message.text}
+			else
+				.alert.alert-warning
+					span #{message.text}
+		form(action="", method="post")
+			input(type="hidden", name="csrf", value=csrf)
+			.form-group
 				label(for="title") Title
-				input(type="text", name="title", id="title", value=formkeep.title)
+				input.form-control(type="text", name="title", id="title", value=formkeep.title, aria-describedby="titleHelp")
+				small.form-text.text-muted#titleHelp Describe your article in a short sentence
+			.form-group
 				label(for="composer1") Content
-				textarea(name="content" id="composer1") #{formkeep.content}
+				textarea.form-control(name="content" id="composer1") #{formkeep.content}
+			.form-group
 				label(for="tags") Tags
-				input(type="text", name="tags", id="tags", value=formkeep.tags)
-				input(type="submit", value="Submit")
-			script.
-				CKEDITOR.replace('composer1')
-			a(href="/news") Back to news directory
+				input.form-control(type="text", name="tags", id="tags", value=formkeep.tags)
+			button.btn.btn-primary(type="submit") Submit
+		script.
+			CKEDITOR.replace('composer1')
 
diff --git a/views/news/news.pug b/views/news/news.pug
index 2caf28a..a931c2a 100644
--- a/views/news/news.pug
+++ b/views/news/news.pug
@@ -7,33 +7,49 @@ block title
 	|Icy Network - News
 
 block body
-	.document
-		.content
-			if user && user.privilege && user.privilege > 0
-				a.button(style="float: right;" href="/news/compose") New Article
-			h1 Icy Network News Archive
-			if news.error
-				span.error There are no articles to show.
-			else
-				if news.page
-					span.pagenum
-						|Page #{news.page.page} of #{news.page.pages}
-					.pgn
+	.container.mt-4
+		nav(aria-label="breadcrumb")
+			ol.breadcrumb
+				li.breadcrumb-item 
+					a(href="/") Home
+				li.breadcrumb-item.active(aria-current="page") News
+
+		if user && user.privilege && user.privilege > 0
+			a.btn.btn-light.float-right(href="/news/compose") New Article
+		h1.pb-3.mb-4.border-bottom Icy Network News
+		if news.error
+			span.error There are no articles to show.
+		else
+			if news.page
+				nav(aria-label="pagination")
+					ul.pagination
 						if news.page.page > 1
-							a.button(href="/news/?page=" + (news.page.page - 1)) Previous
+							li.page-item
+								a.page-link(href="/news/?page=" + (news.page.page - 1)) Previous
+						else
+							li.page-item.disabled
+								a.page-link(href="#" tabindex="-1") Previous
 						- var n = 0
 						while n < news.page.pages
-							a.button(href="/news/?page=" + (n + 1))= n + 1
+							- var current = n + 1 == news.page.page
+							li.page-item(class=(current ? 'active' : ''))
+								a.page-link(href="/news/?page=" + (n + 1))= n + 1
+									if current
+										span.sr-only &nbsp;(current)
 							- n++
 						if news.page.pages > news.page.page
-							a.button(href="/news/?page=" + (news.page.page + 1)) Next
-				each val in news.articles
-					.article
-						a.title(href="/news/" + val.id + "-" + val.slug)= val.title
-						.author Published by 
-							span #{val.author.display_name} 
-							|at 
-							.timestamp #{new Date(val.created_at)}
-						.content!= val.content
-					hr
+							li.page-item
+								a.page-link(href="/news/?page=" + (news.page.page + 1)) Next
+						else
+							li.page-item.disabled
+								a.page-link(href="#" tabindex="-1") Next
+			each val in news.articles
+				.news-article
+					h2.news-title
+						a(href="/news/" + val.id + "-" + val.slug)= val.title
+					p.news-meta Published by 
+						span #{val.author.display_name} 
+						|at #{new Date(val.created_at)}
+					.content!= val.content
+				hr
 
diff --git a/views/user/banned.pug b/views/user/banned.pug
index 8ec2529..606f57e 100644
--- a/views/user/banned.pug
+++ b/views/user/banned.pug
@@ -3,26 +3,27 @@ block title
 	|Icy Network - Banned Account
 
 block body
-	.wrapper
-		.boxcont
-			.box#login
-				if ipban
-					h1 This IP Address is BANNED!
-				else
-					h1 This User is BANNED!
-				p This user currently has #{bans.length} ban(s) active
-				each ban in bans
-					.message.error.ban
-						label Banned
-						.date #{new Date(ban.banned)}
-						label Reason
-						.reason #{ban.reason}
-						label Expires at
-						.expiry
-							if !ban.expiry
-								b This ban is permanent.
-							else
-								|#{new Date(ban.expiry)}
+	.container.mt-4.mb-4
+		if ipban
+			h1 This IP Address is banned from accessing Icy Network
+		else
+			h1 This user is banned from accessing Icy Network.
+		p This user currently has #{bans.length} ban(s) active.
+		each ban in bans
+			.ban.alert.alert-danger
+				p
+					b Banned at
+					.date #{new Date(ban.banned)}
+				p
+					b Reason
+					.reason #{ban.reason}
+				p
+					b Expires at
+					.expiry
 						if !ban.expiry
-							b This ban cannot be appealed.
+							b This ban is permanent.
+						else
+							|#{new Date(ban.expiry)}
+					if !ban.expiry
+						b This ban cannot be appealed.
 
diff --git a/views/user/email_change.pug b/views/user/email_change.pug
index 79385ee..d629f52 100644
--- a/views/user/email_change.pug
+++ b/views/user/email_change.pug
@@ -3,27 +3,34 @@ block title
 	|Icy Network - Change User Email
 
 block body
-	.wrapper
-		.boxcont
-			.box#totpcheck
-				h1 Change Your Email
-				if message.text
-					if message.error
-						.message.error
-							span #{message.text}
-					else
-						.message
-							span #{message.text}
-				form#loginForm(method="POST", action="")
-					input(type="hidden", name="csrf", value=csrf)
-					if email
-						label(for="email") Current Email Address
-						small Email Hint: #{email}
-						br
-						input(type="email", name="email", id="email")
-					label(for="email_new") New Email Address
-					input(type="email", name="email_new", id="email_new")
-					if password
-						label(for="password") Password
-						input(type="password", name="password", id="password")
-					input(type="submit", value="Change")
+	.container.mt-4.mb-4
+		nav(aria-label="breadcrumb")
+			ol.breadcrumb
+				li.breadcrumb-item 
+					a(href="/") Home
+				li.breadcrumb-item 
+					a(href="/user/manage") User Settings
+				li.breadcrumb-item.active(aria-current="page") Change Email Address
+		h1 Change Your Email Address
+		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)
+			if email
+				.form-group
+					label(for="email") Current Email Address
+					input.form-control(type="email", name="email", id="email")
+					small Email Hint: #{email}
+			.form-group
+				label(for="email_new") New Email Address
+				input.form-control(type="email", name="email_new", id="email_new")
+			if password
+				.form-group
+					label(for="password") Password
+					input.form-control(type="password", name="password", id="password")
+			button.btn.btn-primary(type="submit") Done
diff --git a/views/user/login.pug b/views/user/login.pug
index 5c9a099..02e783d 100644
--- a/views/user/login.pug
+++ b/views/user/login.pug
@@ -3,27 +3,28 @@ block title
 	|Icy Network - Log In
 
 block body
-	.wrapper
-		.boxcont
-			.box#login
-				h1 Log in
-				.left
-					if message.text
-						if message.error
-							.message.error
-								span #{message.text}
-						else
-							.message
-								span #{message.text}
-					form#loginForm(method="POST", action="")
-						input(type="hidden", name="csrf", value=csrf)
+	.container.mb-4.mt-4
+		h1 Log in
+		.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 or Email Address
-						input(type="text", name="username", id="username")
+						input.form-control(type="text", name="username", id="username")
+					.form-group
 						label(for="password") Password
-						input(type="password", name="password", id="password")
-						input(type="submit", value="Log in")
-					a#create(href="/register") Create an account
-					span.divider &middot;
-					a#create(href="/login/reset") Forgot password?
-				.right
-					include ../includes/external.pug
+						input.form-control(type="password", name="password", id="password")
+					button.btn.btn-primary(type="submit") Log in
+				a(href="/register") Create an account
+				|  · 
+				a(href="/login/reset") Forgot password?
+			aside.col
+				include ../includes/external.pug
diff --git a/views/user/password.pug b/views/user/password.pug
index 48835d8..b6f6209 100644
--- a/views/user/password.pug
+++ b/views/user/password.pug
@@ -3,20 +3,19 @@ block title
 	|Icy Network - Password Required
 
 block body
-	.wrapper
-		.boxcont
-			.box#totpcheck
-				h1 Enter your password
-				small.descr This action requires your password to continue
-				if message.text
-					if message.error
-						.message.error
-							span #{message.text}
-					else
-						.message
-							span #{message.text}
-				form#loginForm(method="POST", action=post)
-					input(type="hidden", name="csrf", value=csrf)
-					label(for="password") Password
-					input(type="password", name="password", id="password")
-					input(type="submit", value="Continue")
+	.container.mt-4.mb-4
+		h1 Enter your password
+		p This action requires your password to continue
+		if message.text
+			if message.error
+				.alert.alert-danger
+					span #{message.text}
+			else
+				.alert.alert-warning
+					span #{message.text}
+		form#loginForm(method="POST", action=post)
+			input(type="hidden", name="csrf", value=csrf)
+			.form-group
+				label(for="password") Password
+				input.form-control#password(type="password", name="password")
+			button.btn.btn-primary(type="submit") Continue
diff --git a/views/user/password_new.pug b/views/user/password_new.pug
index 87d0c09..0333b4b 100644
--- a/views/user/password_new.pug
+++ b/views/user/password_new.pug
@@ -3,25 +3,34 @@ block title
 	|Icy Network - Change User Password
 
 block body
-	.wrapper
-		.boxcont
-			.box#totpcheck
-				h1 Change Your Password
-				if message.text
-					if message.error
-						.message.error
-							span #{message.text}
-					else
-						.message
-							span #{message.text}
-				form#loginForm(method="POST", action="")
-					input(type="hidden", name="csrf", value=csrf)
-					if !token
-						label(for="password_old") Current Password
-						input(type="password", name="password_old", id="password_old")
-					label(for="password") New Password
-					input(type="password", name="password", id="password")
-					label(for="password_repeat") Repeat New Password
-					input(type="password", name="password_repeat", id="password_repeat", autocomplete="off")
-					div#repeatcheck(style="display: none")
-					input(type="submit", value="Change")
+	.container.mt-4.mb-4
+		if user
+			nav(aria-label="breadcrumb")
+				ol.breadcrumb
+					li.breadcrumb-item 
+						a(href="/") Home
+					li.breadcrumb-item 
+						a(href="/user/manage") User Settings
+					li.breadcrumb-item.active(aria-current="page") Change Password
+		h1 Change Your Password
+		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)
+			if !token
+				.form-group
+					label(for="password_old") Current Password
+					input.form-control#password_old(type="password", name="password_old")
+			.form-group
+				label(for="password") New Password
+				input.form-control#password(type="password", name="password")
+			.form-group
+				label(for="password_repeat") Repeat New Password
+				input.form-control#password_repeat(type="password", name="password_repeat", autocomplete="off")
+				small#repeatcheck(style="display: none")
+			button.btn.btn-primary(type="submit") Change
diff --git a/views/user/register.pug b/views/user/register.pug
index de8779f..b0d5193 100644
--- a/views/user/register.pug
+++ b/views/user/register.pug
@@ -3,35 +3,45 @@ block title
 	|Icy Network - Register
 
 block body
-	.wrapper
-		.boxcont
-			.box#login
-				h1 Create a new account
-				.left
-					if message.text
-						if message.error
-							.message.error
-								span #{message.text}
-						else
-							.message
-								span #{message.text}
-					form#loginForm(method="POST", action="")
-						input(type="hidden", name="csrf", value=csrf)
+	.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(type="text", name="username", id="username", value=formkeep.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(type="text", name="display_name", id="display_name", value=formkeep.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(type="email", name="email", id="email", value=formkeep.email)
+						input.form-control#email(type="email", name="email", value=formkeep.email)
+					.form-group
 						label(for="password") Password
-						input(type="password", name="password", id="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(type="password", name="password_repeat", id="password_repeat", autocomplete="off")
-						div#repeatcheck(style="display: none")
-						if recaptcha
+						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)
-						input(type="submit", value="Register")
-					a#create(href="/login") Log in with an existing account
-				.right
-					include ../includes/external.pug
+					button.btn.btn-primary(type="submit") Register
+					|  or 
+					a(href="/login") log in with an existing account
+			aside.col
+				include ../includes/external.pug
diff --git a/views/user/settings.pug b/views/user/settings.pug
index 8a63c7a..03125fe 100644
--- a/views/user/settings.pug
+++ b/views/user/settings.pug
@@ -3,70 +3,87 @@ block title
 	|Icy Network - User Settings
 
 block body
-	.wrapper
-		.boxcont
-			.box#settings
-				h1 User Settings
-				.left
-					if message.text
-						if message.error
-							.message.error
-								span #{message.text}
-						else
-							.message
-								span #{message.text}
-					form#loginForm(method="POST", action="")
-						input(type="hidden", name="csrf", value=csrf)
-						label(for="username") Username
-						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 Avatar
-						.avatarCont
-							include ../includes/avatar.pug
-							.options
-								a#newAvatar(href='#') Change Avatar
-								if user.avatar_file
-									a#removeAvatar(href='#') Remove Avatar
-						input(type="submit", value="Save Settings")
-				.right
-					h3 Social Media Accounts
-						.specify(title="You can add social media accounts to your account for ease of login. Once added, logging in from linked sources logs you into this account automatically.") ?
-					include ../includes/external.pug
-					if google_auth == false
-						a.option.accdisconnect(href="/api/external/google/remove")
-							i.fa.fa-fw.fa-times
-							|Unlink Google
-					if twitter_auth == false
-						a.option.accdisconnect(href="/api/external/twitter/remove")
-							i.fa.fa-fw.fa-times
-							|Unlink Twitter
-					if facebook_auth == false
-						a.option.accdisconnect(href="/api/external/facebook/remove")
-							i.fa.fa-fw.fa-times
-							|Unlink Facebook
-					if discord_auth == false
-						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")
-							i.fa.fa-fw.fa-lock
-							|Change Password
-						if totp
-							a.option(href="/user/two-factor/disable")
+	.container.mt-4.mb-4
+		nav(aria-label="breadcrumb")
+			ol.breadcrumb
+				li.breadcrumb-item 
+					a(href="/") Home
+				li.breadcrumb-item.active(aria-current="page") User Settings
+		h1 User Settings
+		.row
+			.col-3
+				.nav.flex-column.nav-pills#v-pills-tab(role="tablist", aria-orientation="vertical")
+					a.nav-link.active#v-pills-main-tab(data-toggle="tab", href="#v-pills-main", role="tab", aria-control="v-pills-main", aria-selected="true") General Settings
+					a.nav-link#v-pills-social-tab(data-toggle="tab", href="#v-pills-social", role="tab", aria-control="v-pills-social", aria-selected="false") Social Accounts
+					a.nav-link#v-pills-oauth2-tab(data-toggle="tab", href="#v-pills-oauth2", role="tab", aria-control="v-pills-oauth2", aria-selected="false") OAuth2 Authorizations
+					a.nav-link#v-pills-actions-tab(data-toggle="tab", href="#v-pills-actions", role="tab", aria-control="v-pills-actions", aria-selected="false") Account Actions
+			.col-9
+				.tab-content#v-pills-tabContent
+					.tab-pane.fade.show.active#v-pills-main(role="tabpanel", aria-labelledby="v-pills-main")
+						h2 General Settings
+						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(type="text", name="username", id="username", value=user.username, disabled)
+							.form-group
+								label(for="display_name") Display Name
+								input.form-control(type="text", name="display_name", id="display_name", value=user.display_name)
+							label Avatar
+							.avatarCont
+								include ../includes/avatar.pug
+								.options
+									a#newAvatar(href='#') Change Avatar
+									if user.avatar_file
+										a#removeAvatar(href='#') Remove Avatar
+							button.btn.btn-primary(type="submit") Save Settings
+					.tab-pane.fade#v-pills-social(role="tabpanel", aria-labelledby="v-pills-social")
+						h3 Social Media Accounts
+						p You can add social media accounts to your account for ease of login. Once added, logging in from linked sources logs you into this account automatically.
+						include ../includes/external.pug
+						if google_auth == false
+							a.option.accdisconnect(href="/api/external/google/remove")
+								i.fa.fa-fw.fa-times
+								|Unlink Google
+						if twitter_auth == false
+							a.option.accdisconnect(href="/api/external/twitter/remove")
+								i.fa.fa-fw.fa-times
+								|Unlink Twitter
+						if facebook_auth == false
+							a.option.accdisconnect(href="/api/external/facebook/remove")
+								i.fa.fa-fw.fa-times
+								|Unlink Facebook
+						if discord_auth == false
+							a.option.accdisconnect(href="/api/external/discord/remove")
+								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.
+					.tab-pane.fade#v-pills-actions(role="tabpanel", aria-labelledby="v-pills-actions")
+						h3 Account Actions
+						if password
+							a.option(href="/user/manage/password")
 								i.fa.fa-fw.fa-lock
-								|Disable Two-Factor Authentication
-						else
-							a.option(href="/user/two-factor")
-								i.fa.fa-fw.fa-lock
-								|Enable Two-Factor Authentication
-					a.option(href="/user/manage/email")
-						i.fa.fa-fw.fa-envelope
-						|Change Email Address
-				.clients
-					h2 Authorized Applications
-						.specify(title="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.
+								|Change Password
+							if totp
+								a.option(href="/user/two-factor/disable")
+									i.fa.fa-fw.fa-lock
+									|Disable Two-Factor Authentication
+							else
+								a.option(href="/user/two-factor")
+									i.fa.fa-fw.fa-lock
+									|Enable Two-Factor Authentication
+						a.option(href="/user/manage/email")
+							i.fa.fa-fw.fa-envelope
+							|Change Email Address
diff --git a/views/user/totp-check.pug b/views/user/totp-check.pug
index 5a3e685..da2477a 100644
--- a/views/user/totp-check.pug
+++ b/views/user/totp-check.pug
@@ -3,20 +3,19 @@ block title
 	|Icy Network - Log In - Verification Required
 
 block body
-	.wrapper
-		.boxcont
-			.box#totpcheck
-				h1 Enter Code
-				small.descr This user has Two Factor Authentication enabled. Enter the code to log in.
-				if message.text
-					if message.error
-						.message.error
-							span #{message.text}
-					else
-						.message
-							span #{message.text}
-				form#loginForm(method="POST", action="")
-					input(type="hidden", name="csrf", value=csrf)
-					label(for="code") Code
-					input(type="text", name="code", id="code", autocomplete="off")
-					input(type="submit", value="Log in")
+	.container
+		h1 Enter Code
+		p This user has Two Factor Authentication enabled. Enter the code to log in.
+		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="code") Code
+				input.form-control#code(type="text", name="code", autocomplete="off")
+			button.btn.btn-primary(type="submit") Log in
diff --git a/views/user/totp.pug b/views/user/totp.pug
index d764769..03a332a 100644
--- a/views/user/totp.pug
+++ b/views/user/totp.pug
@@ -3,33 +3,40 @@ block title
 	|Icy Network - Activate Authenticator
 
 block body
-	.wrapper
-		.boxcont
-			.box#login
-				h1 Two Factor Authentication
-				.left
-					if message.text
-						if message.error
-							.message.error
-								span #{message.text}
-						else
-							.message
-								span #{message.text}
-					img.qr(src="//api.qrserver.com/v1/create-qr-code/?data=" + uri)
-					form#totpForm(method="POST", action="")
-						input(type="hidden", name="csrf", value=csrf)
+	.container.mt-5.mb-5
+		nav(aria-label="breadcrumb")
+			ol.breadcrumb
+				li.breadcrumb-item 
+					a(href="/") Home
+				li.breadcrumb-item 
+					a(href="/user/manage") User Settings
+				li.breadcrumb-item.active(aria-current="page") Enable Two Factor Authentication
+		h1 Two Factor Authentication
+		.row
+			.col
+				if message.text
+					if message.error
+						.alert.alert-danger
+							span #{message.text}
+					else
+						.alert.alert-warning
+							span #{message.text}
+				img.qr(src="//api.qrserver.com/v1/create-qr-code/?data=" + uri)
+				form#totpForm(method="POST", action="")
+					input(type="hidden", name="csrf", value=csrf)
+					.form-group
 						label(for="code") Enter the Code
-						input(type="text", name="code", id="code", autocomplete="off")
-						input(type="submit", value="Enable Now")
-				.right
-					h3 How to use
-					ol
-						li Scan the QR Code with your authenticator app
-						li Enter the one-time code given to you
-						li You will now be asked for a code every time you log in
-					h3 Authenticator app
-					p We recommend using Google Authenticator
-					a.dlbtn(href='https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1', target="_blank")
-						img(alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png')
-					a.dlbtn.apple(href='https://itunes.apple.com/us/app/google-authenticator/id388497605', target="_blank")
-						img(alt='Download on the App Store' src='https://devimages-cdn.apple.com/app-store/marketing/guidelines/images/badge-download-on-the-app-store.svg')
+						input.form-control#code(type="text", name="code", autocomplete="off")
+					button.btn.btn-primary(type="submit") Enable Now
+			aside.col
+				h3 How to use
+				ol
+					li Scan the QR Code with your authenticator app
+					li Enter the one-time code given to you
+					li You will now be asked for a code every time you log in
+				h3 Authenticator app
+				p We recommend using Google Authenticator. You can download it below for your smartphone:
+				a.app-button(href='https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1', target="_blank")
+					img(alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png')
+				a.app-button.apple(href='https://itunes.apple.com/us/app/google-authenticator/id388497605', target="_blank")
+					img(alt='Download on the App Store' src='https://devimages-cdn.apple.com/app-store/marketing/guidelines/images/badge-download-on-the-app-store.svg')

From 23bfd503c39ecbe52ab86300f27ac232cf4f10b6 Mon Sep 17 00:00:00 2001
From: Evert <imsonotsleepy@gmail.com>
Date: Sun, 28 Jan 2018 21:45:30 +0200
Subject: [PATCH 2/5] Authorization dialog redesign

---
 views/authorization.pug | 114 ++++++++++++++++++++--------------------
 1 file changed, 58 insertions(+), 56 deletions(-)

diff --git a/views/authorization.pug b/views/authorization.pug
index 5c048d2..73acc38 100644
--- a/views/authorization.pug
+++ b/views/authorization.pug
@@ -1,61 +1,63 @@
 extends layout
 block title
-	|Icy Network - Authorize Client
+	|Icy Network - Authorize Application
 
 block body
-	.wrapper
-		.boxcont
-			.box#login
-				h1 Authorize OAuth2 Application
-				.left
-					.application
-						.picture
-							if client.icon
-								img(src=client.icon)
-							else
-								.noicon
-									i.fa.fa-fw.fa-gears
-						.info
-							.name= client.title
-							.description= client.description
-							a.url(href=client.url, target="_blank", rel="nofollow")= client.url
-					form#loginForm(method="POST", action="")
-						input(type="hidden", name="csrf", value=csrf)
-						input(type="hidden", name="decision", value='1')
-						input.authorize(type="submit", value="Authorize")
-					form#loginForm(method="POST", action="")
-						input(type="hidden", name="csrf", value=csrf)
-						input(type="hidden", name="decision", value='0')
-						input.deny(type="submit", value="Deny")
-				.right
-					.haveaccess 
-						span This application can
-						ul.nobulletin
-							if scope.indexOf('email') !== -1
-								li 
-									i.fa.fa-fw.fa-envelope
-									|See your Email address
-							li 
-								i.fa.fa-fw.fa-user
-								|See your Display Name
-					.noaccess 
-						span This application cannot
-						ul.nobulletin
-							if scope.indexOf('email') === -1
-								li 
-									i.fa.fa-fw.fa-envelope
-									|See your Email address
-							li 
-								i.fa.fa-fw.fa-lock
-								|See your Password
-							li 
+	.container.mb-4.mt-4
+		h1 Authorize Application
+		p 
+			b= client.title
+			|  wants you to give them access to your user details and authenticate you, without giving them your password. The list of things 
+			b=client.title
+			|  can and cannot do are provided below.
+		.row.mb-2
+			.col
+				.application
+					.picture
+						if client.icon
+							img(src=client.icon)
+						else
+							.noicon
 								i.fa.fa-fw.fa-gears
-								|Change your Account Settings
-				if client.verified != 1
-					.unaffiliated
-						br
-						span
-							i.fa.fa-fw.fa-warning
-							|This application is not affiliated with Icy Network
-							i.fa.fa-fw.fa-warning
-
+					.info
+						.name= client.title
+						.description= client.description
+						a.url(href=client.url, target="_blank", rel="nofollow")= client.url
+				form(method="POST", action="")
+					input(type="hidden", name="csrf", value=csrf)
+					input(type="hidden", name="decision", value='1')
+					button.btn.btn-success(type="submit") Authorize Access
+				p
+				form(method="POST", action="")
+					input(type="hidden", name="csrf", value=csrf)
+					input(type="hidden", name="decision", value='0')
+					button.btn.btn-danger(type="submit") Deny Access
+			.col
+				.haveaccess 
+					span This application can
+					ul.nobulletin
+						if scope.indexOf('email') !== -1
+							li 
+								i.fa.fa-fw.fa-envelope
+								|See your Email address
+						li 
+							i.fa.fa-fw.fa-user
+							|See your Display Name
+				.noaccess 
+					span This application cannot
+					ul.nobulletin
+						if scope.indexOf('email') === -1
+							li 
+								i.fa.fa-fw.fa-envelope
+								|See your Email address
+						li 
+							i.fa.fa-fw.fa-lock
+							|See your Password
+						li 
+							i.fa.fa-fw.fa-gears
+							|Change your Account Settings
+		.alert.alert-info
+			b Note! 
+			|You can revoke #{client.title} at any time from your 
+			a(href="/user/manage") Account Settings
+			|.

From 1e6b7ee52dec0c8c879092fb8b41234e588e2828 Mon Sep 17 00:00:00 2001
From: Evert <imsonotsleepy@gmail.com>
Date: Mon, 29 Jan 2018 14:00:06 +0200
Subject: [PATCH 3/5] Port avatar dialog, fix login align

---
 src/script/main.js             |   9 +-
 views/includes/external.pug    |   6 +-
 views/user/login.pug           |   4 +-
 views/user/partials/avatar.pug | 153 +++++++++++++++++----------------
 views/user/register.pug        |  76 ++++++++--------
 views/user/settings.pug        |  28 ++++--
 6 files changed, 144 insertions(+), 132 deletions(-)

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") &times;
+					.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

From 9036d057e602a6eb90a0e750977e6476d1254840 Mon Sep 17 00:00:00 2001
From: Evert <imsonotsleepy@gmail.com>
Date: Sun, 4 Feb 2018 18:25:45 +0200
Subject: [PATCH 4/5] Add Gravatar

---
 server/api/image.js            |  9 ++++++
 server/api/index.js            |  2 +-
 server/routes/api.js           | 27 +++++++++++++++++
 views/includes/avatar.pug      |  2 +-
 views/user/partials/avatar.pug | 53 +++++++++++++++++++++++++++++++---
 5 files changed, 87 insertions(+), 6 deletions(-)

diff --git a/server/api/image.js b/server/api/image.js
index 1c3ca0a..276a419 100644
--- a/server/api/image.js
+++ b/server/api/image.js
@@ -1,12 +1,15 @@
 import gm from 'gm'
 import url from 'url'
 import path from 'path'
+import crypto from 'crypto'
 import uuid from 'uuid/v4'
 
 import http from '../../scripts/http'
 
 const fs = require('fs-extra')
 
+const gravatar = 'https://www.gravatar.com/avatar/'
+
 const uploads = path.join(__dirname, '../../', 'usercontent')
 const images = path.join(uploads, 'images')
 const maxFileSize = 1000000
@@ -72,6 +75,11 @@ async function imageBase64 (baseObj) {
   return {file: fpath}
 }
 
+function gravatarURL (email) {
+  let sum = crypto.createHash('md5').update(email).digest('hex')
+  return gravatar + sum + '.jpg'
+}
+
 async function downloadImage (imgUrl, designation) {
   if (!imgUrl) return null
   if (!designation) designation = 'download'
@@ -166,5 +174,6 @@ module.exports = {
   downloadImage: downloadImage,
   uploadImage: uploadImage,
   imageBase64: imageBase64,
+  gravatarURL: gravatarURL,
   types: imageTypes
 }
diff --git a/server/api/index.js b/server/api/index.js
index 3dbd4da..8c3c346 100644
--- a/server/api/index.js
+++ b/server/api/index.js
@@ -201,7 +201,7 @@ const API = {
         }
       }
 
-      await API.User.update(user, {avatar_file: fileName})
+      let u = await API.User.update(user, {avatar_file: fileName})
       return fileName
     },
     removeAvatar: async function (user) {
diff --git a/server/routes/api.js b/server/routes/api.js
index 70a0330..45cce29 100644
--- a/server/routes/api.js
+++ b/server/routes/api.js
@@ -380,6 +380,7 @@ router.post('/avatar', uploadLimiter, wrap(async (req, res, next) => {
     req.session.user.avatar_file = avatarFile
   }
 
+  req.flash('message', {error: false, text: 'Success!'})
   res.status(200).jsonp({})
 }))
 
@@ -417,6 +418,32 @@ router.get('/avatar/:id', wrap(async (req, res, next) => {
   res.redirect('/usercontent/images/' + user.avatar_file)
 }))
 
+router.get('/avatar/gravatar', (req, res, next) => {
+  if (!req.session.user) return next()
+  let email = req.session.user.email
+
+  res.set('Content-Type', 'text/plain')
+  res.end(Image.gravatarURL(email))
+})
+
+router.post('/avatar/gravatar', wrap(async (req, res, next) => {
+  if (!req.session.user) return next()
+  let user = req.session.user
+
+  try {
+    let gravURL = await Image.downloadImage(Image.gravatarURL(user.email), 'GRAV-' + user.username)
+    let file = await API.User.changeAvatar(user, gravURL)
+
+    req.session.user.avatar_file = file
+
+    req.flash('message', {error: false, text: 'Success!'})
+  } catch (e) {
+    req.flash('message', {error: true, text: 'Failed to use gravatar avatar.'})
+  }
+
+  res.jsonp({})
+}))
+
 // Redirect to no avatar on 404
 router.use('/avatar', (req, res) => {
   res.redirect('/static/image/avatar.png')
diff --git a/views/includes/avatar.pug b/views/includes/avatar.pug
index ed48022..66191a6 100644
--- a/views/includes/avatar.pug
+++ b/views/includes/avatar.pug
@@ -1,6 +1,6 @@
 .avatar
 	if user.avatar_file
-		img(src="/usercontent/images/" + user.avatar_file)
+		img#userAvatarFile(src="/usercontent/images/" + user.avatar_file)
 	else
 		.noavatar
 			i.fa.fa-fw.fa-user
diff --git a/views/user/partials/avatar.pug b/views/user/partials/avatar.pug
index 5993fa4..bb32432 100644
--- a/views/user/partials/avatar.pug
+++ b/views/user/partials/avatar.pug
@@ -6,10 +6,23 @@
 				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
+			form
+				.form-check
+					input.form-check-input#uploadType(type="radio", name="avi", checked)
+					label(for="#uploadType") Upload Image
+				.form-group.ml-5
+					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
+				.form-check
+					.row
+						.col
+							input.form-check-input#gravType(type="radio", name="avi")
+							label(for="#gravType") Use 
+								a(href="https://en.gravatar.com/", target="_blank") Gravatar
+						.col
+							img#gravatarPic
+
 	.content#crop(style="display: none;")
 		h3 Crop the Image
 		.alert.alert-info#cropAlert(style="display: none;") Uploading..
@@ -112,6 +125,34 @@ script.
 		})
 	}
 
+	function gravatarDance() {
+		$.ajax({
+			type: 'GET',
+			url: '/api/avatar/gravatar',
+			success: function (ln) {
+				if ($('#userAvatarFile').length) {
+					var ufile = $('#userAvatarFile').attr('src')
+					if (ufile.indexOf('/GRAV-') !== -1) {
+						$('#gravType').prop('checked', true)
+					} else {
+						$('#uploadType').prop('checked', true)
+					}
+				}
+				$('#gravatarPic').attr('src', ln)
+			}
+		})
+
+		$('#gravType').click(function (e) {
+			$.ajax({
+				type: 'POST',
+				url: '/api/avatar/gravatar',
+				success: function () {
+					window.location.reload()
+				}
+			})
+		})
+	}
+
 	function cancel() {
 		$('#fileChoose').show()
 		$('#cropAlert').hide()
@@ -153,6 +194,10 @@ script.
 			cancel()
 		})
 
+		$('#avatarModal').on('show.bs.modal', function (e) {
+			gravatarDance()
+		})
+
 		$('#fileinput').on('change', function (e) {
 			e.preventDefault()
 			handleFileSelect()

From da43cd59aa54080ee876d9dfb7cece6ae954e6d9 Mon Sep 17 00:00:00 2001
From: Evert <imsonotsleepy@gmail.com>
Date: Wed, 7 Feb 2018 19:03:57 +0200
Subject: [PATCH 5/5] More changes, footer alignment

---
 server/api/index.js                           |  2 +-
 src/style/admin.styl                          |  1 +
 src/style/main.styl                           | 48 ++++++++++++++++---
 .../{Discord-Logo-White.svg => discord.svg}   |  0
 static/image/rocket-chat.svg                  | 23 +++++++++
 views/admin/layout.pug                        |  1 -
 views/index.pug                               |  2 +-
 views/layout.pug                              | 31 ++++++------
 views/news/article.pug                        |  4 +-
 views/news/composer.pug                       |  4 +-
 views/news/news.pug                           |  2 +-
 views/redirect.pug                            | 18 ++++---
 views/user/email_change.pug                   |  4 +-
 views/user/password_new.pug                   |  4 +-
 views/user/reset_password.pug                 | 35 +++++++-------
 views/user/settings.pug                       | 12 ++---
 views/user/totp-check.pug                     |  2 +-
 views/user/totp.pug                           |  6 +--
 18 files changed, 127 insertions(+), 72 deletions(-)
 rename static/image/{Discord-Logo-White.svg => discord.svg} (100%)
 create mode 100644 static/image/rocket-chat.svg

diff --git a/server/api/index.js b/server/api/index.js
index 8c3c346..3dbd4da 100644
--- a/server/api/index.js
+++ b/server/api/index.js
@@ -201,7 +201,7 @@ const API = {
         }
       }
 
-      let u = await API.User.update(user, {avatar_file: fileName})
+      await API.User.update(user, {avatar_file: fileName})
       return fileName
     },
     removeAvatar: async function (user) {
diff --git a/src/style/admin.styl b/src/style/admin.styl
index a2ef71a..79c30e8 100644
--- a/src/style/admin.styl
+++ b/src/style/admin.styl
@@ -1,5 +1,6 @@
 body
     margin: 0
+    font-family: sans-serif
 
 nav
     display: block
diff --git a/src/style/main.styl b/src/style/main.styl
index 4d0c033..b068b21 100644
--- a/src/style/main.styl
+++ b/src/style/main.styl
@@ -247,6 +247,7 @@ code
     width: 215px
     height: 50px
     cursor: pointer
+    margin-left: 5px
 
     &.twitter-login
         background-color: #fff
@@ -289,13 +290,13 @@ code
             vertical-align: top
             margin-left: 12px
 
-.accdisconnect
-    margin-top: 5px
-    padding: 10px
-    background-color: #ff6c6c
-    color: #fff
-    width: 215px
-    border-radius: 5px
+    &.disconnect
+        margin-top: 5px
+        padding: 10px
+        background-color: #ff6c6c
+        color: #fff
+        width: 215px
+        border-radius: 5px
 
 span.divider
     color: #ddd
@@ -624,6 +625,39 @@ noscript
         width: 100vw !important
         min-width: 100vw !important
 
+.btn-social
+    width: 28px
+    height: 28px
+    display: block
+    line-height: 28px
+    color: #fff
+    font-size: 120%
+    border-radius: 100px
+    padding: 0 2px
+    margin: 5px
+    &#github
+        background-color: #000
+    &#twitter
+        background-color: #03a9f4
+    &#discord
+        background-color: #2C2F33
+        padding: 3px
+        span
+            background: url("/static/image/discord.svg")
+            background-size: contain
+            width: 22px
+            height: 22px
+            display: block
+    &#rocket-chat
+        background-color: #eee
+        padding: 3px
+        span
+            background: url("/static/image/rocket-chat.svg")
+            background-size: contain
+            width: 22px
+            height: 22px
+            display: block
+
 @media all and (max-width: 500px)
     section
         padding: 10px
diff --git a/static/image/Discord-Logo-White.svg b/static/image/discord.svg
similarity index 100%
rename from static/image/Discord-Logo-White.svg
rename to static/image/discord.svg
diff --git a/static/image/rocket-chat.svg b/static/image/rocket-chat.svg
new file mode 100644
index 0000000..b3ab6a5
--- /dev/null
+++ b/static/image/rocket-chat.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<path fill="#CC3333" d="M491.3,255.3c0-24.1-7.2-47.2-21.4-68.7c-12.8-19.3-30.7-36.4-53.2-50.7c-43.5-27.8-100.6-43.1-160.9-43.1  c-20.1,0-40,1.7-59.2,5.1c-11.9-11.2-25.9-21.2-40.7-29.2c-79-38.3-144.6-0.9-144.6-0.9s60.9,50.1,51,93.9c-27.3,27-42,59.6-42,93.6  c0,0.1,0,0.2,0,0.3c0,0.1,0,0.2,0,0.3c0,33.9,14.8,66.6,42,93.6c9.9,43.9-51,93.9-51,93.9s65.5,37.4,144.6-0.9  c14.8-8,28.8-18,40.7-29.2c19.2,3.4,39.1,5.1,59.2,5.1c60.3,0,117.4-15.3,160.9-43.1c22.5-14.4,40.4-31.5,53.2-50.7  c14.2-21.5,21.4-44.6,21.4-68.7c0-0.1,0-0.2,0-0.3C491.3,255.6,491.3,255.4,491.3,255.3z"/>
+<path fill="#FFFFFF" d="M255.9,124.2c113.9,0,206.3,59,206.3,131.8c0,72.8-92.4,131.8-206.3,131.8c-25.4,0-49.7-2.9-72.1-8.3  c-22.8,27.4-73,65.6-121.7,53.3c15.9-17,39.4-45.8,34.3-93.2c-29.2-22.7-46.8-51.8-46.8-83.5C49.6,183.2,142,124.2,255.9,124.2"/>
+<g>
+	<g>
+		<circle fill="#CC3333" cx="255.9" cy="256" r="27.4"/>
+	</g>
+	<g>
+		<circle fill="#CC3333" cx="351.2" cy="256" r="27.4"/>
+	</g>
+	<g>
+		<circle fill="#CC3333" cx="160.6" cy="256" r="27.4"/>
+	</g>
+</g>
+<g>
+	<path fill="#CCCCCC" d="M255.8,372.8c-25.4,0-56.2-4.9-78.7-9.5c-20.1,21-53.7,52.7-99.6,50.3c-5.7,8.6-10.2,13.5-15.5,19.2   c48.7,12.3,98.9-25.8,121.7-53.3c22.4,5.4,46.7,8.3,72.1,8.3c113,0,204.8-58.1,206.3-130C460.7,320.1,368.8,372.8,255.8,372.8z"/>
+	<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M172,350.9"/>
+	<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M200.4,422.9"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/views/admin/layout.pug b/views/admin/layout.pug
index 5051dd7..8ce5bc3 100644
--- a/views/admin/layout.pug
+++ b/views/admin/layout.pug
@@ -3,7 +3,6 @@ html
 		meta(charset="utf8")
 		meta(name="csrf-token", content=csrf)
 		block links
-			link(rel="stylesheet", type="text/css", href="https://fonts.googleapis.com/css?family=Open+Sans")
 			link(rel="stylesheet", type="text/css", href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css")
 			link(rel="stylesheet", type="text/css", href="/style/main.css")
 			link(rel="stylesheet", type="text/css", href="/style/admin.css")
diff --git a/views/index.pug b/views/index.pug
index 80f549e..d472c7b 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -14,7 +14,7 @@ block body
 					.carousel-caption.text-left
 						h1 Welcome to Icy Network
 						p Icy Network is a Global Network of Communities and Websites, United by a Single Login
-						a.btn.btn-lg.btn-primary(href="#" role="button") Learn More
+						//a.btn.btn-lg.btn-primary(href="#" role="button") Learn More
 			.carousel-item
 				img.second-slide(src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==", alt="Second Slide")
 				.container
diff --git a/views/layout.pug b/views/layout.pug
index faa481d..8dfeb4f 100644
--- a/views/layout.pug
+++ b/views/layout.pug
@@ -29,7 +29,6 @@ html
 		block links
 			link(rel="stylesheet", type="text/css", href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css")
 			link(rel="stylesheet", type="text/css", href="/style/main.css")
-			link(rel="stylesheet", type="text/css", href="//fonts.googleapis.com/css?family=Open+Sans")
 			link(rel="stylesheet", type="text/css", href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css")
 			script(src="/script/main.js")
 		block cookieconsent
@@ -91,19 +90,21 @@ html
 			block body
 			block footer
 				//FOOTER
-				footer.container
-					p.float-right
-						a.socialbtn#github(href="https://github.com/IcyNet/" target="_blank")
-							i.fa.fa-fw.fa-github
-						a.socialbtn#twitter(href="https://twitter.com/IcyNet" target="_blank")
-							i.fa.fa-fw.fa-twitter
-						a.socialbtn#discord(href="https://discord.gg/Xe7MKSx" target="_blank")
-							span.discordlogo
+				footer.container.mb-4
 					p
 						|&copy; 2017-2018 Icy Network
-						|  · 
-						a(href="/docs/terms-of-service") Terms
-						|  · 
-						a(href="/docs/privacy-policy") Privacy
-						|  · 
-						a(href="/donate") Donate
+						span.float-sm-right.ml-4
+							a(href="/docs/terms-of-service") Terms
+							|  · 
+							a(href="/docs/privacy-policy") Privacy
+							|  · 
+							a(href="/donate") Donate
+					.d-flex.justify-content-center
+						a.btn-social#github(href="https://github.com/IcyNet/" target="_blank")
+							i.fa.fa-fw.fa-github
+						a.btn-social#twitter(href="https://twitter.com/IcyNet" target="_blank")
+							i.fa.fa-fw.fa-twitter
+						a.btn-social#discord(href="https://discord.gg/Xe7MKSx" target="_blank")
+							span
+						a.btn-social#rocket-chat(href="https://chat.icynet.eu" target="_blank")
+							span
diff --git a/views/news/article.pug b/views/news/article.pug
index 8b77a82..87d8ab3 100644
--- a/views/news/article.pug
+++ b/views/news/article.pug
@@ -30,9 +30,9 @@ block body
 		else
 			nav(aria-label="breadcrumb")
 				ol.breadcrumb
-					li.breadcrumb-item 
+					li.breadcrumb-item
 						a(href="/") Home
-					li.breadcrumb-item 
+					li.breadcrumb-item
 						a(href="/news") News
 					li.breadcrumb-item.active(aria-current="page")= article.title
 
diff --git a/views/news/composer.pug b/views/news/composer.pug
index d25a02b..ff89393 100644
--- a/views/news/composer.pug
+++ b/views/news/composer.pug
@@ -10,9 +10,9 @@ block body
 	.container.mt-4.mb-4
 		nav(aria-label="breadcrumb")
 			ol.breadcrumb
-				li.breadcrumb-item 
+				li.breadcrumb-item
 					a(href="/") Home
-				li.breadcrumb-item 
+				li.breadcrumb-item
 					a(href="/news") News
 				li.breadcrumb-item.active(aria-current="page") Compose
 		if message.text
diff --git a/views/news/news.pug b/views/news/news.pug
index a931c2a..95a73c5 100644
--- a/views/news/news.pug
+++ b/views/news/news.pug
@@ -10,7 +10,7 @@ block body
 	.container.mt-4
 		nav(aria-label="breadcrumb")
 			ol.breadcrumb
-				li.breadcrumb-item 
+				li.breadcrumb-item
 					a(href="/") Home
 				li.breadcrumb-item.active(aria-current="page") News
 
diff --git a/views/redirect.pug b/views/redirect.pug
index 1972a2e..9732327 100644
--- a/views/redirect.pug
+++ b/views/redirect.pug
@@ -3,13 +3,11 @@ block title
 	|Icy Network - Redirecting
 
 block body
-	.wrapper
-		.boxcont
-			.box#totpcheck
-				h1 Redirecting
-				p Please wait..
-				script.
-					window.close()
-					setTimeout(function () {
-						window.location.href = '#{url}'
-					}, 1000)
+	.container
+		h1 Redirecting
+		p Please wait..
+		script.
+			window.close()
+			setTimeout(function () {
+				window.location.href = '#{url}'
+			}, 1000)
diff --git a/views/user/email_change.pug b/views/user/email_change.pug
index d629f52..d7f72ab 100644
--- a/views/user/email_change.pug
+++ b/views/user/email_change.pug
@@ -6,9 +6,9 @@ block body
 	.container.mt-4.mb-4
 		nav(aria-label="breadcrumb")
 			ol.breadcrumb
-				li.breadcrumb-item 
+				li.breadcrumb-item
 					a(href="/") Home
-				li.breadcrumb-item 
+				li.breadcrumb-item
 					a(href="/user/manage") User Settings
 				li.breadcrumb-item.active(aria-current="page") Change Email Address
 		h1 Change Your Email Address
diff --git a/views/user/password_new.pug b/views/user/password_new.pug
index 0333b4b..89ce649 100644
--- a/views/user/password_new.pug
+++ b/views/user/password_new.pug
@@ -7,9 +7,9 @@ block body
 		if user
 			nav(aria-label="breadcrumb")
 				ol.breadcrumb
-					li.breadcrumb-item 
+					li.breadcrumb-item
 						a(href="/") Home
-					li.breadcrumb-item 
+					li.breadcrumb-item
 						a(href="/user/manage") User Settings
 					li.breadcrumb-item.active(aria-current="page") Change Password
 		h1 Change Your Password
diff --git a/views/user/reset_password.pug b/views/user/reset_password.pug
index 854a1d5..2f8c698 100644
--- a/views/user/reset_password.pug
+++ b/views/user/reset_password.pug
@@ -3,21 +3,20 @@ block title
 	|Icy Network - Reset Password
 
 block body
-	.wrapper
-		.boxcont
-			.box#totpcheck
-				h1 Reset your password
-				p Enter your email below in order to reset your password.
-				if message.text
-					if message.error
-						.message.error
-							span #{message.text}
-					else
-						.message
-							span #{message.text}
-				if !sent
-					form#loginForm(method="POST", action=post)
-						input(type="hidden", name="csrf", value=csrf)
-						label(for="email") Email Address
-						input(type="email", name="email", id="email")
-						input(type="submit", value="Continue")
+	.container.mt-4.mb-4
+		h1 Reset your password
+		p Enter your email below in order to reset your password.
+		if message.text
+			if message.error
+				.alert.alert-danger
+					span #{message.text}
+			else
+				.alert.alert-info
+					span #{message.text}
+		if !sent
+			form#loginForm(method="POST", action=post)
+				input(type="hidden", name="csrf", value=csrf)
+				.form-group
+					label(for="email") Email Address
+					input.form-control#email(type="email", name="email")
+				button.btn.btn-primary(type="submit") Continue
diff --git a/views/user/settings.pug b/views/user/settings.pug
index 7447cb6..d23eba6 100644
--- a/views/user/settings.pug
+++ b/views/user/settings.pug
@@ -10,7 +10,7 @@ block body
 	.container.mt-4.mb-4
 		nav(aria-label="breadcrumb")
 			ol.breadcrumb
-				li.breadcrumb-item 
+				li.breadcrumb-item
 					a(href="/") Home
 				li.breadcrumb-item.active(aria-current="page") User Settings
 		h1 User Settings
@@ -32,7 +32,7 @@ block body
 				.nav.flex-column.nav-pills#v-pills-tab(role="tablist", aria-orientation="vertical")
 					a.nav-link.active#v-pills-main-tab(data-toggle="tab", href="#v-pills-main", role="tab", aria-control="v-pills-main", aria-selected="true") General Settings
 					a.nav-link#v-pills-social-tab(data-toggle="tab", href="#v-pills-social", role="tab", aria-control="v-pills-social", aria-selected="false") Social Accounts
-					a.nav-link#v-pills-oauth2-tab(data-toggle="tab", href="#v-pills-oauth2", role="tab", aria-control="v-pills-oauth2", aria-selected="false") OAuth2 Authorizations
+					a.nav-link#v-pills-oauth2-tab(data-toggle="tab", href="#v-pills-oauth2", role="tab", aria-control="v-pills-oauth2", aria-selected="false") Authorizations
 					a.nav-link#v-pills-actions-tab(data-toggle="tab", href="#v-pills-actions", role="tab", aria-control="v-pills-actions", aria-selected="false") Account Actions
 			.col-9
 				.tab-content#v-pills-tabContent
@@ -66,19 +66,19 @@ block body
 						p You can add social media accounts to your account for ease of login. Once added, logging in from linked sources logs you into this account automatically.
 						include ../includes/external.pug
 						if google_auth == false
-							a.option.accdisconnect(href="/api/external/google/remove")
+							a.option.disconnect.login-btn.float-lg-right(href="/api/external/google/remove")
 								i.fa.fa-fw.fa-times
 								|Unlink Google
 						if twitter_auth == false
-							a.option.accdisconnect(href="/api/external/twitter/remove")
+							a.option.disconnect.login-btn.float-lg-right(href="/api/external/twitter/remove")
 								i.fa.fa-fw.fa-times
 								|Unlink Twitter
 						if facebook_auth == false
-							a.option.accdisconnect(href="/api/external/facebook/remove")
+							a.option.disconnect.login-btn.float-lg-right(href="/api/external/facebook/remove")
 								i.fa.fa-fw.fa-times
 								|Unlink Facebook
 						if discord_auth == false
-							a.option.accdisconnect(href="/api/external/discord/remove")
+							a.option.disconnect.login-btn.float-lg-right(href="/api/external/discord/remove")
 								i.fa.fa-fw.fa-times
 								|Unlink Discord
 					.tab-pane.fade#v-pills-oauth2(role="tabpanel", aria-labelledby="v-pills-oauth2")
diff --git a/views/user/totp-check.pug b/views/user/totp-check.pug
index da2477a..f73287f 100644
--- a/views/user/totp-check.pug
+++ b/views/user/totp-check.pug
@@ -3,7 +3,7 @@ block title
 	|Icy Network - Log In - Verification Required
 
 block body
-	.container
+	.container.mt-4.mb-4
 		h1 Enter Code
 		p This user has Two Factor Authentication enabled. Enter the code to log in.
 		if message.text
diff --git a/views/user/totp.pug b/views/user/totp.pug
index 03a332a..1e34c50 100644
--- a/views/user/totp.pug
+++ b/views/user/totp.pug
@@ -3,12 +3,12 @@ block title
 	|Icy Network - Activate Authenticator
 
 block body
-	.container.mt-5.mb-5
+	.container.mt-4.mb-4
 		nav(aria-label="breadcrumb")
 			ol.breadcrumb
-				li.breadcrumb-item 
+				li.breadcrumb-item
 					a(href="/") Home
-				li.breadcrumb-item 
+				li.breadcrumb-item
 					a(href="/user/manage") User Settings
 				li.breadcrumb-item.active(aria-current="page") Enable Two Factor Authentication
 		h1 Two Factor Authentication