Authorization dialog redesign

views/authorization.pug

@@ -1,61 +1,63 @@
 extends layout
 block title
-	|Icy Network - Authorize Client
+	|Icy Network - Authorize Application
 
 block body
-	.wrapper
+	.container.mb-4.mt-4
-		.boxcont
+		h1 Authorize Application
-			.box#login
+		p 
-				h1 Authorize OAuth2 Application
+			b= client.title
-				.left
+			|  wants you to give them access to your user details and authenticate you, without giving them your password. The list of things 
-					.application
+			b=client.title
-						.picture
+			|  can and cannot do are provided below.
-							if client.icon
+		.row.mb-2
-								img(src=client.icon)
+			.col
-							else
+				.application
-								.noicon
+					.picture
-									i.fa.fa-fw.fa-gears
+						if client.icon
-						.info
+							img(src=client.icon)
-							.name= client.title
+						else
-							.description= client.description
+							.noicon
-							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 
 								i.fa.fa-fw.fa-gears
-								|Change your Account Settings
+					.info
-				if client.verified != 1
+						.name= client.title
-					.unaffiliated
+						.description= client.description
-						br
+						a.url(href=client.url, target="_blank", rel="nofollow")= client.url
-						span
+				form(method="POST", action="")
-							i.fa.fa-fw.fa-warning
+					input(type="hidden", name="csrf", value=csrf)
-							|This application is not affiliated with Icy Network
+					input(type="hidden", name="decision", value='1')
-							i.fa.fa-fw.fa-warning
+					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
+			|.