set clor

src/client/js/components/Page/ShareLinkAlert.jsx

@@ -6,10 +6,25 @@ import { withTranslation } from 'react-i18next';
 const ShareLinkAlert = (props) => {
   const { t } = props;
   const shareContent = document.getElementById('is-shared-page');
-  const expiration = shareContent.getAttribute('data-expiration');
+  const expiration = new Date(shareContent.getAttribute('data-share-link-expiration'));
+  const createdAt = new Date(shareContent.getAttribute('data-share-link-created-at'));
+  const wholeTime = expiration.getTime() - createdAt.getTime();
+  const remainingTime = expiration.getTime() - new Date().getTime();
+  const percentage = remainingTime / wholeTime * 100;
+
+  function specifyColor() {
+    if (percentage >= 75) {
+      return 'success';
+    } if (percentage >= 50) {
+      return 'info';
+    } if (percentage >= 25) {
+      return 'warning';
+    }
+    return 'danger';
+  }
 
   return (
-    <p className="alert alert-pink py-3 px-4">
+    <p className={`alert alert-${specifyColor()} py-3 px-4`}>
       <i className="icon-fw icon-link"></i>
       {/* eslint-disable-next-line react/no-danger */}
       <span dangerouslySetInnerHTML={{ __html: t('page_page.notice.expiration', { expiration }) }} />

src/server/routes/page.js

@@ -457,7 +457,8 @@ module.exports = function(crowi, app) {
 
     const renderVars = {};
 
-    renderVars.expiration = shareLink.expiration;
+    renderVars.sharelink = shareLink;
+
     // populate
     page = await page.populateDataToShowRevision();
     addRendarVarsForPage(renderVars, page);

src/server/views/layout-growi/shared_page.html

@@ -14,7 +14,7 @@
 {% endblock %}
 
 {% block content_main %}
-  <div class="row" id="is-shared-page" data-expiration="{{ expiration|datetz('Y/m/d H:i:s')}}">
+  <div class="row" id="is-shared-page" data-share-link-expiration="{{ sharelink.expiration|datetz('Y/m/d H:i:s')}}" data-share-link-created-at="{{ sharelink.createdAt|datetz('Y/m/d H:i:s')}}">
     <div class="col grw-page-content-container">
      <div id="share-link-alert"></div>
 

src/server/views/layout-kibela/shared_page.html

@@ -14,7 +14,7 @@
 {% endblock %}
 
 {% block content_main %}
-  <div class="row" id="is-shared-page" data-expiration="{{ expiration|datetz('Y/m/d H:i:s')}}">
+  <div class="row" id="is-shared-page" data-expiration="{{ sharelink.expiration|datetz('Y/m/d H:i:s')}}" data-create-at="{{ }}">
     <div class="col-12 col-xl-9 col-lg-8 bg-white round-corner">
       <div id="share-link-alert"></div>