Set auth cookie lifetime (#102)

* Set auth cookie lifetime

* Small fixes

- upgrade editor and tools
- add link tool
- move "save" button and "uri" field

* Update twig.js

* move to deps

src/frontend/js/classes/editor.js

@@ -11,6 +11,7 @@ import Delimiter from '@editorjs/delimiter';
 import Table from '@editorjs/table';
 import Warning from '@editorjs/warning';
 import Checklist from '@editorjs/checklist';
+import LinkTool from '@editorjs/link';
 
 /**
  * Inline Tools for the Editor
@@ -59,6 +60,13 @@ export default class Editor {
           }
         },
 
+        linkTool: {
+          class: LinkTool,
+          config: {
+            endpoint: '/api/fetchUrl',
+          }
+        },
+
         code: {
           class: CodeTool,
           shortcut: 'CMD+SHIFT+D'

src/frontend/styles/components/page.pcss

@@ -418,3 +418,69 @@
 .block-checklist__item-checkbox--checked, .block-checklist__item-checkbox::after {
   opacity: 1;
 }
+
+.block-link {
+  display: block;
+  max-width: 100%;
+  margin: 40px auto;
+  padding: 25px !important;
+  border: 1px solid var(--color-line-gray) !important;
+  box-shadow: 0 1px 1px #4246540a;
+  border-radius: 2px;
+  color: inherit !important;
+  text-decoration: none !important;
+
+  @media (--mobile) {
+    box-sizing: border-box;
+    padding: 20px !important;
+    margin: 30px auto;
+  }
+
+  &__image {
+    float: right;
+    max-width: 70px;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    margin: 0 0 30px 30px;
+    border-radius: 3px;
+
+    @media (--mobile) {
+      margin: 0 0 15px 15px;
+    }
+  }
+
+  &__title {
+    font-size: 16px;
+    line-height: 1.45em;
+    font-weight: 600;
+
+    @media (--mobile) {
+      font-size: 12.2px;
+    }
+  }
+
+  &__domain {
+    display: inline-block;
+    font-variant: small-caps;
+    margin-top: 20px;
+    border: 0 !important;
+    color: var(--color-text-second);
+    font-size: 0.85em;
+
+    @media (--mobile) {
+      margin-top: 5px;
+      font-size: 12px;
+    }
+  }
+
+  &__description {
+    margin-top: 10px;
+    font-size: 0.9em;
+
+    @media (--mobile) {
+      margin-top: 5px;
+      font-size: 12px;
+    }
+  }
+}

src/routes/api/index.js

@@ -3,8 +3,10 @@ const router = express.Router();
 
 const pagesAPI = require('./pages');
 const transportAPI = require('./transport');
+const linksAPI = require('./links');
 
 router.use('/', pagesAPI);
 router.use('/', transportAPI);
+router.use('/', linksAPI);
 
 module.exports = router;

src/routes/api/links.js

@@ -0,0 +1,38 @@
+const express = require('express');
+const router = express.Router();
+const ogs = require('open-graph-scraper');
+
+/**
+ * Accept file url to fetch
+ */
+router.get('/fetchUrl', async (req, res) => {
+  const response = {
+    success: 0
+  };
+
+  if (!req.query.url) {
+    res.status(400).json(response);
+    return;
+  }
+
+  try {
+    const linkData = (await ogs({ url: req.query.url })).result;
+
+    response.success = 1;
+    response.meta = {
+      title: linkData.ogTitle,
+      description: linkData.ogDescription,
+      site_name: linkData.ogSiteName,
+      image: {
+        url: linkData.ogImage.url
+      }
+    };
+
+    res.status(200).json(response);
+  } catch (e) {
+    console.log(e);
+    res.status(500).json(response);
+  }
+});
+
+module.exports = router;

src/routes/auth.js

@@ -51,7 +51,10 @@ router.post('/auth', parseForm, csrfProtection, async (req, res) => {
       iat: Date.now(),
     }, passHash + config.secret);
 
-    res.cookie('authToken', token, { httpOnly: true });
+    res.cookie('authToken', token, {
+      httpOnly: true,
+      expires: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000), // 1 year
+    });
 
     res.redirect('/');
   });

src/routes/home.js

@@ -5,6 +5,7 @@ const router = express.Router();
 /* GET home page. */
 router.get('/', verifyToken, async (req, res) => {
   const config = req.app.locals.config;
+
   if (config.startPage) {
     return res.redirect(config.startPage);
   }

src/utils/twig.js

@@ -29,4 +29,18 @@ module.exports = (function () {
   twig.extendFilter('urlify', function (string) {
     return urlify(string);
   });
+
+  /**
+   * Parse link as URL object
+   *
+   * @param {string} linkUrl - link to be processed
+   * @returns {UrlWithStringQuery} — url data
+   */
+  twig.extendFunction('parseLink', function (linkUrl) {
+    try {
+      return new URL(linkUrl);
+    } catch (e) {
+      console.log(e);
+    }
+  });
 }());

src/views/auth.twig

@@ -8,7 +8,7 @@
     <p>
       Enter a password to access pages editing
     </p>
-    <input type="hidden" name="_csrf" value={{csrfToken}}>
+    <input type="hidden" name="_csrf" value={{ csrfToken }}>
     <input type="password" name="password" placeholder="Password">
     <input type="submit" value="Login">
   </form>

src/views/pages/blocks/linkTool.twig

@@ -0,0 +1,17 @@
+<a class="block-link" href="{{ link }}" target="_blank" rel="nofollow">
+    {% if meta.image.url %}
+        <img class="block-link__image" src="{{ meta.image.url }}">
+    {% endif %}
+
+    <div class="block-link__title">
+        {{ meta.title }}
+    </div>
+
+    <div class="block-link__description">
+        {{ meta.description }}
+    </div>
+
+    <span class="block-link__domain">
+        {{ parseLink(link).hostname }}
+    </span>
+</a>

src/views/pages/form.twig

@@ -48,18 +48,20 @@
           </span>
         {% endif %}
       </span>
-      <span class="writing-header__save" name="js-submit-save">Save</span>
+
+      {% if page is not empty %}
+        <p><input type="text" class="uri-input" name="uri-input" placeholder="URI (Optional)" value="{{ page.uri }}"></p>
+      {% endif %}
     </header>
     <div class="writing-editor">
       <div id="editorjs"></div>
     </div>
     <div class="writing-buttons">
+      <span class="writing-header__save" name="js-submit-save">Save</span>
+
       {% if page._id is not empty %}
         <span class="writing-buttons__remove" name="js-submit-remove">Remove</span>
       {% endif %}
     </div>
-    {% if page is not empty %}
-      <p><input type="text" class="uri-input" name="uri-input" placeholder="URI(Optional)" value="{{ page.uri }}"></p>
-    {% endif %}
   </section>
 {% endblock %}

src/views/pages/page.twig

@@ -32,7 +32,7 @@
       {% for block in page.body.blocks %}
         {# Skip first header, because it is already showed as a Title #}
         {% if not (loop.first and block.type == 'header') %}
-          {% if block.type in ['paragraph', 'header', 'image', 'code', 'list', 'delimiter', 'table', 'warning', 'checklist'] %}
+          {% if block.type in ['paragraph', 'header', 'image', 'code', 'list', 'delimiter', 'table', 'warning', 'checklist', 'linkTool'] %}
             {% include './blocks/' ~ block.type ~ '.twig' with block.data %}
           {% endif %}
         {% endif %}