better invitation accept page

app/MiscUnit.js

@@ -33,6 +33,10 @@ class MiscUnit extends Unit {
      */
     async go(app, context){
         
+        String.prototype.capitalize = function(){
+            return this.charAt(0).toUpperCase() + this.slice(1)
+        }
+
         // do stuff here
         global.devbug = {
             version: '0.6.0',

app/controllers/api/v1.controller.js

@@ -95,7 +95,7 @@ class v1 {
         const user = await _flitter.model('User').findOne({uuid: invite.by_user_id})
         if ( !user ) _flitter.error(res, 500, {reason: 'This user no longer exists. Sorry.'})
 
-        return _flitter.view(res, 'dash_v1:accept', {invite, project, user})
+        return _flitter.view(res, 'dash_v1:accept', {invite, project, created_by_user: user})
     }
 
     async invite_accept(req, res, next){

app/views/dash_v1/accept.pug

@@ -1,19 +1,150 @@
 html
 	head
-		title Sharing Invitation | DevBug
+		title #{title ? title : "Accept Invitation | DevBug"}
-		link(rel='stylesheet' href='/assets/dash_v1.css')
+		style(type="text/css").
-		script(src='/assets/dash_v1.js')
+			@import url(https://fonts.googleapis.com/css?family=Roboto:300);
+
+			.login-page {
+				width: 500px;
+				padding: 6% 0 0;
+				margin: auto;
+			}
+
+			.form {
+				position: relative;
+				z-index: 1;
+				background: #FFFFFF;
+				max-width: 500px;
+				min-width: 360px;
+				margin: 0 auto 100px;
+				padding: 45px;
+				text-align: center;
+				box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
+			}
+
+			.form input {
+				font-family: "Roboto", sans-serif;
+				outline: 0;
+				background: #f2f2f2;
+				width: 100%;
+				border: 0;
+				margin: 0 0 15px;
+				padding: 15px;
+				box-sizing: border-box;
+				font-size: 14px;
+				color: #006a81;
+			}
+
+			.form button, .form-button {
+				font-family: "Roboto", sans-serif;
+				text-transform: uppercase;
+				outline: 0;
+				background: #006a81;
+				width: 100%;
+				border: 0;
+				padding: 12px;
+				color: #FFFFFF;
+				font-size: 16px;
+				-webkit-transition: background 0.6s;
+				-moz-transition: background 0.6s;
+				-ms-transition: background 0.6s;
+				-o-transition: background 0.6s;
+				transition: background 0.6s;
+				cursor: pointer;
+			}
+
+			.form button:hover, .form button:active, .form button:focus, .form-button:hover, .form-button:active, .form-button:focus {
+				background: #00b3da;
+			}
+			
+			.form-button {
+				text-decoration: none;
+			}
+
+			.form .message {
+				margin: 15px 0 0;
+				color: #b3b3b3;
+				font-size: 12px;
+			}
+
+			.form .message a {
+				color: #006a81;
+				text-decoration: none;
+			}
+
+			.container .info h1 {
+				margin: 0 0 15px;
+				padding: 0;
+				font-size: 36px;
+				font-weight: 300;
+				color: #1a1a1a;
+			}
+
+			.container .info span {
+				color: #4d4d4d;
+				font-size: 12px;
+			}
+
+			.container .info span a {
+				color: #000000;
+				text-decoration: none;
+			}
+
+			body {
+				background: #c7dbdf;
+				font-family: "Roboto", sans-serif;
+				-webkit-font-smoothing: antialiased;
+				-moz-osx-font-smoothing: grayscale;
+			}
+
+			.flitter-logo {
+				height: 100px;
+				margin-bottom: 15px;
+			}
+
+			.form-title, .form-subtitle {
+				font-family: "Roboto", sans-serif;
+				font-size: 16pt;
+				color: #006a81;
+			}
+			
+			.form-subtitle {
+				text-align: left;
+				/*margin-top: 50px;*/
+				font-size: 14pt;
+				padding: 15px;
+				padding-bottom: 0;
+				padding-top: 0;
+				margin-bottom: 0;
+			}
+			
+			.left-body {
+				text-align: left;
+				padding: 15px;
+				margin-top: 0;
+			}
+			
+			.row-item {
+				margin-left: 10px;
+			}
+			
+			.item-row {
+				margin-top: 65px;
+			}
+			
+			.body-sep {
+				margin-top: 45px;
+				margin-bottom: 45px;
+			}
 body
-		.page-header
+	.login-page
-			.devbug-header DevBug | v#{devbug.version} #{(project ? " | Project: "+project.name : "")}
+		.form
-			h1 Accept Invitation?
+			img.flitter-logo(src="/assets/flitter.png")
-			ul.navul
+			p.form-title View #{invite.api_type.capitalize()}: #{project.name}
-				li.navli
+			p.left-body You've been invited to view a debugging #{invite.api_type} by #{created_by_user.username}. To accept this invitation, you must have a DevBug account. You may be redirected to the sign-in portal.
-					a.nava(href='/dash/v1') Dashboard Login
+			.item-row
-		.spacer
+				a.form-button.row-item-first(href='/api/v1/invitation/'+invite.id+'/accept') Accept & View
-		p You've been invited to view the debugging #{invite.api_type} "#{project.name}" by #{user.username}.
+				a.form-button.row-item(href='/dash/v1') Decline
-		p To accept this invitation, you must have a DevBug account. You may be redirected to the registration portal.
+			hr.body-sep
-		a.btn(href='/api/v1/invitation/'+invite.id+'/accept') Accept
+			p.form-subtitle What's DevBug?
-		br
+			p.left-body DevBug is a debugging output server used to help developers work more efficiently. Using inline-code clients, developers can output variables and data from their programs. This data is stored in a DevBug project, where it can easily be shared with others.
-		h3 What's DevBug?
-		p DevBug is a debugging output server used to help developers work more efficiently. Using inline-code clients, developers can output variables and data from their programs. This data is stored in a DevBug project, where it can easily be shared with others.

app/views/dash_v1/template.pug

@@ -14,11 +14,13 @@ html
 				a#navbar-home(href='/dash/v1') Home
 			li
 				a#navbar-usage(href='/dash/v1/using_devbug/main') Using DevBug
+			block navbar-left
 			li.navbar-right
 				a#navbar-logout(href='/auth/logout') Logout
 			if show_back
 				li.navbar-right
 					a#navbar-back(href='javascript:window.history.back()') Back
+			block navbar-right
 		.content
 			block content
 			block scripts