From 84e3e949207141f20c9f6af7447416718dd70511 Mon Sep 17 00:00:00 2001 From: glmdev Date: Mon, 29 Jul 2019 14:11:37 -0500 Subject: [PATCH] better invitation accept page --- app/MiscUnit.js | 4 + app/controllers/api/v1.controller.js | 2 +- app/views/dash_v1/accept.pug | 165 ++++++++++++++++++++++++--- app/views/dash_v1/template.pug | 2 + 4 files changed, 155 insertions(+), 18 deletions(-) diff --git a/app/MiscUnit.js b/app/MiscUnit.js index b9e3051..75f1566 100644 --- a/app/MiscUnit.js +++ b/app/MiscUnit.js @@ -32,6 +32,10 @@ class MiscUnit extends Unit { * model(), etc. work. */ async go(app, context){ + + String.prototype.capitalize = function(){ + return this.charAt(0).toUpperCase() + this.slice(1) + } // do stuff here global.devbug = { diff --git a/app/controllers/api/v1.controller.js b/app/controllers/api/v1.controller.js index 63efa13..a583272 100644 --- a/app/controllers/api/v1.controller.js +++ b/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){ diff --git a/app/views/dash_v1/accept.pug b/app/views/dash_v1/accept.pug index 5921d55..f5813b1 100644 --- a/app/views/dash_v1/accept.pug +++ b/app/views/dash_v1/accept.pug @@ -1,19 +1,150 @@ html head - title Sharing Invitation | DevBug - link(rel='stylesheet' href='/assets/dash_v1.css') - script(src='/assets/dash_v1.js') - body - .page-header - .devbug-header DevBug | v#{devbug.version} #{(project ? " | Project: "+project.name : "")} - h1 Accept Invitation? - ul.navul - li.navli - a.nava(href='/dash/v1') Dashboard Login - .spacer - p You've been invited to view the debugging #{invite.api_type} "#{project.name}" by #{user.username}. - p To accept this invitation, you must have a DevBug account. You may be redirected to the registration portal. - a.btn(href='/api/v1/invitation/'+invite.id+'/accept') Accept - br - 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. + title #{title ? title : "Accept Invitation | DevBug"} + style(type="text/css"). + @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 + .login-page + .form + img.flitter-logo(src="/assets/flitter.png") + p.form-title View #{invite.api_type.capitalize()}: #{project.name} + 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. + .item-row + a.form-button.row-item-first(href='/api/v1/invitation/'+invite.id+'/accept') Accept & View + a.form-button.row-item(href='/dash/v1') Decline + hr.body-sep + p.form-subtitle What's DevBug? + 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. diff --git a/app/views/dash_v1/template.pug b/app/views/dash_v1/template.pug index d988c6f..0cbcdaf 100644 --- a/app/views/dash_v1/template.pug +++ b/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