From 1e96dc3eacc95b65c3c2f457fe061c6c3c9b64cb Mon Sep 17 00:00:00 2001 From: Ash Monty Date: Mon, 13 Dec 2021 16:48:53 +0100 Subject: [PATCH] styles: update login/register forms design --- package-lock.json | 1 + public/assets/css/login.css | 108 ++++++++++++++++++++---------- public/assets/css/register.css | 95 -------------------------- src/routers/account.js | 13 ++++ views/account_login.handlebars | 71 ++++++++++++-------- views/account_register.handlebars | 88 ++++++++++++++---------- 6 files changed, 184 insertions(+), 192 deletions(-) delete mode 100644 public/assets/css/register.css diff --git a/package-lock.json b/package-lock.json index a823a43..7b23879 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "website", "version": "1.0.0", "license": "ISC", "dependencies": { diff --git a/public/assets/css/login.css b/public/assets/css/login.css index 09fd606..9fec471 100644 --- a/public/assets/css/login.css +++ b/public/assets/css/login.css @@ -1,87 +1,125 @@ .wrapper { display: flex; - flex-flow: column; min-height: 100vh; } -.login-wrapper { +.account-form-wrapper { margin: auto; + width: fit-content; + overflow: hidden; } -form.login { - padding: 48px; - background-color: #151934; +.account-form-wrapper .logotype { + display: block; + position: relative; + left: -6px; + margin-bottom: 30px; +} + +.account-form-wrapper .logotype svg { + width: 140px; +} +.account-form-wrapper .logotype svg text { + font-size: 20px; + transform: translate(593px, 495px); +} + +form.account { + display: block; + padding: 40px 48px; + background-color: #292E53; + color: var(--text-secondary); border-radius: 12px; - max-width: calc(90vw - 92px); - width: 400px; + width: 360px; + max-width: calc(90vw - 96px); } -form.login input { +form.account h2 { + margin: 0; + color: var(--text) +} + +form.account p { + margin: 12px 0; +} + +form.account div { + margin-top: 24px; +} + +form.account input { appearance: none; -webkit-appearance: none; display: block; - border: 0; font-family: Poppins, Arial, Helvetica, sans-serif; font-size: 1rem; - background-color: var(--btn-secondary); + background-color: #353C6A; border: none; border-radius: 4px; padding: 12px; color: var(--text); width: calc(100% - 24px); - margin-bottom: 12px; } -form.login input::placeholder { - color: var(--text-secondary); -} - -form.login input:focus { - background-color: #fff; - color: var(--btn-secondary); - transition: 200ms; +form.account input:focus { + background-color: #4B5595; outline: none; + transition: 150ms; } -form.login button { +form.account label { + display: block; + margin-bottom: 6px; + text-transform: uppercase; + font-size: 12px; +} + +form.account button { appearance: none; -webkit-appearance: none; display: block; - border: 0; + border: none; border-radius: 4px; font-family: Poppins, Arial, Helvetica, sans-serif; font-size: 1rem; color: var(--text); - padding: 12px; - background: var(--btn); + padding: 12px 30px; + background: #353C6A; + margin-top: 18px; cursor: pointer; width: 100%; + text-decoration: none; } -form.login a.pwdreset { - display: block; - color: var(--text-secondary); +form.account button[type="submit"] { + background: var(--btn); + margin: auto; +} + +form.account a { text-decoration: none; + display: block; + color: var(--text-secondary); text-align: right; margin: 6px 0; - width: 100%; + width: fit-content; } - -form.login a.pwdreset:hover { +form.account a:hover { color: var(--text); } -form.login .register { - text-decoration: none; +form.account a.pwdreset { + margin-left: auto; + font-size: 14px; } -form.login .register button { - background: var(--btn-secondary); +form.account a.register { + margin:auto; margin-top: 18px; } -footer { - margin-top: 23px; +form.account.register div:last-child { + margin-top: 42px; } @keyframes banner-notice { diff --git a/public/assets/css/register.css b/public/assets/css/register.css deleted file mode 100644 index d231b8f..0000000 --- a/public/assets/css/register.css +++ /dev/null @@ -1,95 +0,0 @@ -.wrapper { - display: flex; - flex-flow: column; - min-height: 100vh; -} - -.register-wrapper { - margin: auto; -} - -form.register { - padding: 48px; - background-color: #151934; - border-radius: 12px; - max-width: calc(90vw - 92px); - width: 400px; -} - -form.register input { - appearance: none; - -webkit-appearance: none; - display: block; - border: 0; - font-family: Poppins, Arial, Helvetica, sans-serif; - font-size: 1rem; - background-color: var(--btn-secondary); - border: none; - border-radius: 4px; - padding: 12px; - color: var(--text); - width: calc(100% - 24px); - margin-bottom: 12px; -} - -form.register input::placeholder { - color: var(--text-secondary); -} - -form.register input:focus { - background-color: #fff; - color: var(--btn-secondary); - transition: 200ms; - outline: none; -} - -form.register button { - appearance: none; - -webkit-appearance: none; - display: block; - border: 0; - border-radius: 4px; - font-family: Poppins, Arial, Helvetica, sans-serif; - font-size: 1rem; - color: var(--text); - padding: 12px; - background: var(--btn); - cursor: pointer; - width: 100%; -} - -form.register .login { - text-decoration: none; -} - -form.register .login button { - background: var(--btn-secondary); - margin-top: 18px; -} - -footer { - margin-top: 23px; -} - -@keyframes banner-notice { - 0% {top: -150px} - 20% {top: 35px} - 80% {top: 35px} - 100% {top: -150px} -} -.banner-notice { - display: flex; - justify-content: center; - position: fixed; - top: -150px; - width: 100%; - animation: banner-notice 5s; -} -.banner-notice div { - padding: 4px 36px; - border-radius: 5px; - z-index: 3; -} -.banner-notice.error div { - background: #A9375B; -} \ No newline at end of file diff --git a/src/routers/account.js b/src/routers/account.js index c2e603f..924530f 100644 --- a/src/routers/account.js +++ b/src/routers/account.js @@ -279,6 +279,19 @@ router.post('/register', async (request, response) => { response.redirect('/account'); }); +router.get('/register', async (request, response) => { + const renderData = { + layout: 'main', + locale: util.getLocale(request.locale.region, request.locale.language), + localeString: request.locale.toString(), + error: request.cookies.error + }; + + response.clearCookie('error'); + + response.render('account_register', renderData); +}); + router.get('/connect/discord', async (request, response) => { let tokens; try { diff --git a/views/account_login.handlebars b/views/account_login.handlebars index 239a764..c5373c8 100644 --- a/views/account_login.handlebars +++ b/views/account_login.handlebars @@ -1,36 +1,51 @@
- - {{> header}} - - - {{#if error}} diff --git a/views/account_register.handlebars b/views/account_register.handlebars index ad74278..3f7ca54 100644 --- a/views/account_register.handlebars +++ b/views/account_register.handlebars @@ -1,41 +1,61 @@ - +
- - {{> header}} - - -
-

Register

-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- - + +
- - {{> footer }} -
{{#if error}}