Auth page styles improved

src/frontend/styles/components/auth.pcss

@@ -0,0 +1,33 @@
+.auth-form {
+  font-size: 15px;
+  text-align: center;
+  margin-top: 30vh;
+
+  h1 {
+    @media (--mobile){
+      font-size: 20px;
+    }
+  }
+
+  p {
+    margin: 40px 0 20px;
+  }
+
+  input[type="password"] {
+    padding: 9px;
+    font-size: 15px;
+    outline: none;
+    border-radius: 3px;
+    -webkit-appearance: none;
+    border: 1px solid var(--color-line-gray);
+  }
+
+  input[type="submit"]{
+    @apply --button;
+    @apply --button-primary;
+    font-size: 15px;
+    padding: 10px 20px;
+    line-height: inherit;
+    vertical-align: top;
+  }
+}

src/frontend/styles/components/page.pcss

@@ -98,10 +98,11 @@
  * ==================
  */
 .block-code {
-  padding: 20px !important;
+  padding: 15px !important;
   border-radius: 5px;
   font-size: 13px;
-  //border: 1px solid var(--color-line-gray);
+  background: #fcfaff !important;
+  border: 1px solid #ededf0;
   font-family: Menlo,Monaco,Consolas,Courier New,monospace;
   line-height: 1.7em;
 }

src/frontend/styles/main.pcss

@@ -6,6 +6,7 @@
 @import './components/writing.pcss';
 @import './components/page.pcss';
 @import './components/landing.pcss';
+@import './components/auth.pcss';
 
 body {
   font-family: system-ui, Helvetica, Arial, Verdana;

src/frontend/styles/vars.pcss

@@ -8,7 +8,7 @@
   /**
    * Site layout sizes
    */
-  --layout-padding-horisontal: 40px;
+  --layout-padding-horisontal: 30px;
   --layout-padding-vertical: 40px;
   --layout-width-aside: 200px;
   --layout-width-main-col: 650px;
@@ -30,6 +30,8 @@
     text-decoration: none;
     cursor: pointer;
     white-space: nowrap;
+    -webkit-appearance: none;
+    border: 0;
 
     svg {
       margin: 0 0.3em 0 -0.05em;

src/routes/auth.js

@@ -17,7 +17,6 @@ const parseForm = bodyParser.urlencoded({ extended: false });
 router.get('/auth', csrfProtection, function (req, res) {
   res.render('auth', {
     title: 'Login page',
-    header: 'Enter password',
     csrfToken: req.csrfToken()
   });
 });

src/routes/middlewares/token.js

@@ -16,6 +16,7 @@ module.exports = async function verifyToken(req, res, next) {
   if (!userDoc) {
     res.locals.isAuthorized = false;
     next();
+    return;
   }
 
   jwt.verify(token, userDoc.passHash + config.secret, (err, decodedToken) => {

src/views/auth.twig

@@ -1,11 +1,16 @@
 {% extends 'layout.twig' %}
 
 {% block body %}
-  <h1>{{header}}</h1>
+  <form class="auth-form" method="post" action="/auth">
-  <form method="post" action="/auth">
+    <h1>
+      ┬┴┬┴┤ ͜ʖ ͡°) ├┬┴┬┴
+    </h1>
+    <p>
+      Enter a password to access pages editing
+    </p>
     <input type="hidden" name="_csrf" value={{csrfToken}}>
     <input type="password" name="password" placeholder="Password">
-    <input type="submit" value="login">
+    <input type="submit" value="Login">
   </form>
 {% endblock %}