Disable Sync in the future

package.json

@@ -84,7 +84,7 @@
     "sinon-chrome": "2.2.1",
     "stylelint": "^8.4.0",
     "stylelint-config-recommended": "^2.0.1",
-    "web-ext": "^1.9.1",
+    "web-ext": "^5.0.0",
     "webpack": "^3.10.0",
     "webpack-sources": "1.0.1",
     "winston": "^3.0.0"

src/sidebar/app/components/Footer.js

@@ -9,7 +9,10 @@ import WarningIcon from './icons/WarningIcon';
 
 import { formatFooterTime } from '../utils/utils';
 
-import { disconnect, openLogin, pleaseLogin, authenticate } from '../actions';
+import { disconnect, openLogin, pleaseLogin, authenticate, exportHTML } from '../actions';
+const expiredDate = new Date('2020/11/01');
+const now = new Date();
+const serversActive = now < expiredDate;
 
 class Footer extends React.Component {
   constructor(props) {
@@ -115,6 +118,16 @@ class Footer extends React.Component {
       }
     };
 
+    // Handles "Export All Notes" functionality
+    this.exportAll = () => {
+      let output = '';
+      for (const note of this.props.state.notes) {
+        output += note.content;
+        output += '<br/><hr/><br/>';
+      }
+      exportHTML(output);
+    };
+
     // Handle keyboard navigation on menu
     this.handleKeyPress = (event) => {
       switch (event.key) {
@@ -156,12 +169,20 @@ class Footer extends React.Component {
       }
     };
   }
-
   // Not a big fan of all those if.
   componentWillReceiveProps(nextProps) {
     this.currentState = this.getFooterState(nextProps.state);
   }
 
+  componentDidMount() {
+    if (!serversActive && (!this.currentState.isSignInState || this.currentState.isReconnectState)) {
+      // needs a delay before disconnecting
+      setTimeout(() => {
+        this.props.dispatch(disconnect());
+      }, 2000);
+    }
+  }
+
   render() {
 
     if (!this.props.state.kinto.isLoaded) return '';
@@ -181,7 +202,9 @@ class Footer extends React.Component {
         ref={footerbuttons => this.footerbuttons = footerbuttons}
         className={footerClass}>
 
-        { this.currentState.isSignInState || this.currentState.yellowBackground ?
+        <div id="footerButtons">
+
+        { serversActive && (this.currentState.isSignInState || this.currentState.yellowBackground) ?
           <button
             className="fullWidth"
             title={ this.currentState.tooltip ? this.currentState.tooltip() : '' }
@@ -189,23 +212,22 @@ class Footer extends React.Component {
             { this.currentState.yellowBackground ?
               <WarningIcon /> : <SyncIcon />} <span>{ this.currentState.text() }</span>
           </button>
-          : null }
+          : <div className="fullWidth"></div> }
 
-        { !this.currentState.isSignInState && !this.currentState.yellowBackground ?
+        { serversActive && (!this.currentState.isSignInState && !this.currentState.yellowBackground) ?
           <div className={this.currentState.isClickable ? 'isClickable btnWrapper' : 'btnWrapper'}>
             <button
               id="enable-sync"
               disabled={!this.currentState.isClickable}
               onClick={(e) => this.enableSyncAction(e)}
-              title={ browser.i18n.getMessage('syncToMail', this.props.state.sync.email) }
+              title={browser.i18n.getMessage('syncToMail', this.props.state.sync.email)}
               className="iconBtn">
-              <SyncIcon />
+              <SyncIcon/>
             </button>
-            <p className={ this.currentState.yellowBackground ? 'alignLeft' : null}>{ this.currentState.text() }</p>
+              <p className={this.currentState.yellowBackground ? 'alignLeft' : null}>{this.currentState.text()}</p>
           </div>
-          : null }
+          : <div className="fullWidth"></div> }
 
-        { !this.currentState.isSignInState ?
           <div className="photon-menu close top left" ref={menu => this.menu = menu }>
             <button
               ref={contextMenuBtn => this.contextMenuBtn = contextMenuBtn}
@@ -216,7 +238,8 @@ class Footer extends React.Component {
             <div className="wrapper">
               <ul role="menu" >
                 <li>
-                  <button
+                  { !this.currentState.isSignInState ?
+                    <button
                     role="menuitem"
                     onKeyDown={this.handleKeyPress}
                     ref={btn => btn ? this.buttons.push(btn) : null }
@@ -225,11 +248,22 @@ class Footer extends React.Component {
                     { !this.props.state.sync.email ? browser.i18n.getMessage('cancelSetup') : '' }
                     { this.props.state.sync.email && this.currentState.isReconnectState ? browser.i18n.getMessage('removeAccount') : '' }
                     { this.props.state.sync.email && !this.currentState.isReconnectState ? browser.i18n.getMessage('disableSync') : '' }
+                  </button> : null }
+                  <button
+                    role="menuitem"
+                    onKeyDown={this.exportAll}
+                    ref={btn => btn ? this.buttons.push(btn) : null }
+                    title="Export All Notes"
+                    onClick={ this.exportAll }> Export All Notes
                   </button>
                 </li>
               </ul>
             </div>
-          </div> : null }
+          </div>
+        </div>
+        { serversActive && <div className="serverAlert">
+          Notes syncing will be disabled on <a href='https://google.com'>November 1, 2020</a>
+        </div>}
       </footer>
     );
   }

src/sidebar/static/scss/footer.scss

@@ -3,12 +3,11 @@
 Footer Styles
  */
 
-footer {
+#footerButtons {
   width: 100%;
   height: 40px;
   font-size: 13px;
-    color: #969696;
-
+  color: #969696;
   align-items: stretch;
   position: relative;
   border-top: 1px solid #d7d7db;
@@ -35,7 +34,7 @@ footer {
   }
 
   // This is full with button, used with Sign in to sync and warning
-  button.fullWidth {
+  .fullWidth {
     padding-left: 16px;
     padding-right: 16px;
     display: block;
@@ -93,7 +92,15 @@ footer {
     position: relative;
     right: 8px;
   }
+}
 
+footer .serverAlert {
+  background-color: rgb(255, 236, 173);
+  text-align: center;
+  align-items: stretch;
+  position: relative;
+  border-top: 1px solid #d7d7db;
+  padding: 5px;
 }
 
 /* Animate sync icon */