From 12ab0339c12a65770e0bb69e75c5f07ff63404df Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Wed, 9 Mar 2022 13:35:09 +0000
Subject: [PATCH] Updated password protection page

No issue
---
 .../apps/private-blogging/lib/middleware.js   |   2 +-
 .../private-blogging/lib/views/private.hbs    |  16 +-
 core/frontend/public/ghost.css                | 278 +++++++++---------
 3 files changed, 143 insertions(+), 153 deletions(-)

diff --git a/core/frontend/apps/private-blogging/lib/middleware.js b/core/frontend/apps/private-blogging/lib/middleware.js
index c05e5d5e3d..b02efb0f87 100644
--- a/core/frontend/apps/private-blogging/lib/middleware.js
+++ b/core/frontend/apps/private-blogging/lib/middleware.js
@@ -13,7 +13,7 @@ const privateRoute = '/private/';
 
 const messages = {
     pageNotFound: 'Page not found.',
-    wrongPassword: 'Wrong password'
+    wrongPassword: 'Incorrect password.'
 };
 
 function verifySessionHash(salt, hash) {
diff --git a/core/frontend/apps/private-blogging/lib/views/private.hbs b/core/frontend/apps/private-blogging/lib/views/private.hbs
index 65d6992a23..cc96d48e07 100644
--- a/core/frontend/apps/private-blogging/lib/views/private.hbs
+++ b/core/frontend/apps/private-blogging/lib/views/private.hbs
@@ -22,23 +22,19 @@
                 <main class="gh-main" role="main">
                     <div class="gh-flow">
                         <div class="gh-flow-content-wrap">
-                            <section class="gh-flow-content">
+                            <section class="gh-flow-content private">
                                 <header>
-                                    <h1>This site is private</h1>
+                                    <h1>This site is private.</h1>
                                 </header>
                                 <form class="gh-signin" method="post" novalidate="novalidate">
                                     <div class="form-group{{#if error}} error{{/if}}">
-                                        <span class="gh-input-icon gh-icon-lock">
-                                            <svg version="1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g><path d="M12 14c-.552 0-1 .449-1 1 0 .365.207.672.5.846v2.654c0 .276.224.5.5.5s.5-.224.5-.5v-2.654c.293-.174.5-.481.5-.846 0-.551-.448-1-1-1zM20.5 9h-2.5v-3c0-3.309-2.691-6-6-6s-6 2.691-6 6v3h-2.5c-.276 0-.5.224-.5.5v14c0 .276.224.5.5.5h17c.276 0 .5-.224.5-.5v-14c0-.276-.224-.5-.5-.5zm-13.5-3c0-2.757 2.243-5 5-5s5 2.243 5 5v3h-10v-3zm13 17h-16v-13h16v13z"/></g></svg>
                                             {{input_password class="gh-input" placeholder="Password"}}
-                                        </span>
+                                            {{#if error}}
+                                                <p class="main-error">{{error.message}}</p>
+                                            {{/if}}
                                     </div>
-                                    <button class="gh-btn gh-btn-blue gh-btn-block" type="submit"><span>Enter Now</span></button>
+                                    <button class="gh-btn" type="submit"><span>Access site &rarr;</span></button>
                                 </form>
-
-                                {{#if error}}
-                                    <p class="main-error">{{error.message}}</p>
-                                {{/if}}
                             </section>
                         </div>
                     </div>
diff --git a/core/frontend/public/ghost.css b/core/frontend/public/ghost.css
index c3702f7c88..ce130a2caf 100644
--- a/core/frontend/public/ghost.css
+++ b/core/frontend/public/ghost.css
@@ -349,49 +349,66 @@ th {
 }
 /* Colour classes
 /* ---------------------------------------------------------- */
+.black {
+    color: #15171A;
+}
+
 .darkgrey {
-    color: #343f44;
+    color: #394047;
 }
+
 .midgrey {
-    color: #738a94;
+    color: #7C8B9A;
 }
+
 .lightgrey {
-    color: #e5eff5;
+    color: #CED4D9;
 }
+
 .blue {
-    color: #3eb0ef;
+    color: #14b8ff;
 }
+
 .red {
-    color: #f05230;
+    color: #f50b23;
 }
+
 .orange {
-    color: #fecd35;
+    color: #ffb41f;
 }
+
 .green {
-    color: #a4d037;
+    color: #30cf43;
 }
+
 /* Colour classes (hover)
 /* ---------------------------------------------------------- */
 .darkgrey-hover:hover {
-    color: #343f44;
+    color: #394047
 }
+
 .midgrey-hover:hover {
-    color: #738a94;
+    color: #7C8B9A;
 }
+
 .lightgrey-hover:hover {
-    color: #e5eff5;
+    color: #CED4D9;
 }
+
 .blue-hover:hover {
-    color: #3eb0ef;
+    color: #14b8ff;
 }
+
 .red-hover:hover {
-    color: #f05230;
+    color: #f50b23;
 }
+
 .orange-hover:hover {
-    color: #fecd35;
+    color: #ffb41f;
 }
+
 .green-hover:hover {
-    color: #a4d037;
+    color: #30cf43;
 }
 
 /* Layout
@@ -493,7 +510,6 @@ h2 {
     outline: none;
     border: 1px solid rgb(214, 227, 235);
     color: rgb(130, 154, 168);
-    text-shadow: 0 1px 0 #fff;
     text-decoration: none !important;
     -webkit-user-select: none;
        -moz-user-select: none;
@@ -608,6 +624,7 @@ h2 {
     overflow: hidden;
     height: 100%;
 }
+
 /* Content viewport, contains everything else */
 .gh-viewport {
     -ms-flex-positive: 1;
@@ -617,6 +634,7 @@ h2 {
     overflow: hidden;
     max-height: 100%;
 }
+
 .gh-main {
     position: relative;
     -ms-flex-positive: 1;
@@ -630,161 +648,94 @@ h2 {
 /* Full screen workflow
 /* ---------------------------------------------------------- */
 .gh-flow {
-    -ms-flex-positive: 1;
-        flex-grow: 1;
-    display: -ms-flexbox;
+    flex-grow: 1;
     display: flex;
-    -ms-flex-direction: column;
-        flex-direction: column;
+    flex-direction: column;
     overflow-y: auto;
     min-height: 100%;
+    background: linear-gradient(315deg,#efefef,#fff);
 }
-.gh-flow-head {
-    -ms-flex-negative: 0;
-        flex-shrink: 0;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-pack: justify;
-        justify-content: space-between;
-    padding-top: 4vh;
-    padding-bottom: 20px;
-}
+
 .gh-flow-content-wrap {
-    -ms-flex-positive: 1;
-        flex-grow: 1;
-    -ms-flex-negative: 0;
-        flex-shrink: 0;
-    display: -ms-flexbox;
+    flex-grow: 1;
+    flex-shrink: 0;
     display: flex;
-    -ms-flex-pack: center;
-        justify-content: center;
-    -ms-flex-align: center;
-        align-items: center;
+    justify-content: center;
+    align-items: center;
     margin: 0 5%;
     padding-bottom: 8vh;
 }
-.gh-flow-back {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-align: center;
-        align-items: center;
-    margin: 0 0 0 3%;
-    padding: 2px 9px 2px 5px;
-    border: transparent 1px solid;
-    border-radius: 4px;
-    color: #7d878a;
-    font-weight: 100;
-    transition: all 0.3s ease;
-}
-.gh-flow-back svg {
-    margin-right: 4px;
-    height: 12px;
-    line-height: 14px;
-}
-.gh-flow-back svg path {
-    stroke: #7d878a;
-    stroke-width: 1.2px;
-}
-.gh-flow-back:hover {
-    border: #dae1e3 1px solid;
-}
-.gh-flow-back-plain {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-align: center;
-        align-items: center;
-    margin: 0 0 0 3%;
-    padding: 2px 9px 2px 5px;
-    color: #7d878a;
-    font-weight: 300;
-    transition: all 0.3s ease;
-    text-decoration: none;
-}
-.gh-flow-back-plain svg {
-    margin-right: 4px;
-    height: 12px;
-    line-height: 14px;
-}
-.gh-flow-back-plain svg path {
-    stroke: #7d878a;
-    stroke-width: 1.2px;
-}
-.gh-flow-back-plain:hover {
-    color: #15212A;
-}
-.gh-flow-nav {
-    position: relative;
-    -ms-flex: 1;
-        flex: 1;
-}
+
 .gh-flow-content {
-    display: -ms-flexbox;
     display: flex;
-    -ms-flex-direction: column;
-        flex-direction: column;
-    max-width: 700px;
+    flex-direction: column;
+    max-width: 520px;
     width: 100%;
-    color: #738a94;
-    text-align: center;
+    margin: 4.8rem 0 8rem;
+    color: var(--darkgrey);
     font-size: 1.9rem;
     line-height: 1.5em;
-    font-weight: 100;
-}
-
-.gh-flow-content .gh-input-icon input {
-    padding-left: 35px;
-}
-
-.gh-flow-content-unsubscribe {
     font-weight: 300;
 }
 
-@media (max-width: 500px) {
-    .gh-flow-head-unsubscribe {
-        padding-top: 2.8vh;
-    }
+.gh-flow-content.private {
+    max-width: 480px;
+}
+
+@media (max-width: 400px) {
     .gh-flow-content {
+        margin: 4rem 0 6rem;
         font-size: 4vw;
     }
-    .gh-flow-content-unsubscribe {
-        font-size: 1.8rem;
-        line-height: 1.6em;
-    }
 }
+
 .gh-flow-content header {
-    margin: 0 auto;
-    max-width: 520px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
+
 .gh-flow-content h1 {
-    font-size: 4.2rem;
-    font-weight: 100;
+    margin-bottom: 40px;
+    color: #15171A;
+    font-size: 4.1rem;
+    font-weight: 700;
+    line-height: 1.15em;
 }
+
 @media (max-width: 600px) {
     .gh-flow-content h1 {
         font-size: 7vw;
     }
 }
+
 .gh-flow-content .gh-btn {
     display: block;
     margin: 20px auto 0;
     max-width: 400px;
 }
+
 .gh-flow-content .form-group {
+    position: relative;
     margin-bottom: 2.5rem;
 }
-.gh-flow-content input {
-    padding: 10px;
-    border: #dae1e3 1px solid;
-    font-size: 1.6rem;
-    line-height: 1.4em;
-    font-weight: 100;
+
+.gh-flow-content .form-group.error .gh-input {
+    border-color: #f50b23;
+    box-shadow: 0 0 0 3px rgba(239,24,24,.15);
 }
+
+.gh-flow-content .main-error {
+    position: absolute;
+    right: 0;
+    margin: 0;
+    color: #7C8B9A;
+    font-size: 1.35rem;
+    font-weight: 400;
+    text-align: center;
+    user-select: text;
+}
+
 .gh-flow-em {
     font-weight: 500;
 }
@@ -792,23 +743,66 @@ h2 {
 /* Sign in
 /* ---------------------------------------------------------- */
 .gh-signin {
-    position: relative;
-    margin: 30px auto;
-    padding: 40px;
-    max-width: 400px;
-    width: 100%;
-    border: #dae1e3 1px solid;
-    background: #f8fbfd;
-    border-radius: 5px;
-    text-align: left;
-}
-.gh-signin .form-group {
     margin-bottom: 1.5rem;
 }
+
+.gh-signin .gh-input,
+.gh-signin .gh-input:-webkit-autofill::first-line {
+    height: 54px;
+    padding: 12px 16px;
+    font-size: 1.8rem;
+    border-radius: 8px;
+}
+
+.gh-signin .gh-input::placeholder {
+    color: #abb4be;
+    font-weight: 400;
+    opacity: 1;
+}
+
+.gh-signin .gh-input::-webkit-input-placeholder {
+    color: #abb4be;
+    font-weight: 400;
+}
+
+.gh-signin .gh-input:-ms-input-placeholder {
+    color: #abb4be;
+    font-weight: 400;
+}
+
+.gh-signin .gh-input::-moz-placeholder {
+    color: #abb4be;
+    font-weight: 400;
+    opacity: 1;
+}
+
+.gh-signin .gh-input:focus {
+    border-color: #30cf43;
+    box-shadow: 0 0 0 3px rgba(26,170,96,.15);
+}
+
 .gh-signin .gh-btn {
     margin: 0;
 }
 
+.gh-signin .gh-btn {
+    width: 100%;
+    height: 54px;
+    max-width: unset;
+    margin-top: 40px;
+    background: #15171A;
+    font-weight: 300;
+    line-height: 54px;
+    border-radius: 8px;
+    transition: all 0.4s ease;
+    -webkit-font-smoothing: subpixel-antialiased;
+}
+
+.gh-signin .gh-btn span {
+    color: #fff;
+    font-size: 1.8rem;
+}
+
 /* Error /ghost/404/
 /* ---------------------------------------------------------- */