UI: refresh home page and openly operated page

ENHANCEMENT: send cancellation email
PRIVACY: remove CDN usage

code/package.json

@@ -37,6 +37,7 @@
     "fs-extra": "^7.0.0",
     "mocha": "^5.2.0",
     "nyc": "^14.0.0",
-    "pg": "^7.4.3"
+    "pg": "^7.4.3",
+    "sinon": "^7.3.2"
   }
 }

code/test/controllers/subscription-controller.spec.js

@@ -1,11 +1,13 @@
 const should = require("chai").should();
+const sinon = require("sinon");
 const Client = require("../client.js");
 const Constants = require('../constants.js');
 const { reset, changeDate, resetDate, addOldIosSubscription, makeStripeSource } = require("../utilities.js");
 
 const { User } = require("shared/models");
 const { Certificate } = require("shared/models");
 const { Stripe } = require("shared/utilities");
+const { Email } = require("shared/utilities");
 
 const TWENTY_DAYS = 20 * 86400000;
 const NEW_CARD_TOKEN = "tok_amex";
@@ -830,7 +832,11 @@ describe("Subscription Controller", () => {
     describe("Success", () => {
 
       describe("Create and cancel Stripe subscription", () => {
-        it("should have 0 active subscriptions at the end", (done) => {
+        after(function () {
+          Email.sendCancelSubscription.restore();
+        });
+        it("should have 0 active subscriptions at the end and also send cancellation email", (done) => {
+          const spyEmailSendCancelSubscription = sinon.spy(Email, 'sendCancelSubscription');
           Client.signupConfirmSignin()
             .then(response => {
               return makeStripeSource(NEW_CARD_TOKEN);
@@ -847,6 +853,7 @@ describe("Subscription Controller", () => {
               return Client.cancelSubscription(newSubscriptionId, "test");
             })
             .then(response => {
+              sinon.assert.calledOnce(spyEmailSendCancelSubscription);
               response.status.should.equal(200);
               response.text.should.contain("Subscription cancelled successfully");
               return Client.activeSubscriptions();

code/test/test-files/add-old-ios-subscription.sql

@@ -10,6 +10,8 @@ INSERT INTO subscriptions
   "in_trial",
   "failed_last_check",
   "renew_enabled",
+  "expiration_intent_cancelled",
+  "sent_cancellation_email",
   "updated"
 )
 VALUES
@@ -24,5 +26,7 @@ VALUES
   FALSE,
   FALSE,
   TRUE,
+  FALSE,
+  FALSE,
   '2018-09-29 00:29:32.011578+02'
 );

code/test/test-files/add-subscription.sql

@@ -10,6 +10,8 @@ INSERT INTO subscriptions
   "in_trial",
   "failed_last_check",
   "renew_enabled",
+  "expiration_intent_cancelled",
+  "sent_cancellation_email",
   "updated"
 )
 VALUES
@@ -24,6 +26,8 @@ VALUES
   FALSE,
   FALSE,
   TRUE,
+  FALSE,
+  FALSE,
   '2018-09-25 22:53:31.202802+02'
 )
 RETURNING *;

code/views/index.hbs

@@ -10,7 +10,7 @@
       <div class="col-12">
         <h1 class="mt-3"><strong>Finally, a VPN you can trust.</strong></h1>
         <h4 class="mt-3 mb-3" style="line-height:1.6; color: #8f8f8f; font-size: 1.4rem;">
-          <span class="d-inline-block">The world's first fully audited and <a href="/openly-operated" class="confirmed-blue text-nowrap"><strong>Openly Operated</strong></a> VPN.</span>
+          <span class="d-inline-block">The world's first no-logs, fully audited, and <a href="/openly-operated" class="confirmed-blue text-nowrap"><strong>Openly Operated</strong></a> VPN.</span>
           <span class="d-inline-block"> Bulletproof your browsing and data against hackers, snoopers, and your ISP.</span>
         </h4>
         <p class="mt-5 mb-1" style="color: #ddd; font-weight: 700; font-size: 14px;"><strong>GET STARTED FREE</strong></p>
@@ -39,14 +39,14 @@
     <div class="row">
       <div class="col-12 d-none d-lg-block">
         <div class="device-wrapper" style="margin-left: 3%; max-width: 80%; float:left;">
-          <div class="device" data-device="Macbook" data-orientation="portrait" data-color="gold">
+          <div class="device" data-device="Macbook" data-orientation="portrait" data-color="black">
             <div class="screen">
               <img src="images/mac-screenshot.jpg" style="max-width: 100%;">
             </div>
           </div>
         </div>
         <div class="device-wrapper mt-3" style="max-width: 230px; margin-left: -14%; float:left;">
-          <div class="device" data-device="iPhone7" data-orientation="portrait" data-color="black">
+          <div class="device" data-device="iPhoneX" data-orientation="portrait" data-color="black">
             <div class="screen">
               <img src="images/iphone-screenshot.jpg" style="max-width: 100%;">
             </div>
@@ -57,7 +57,7 @@
     <div class="row">
       <div class="col-12 d-lg-none">
         <div class="device-wrapper" style="margin-left: auto; margin-right: auto;">
-          <div class="device" data-device="iPhone7" data-orientation="portrait" data-color="black">
+          <div class="device" data-device="iPhoneX" data-orientation="portrait" data-color="black">
             <div class="screen">
               <img src="images/iphone-screenshot.jpg" style="max-width: 100%;">
             </div>
@@ -67,21 +67,24 @@
     </div>
   </div>
 
-  <div class="container-fluid mt-5 pt-4 pb-3" style="background-color: #f4f4f4;">
-    <div class="container pt-5 pb-3">
+  <div class="container-fluid mt-5 pt-5 pb-1 px-5" style="background-color: #f4f4f4;">
       <div class="row text-left">
-        <div class="col-md-6 pb-2">
+        <div class="col-md-4 pb-2">
           <img src="images/tc.png" style="max-width: 175px;">
           <p class="mt-3 font-italic mb-2">"Confirmed VPN wants to bring transparency to the VPN industry"</p>
           <p class="text-right" style="font-size: 0.8rem">- TechCrunch, December 12th, 2018</p>
         </div>
-        <div class="col-md-6 pb-2">
+        <div class="col-md-4 pb-2">
+          <img src="images/theverge.png" style="max-width: 175px;">
+          <p class="mt-3 font-italic mb-2">"Openly Operated wants to make privacy policies actually mean something"</p>
+          <p class="text-right" style="font-size: 0.8rem">- The Verge, June 18th, 2019</p>
+        </div>
+        <div class="col-md-4 pb-2">
             <img src="images/9to5mac.png" style="max-width: 175px;">
             <p class="mt-3 font-italic mb-2">"Confirmed VPN update makes it the first open service with third-party audits, open source code, more"</p>
             <p class="text-right" style="font-size: 0.8rem">- 9to5Mac, December 12th, 2018</p>
         </div>
       </div>
-    </div>
   </div>
 
   <div class="container mt-5 pt-1">
@@ -246,21 +249,33 @@
       <div class="col-xl-8 offset-xl-2 col-lg-10 offset-lg-1 col-12 text-left pb-3 pt-4">
         <h4><strong>Commitment To Security And Privacy Audits</strong></h4>
         <h5 class="text-secondary" style="line-height: 1.6">
-          In addition to earning user trust by being the only Openly Operated VPN, Confirmed is fully audited and is committed to frequent audits:<br/>
-          <blockquote>
-            <p class="mb-0" style="font-size: 1.15rem">
-              Confirmed and its auditors can assert that no user data is viewed by, sold to, or shared with third parties.
-              <span>Factor13 LLC, December 6th, 2018</span>
-              <a target="_blank" href="https://s3.amazonaws.com/confirmed-audits/factor13.pdf" style="font-style: normal; font-weight: 700; color: #3498db; font-size: 12px;">View Full Report</a>
-            </p>
-          </blockquote>
-          <blockquote>
-            <p class="mb-0" style="font-size: 1.15rem">
-              The review found no evidence of third-party data sharing or logging of data from internet traffic.
-              <span>Security Consultant Ryan Koven, November 21st, 2018</span>
-              <a target="_blank" href="https://s3.amazonaws.com/confirmed-audits/rkoven.pdf" style="font-style: normal; font-weight: 700; color: #3498db; font-size: 12px;">View Full Report</a>
-            </p>
-          </blockquote>
+          Confirmed VPN is fully and frequently audited, with the following verified by independent third parties:<br/>
+          <ul class="text-left list-unstyled mt-2 pb-2">
+            <li class="ml-5 pt-3">
+              <h4>
+                &#8226; No Logging User Traffic
+              </h4>
+            </li>
+            <li class="ml-5 pt-3">
+              <h4>
+                &#8226; No Access To User Data
+              </h4>
+            </li>
+            <li class="ml-5 pt-3">
+              <h4>
+                &#8226; Modern Security & Encryption
+              </h4>
+            </li>
+          </ul>
+          <div class="text-center pt-0">
+            <a href="https://openlyoperated.org/report/confirmedvpn" target="_blank" class="btn confirmed-blue-btn-lg m-1">
+              View Full Audit Reports
+            </a>
+            <br/>
+            <div class="small mt-1">Older, archived audits available <a target="_blank" href="https://s3.amazonaws.com/confirmed-audits/factor13.pdf">here</a> and <a target="_blank" href="https://s3.amazonaws.com/confirmed-audits/rkoven.pdf">here</a>.</div>
+            <br/>
+
+          </div>
         </h5>
       </div>
     </div>

code/views/openly-operated.hbs

@@ -8,6 +8,11 @@
 
     <div class="row mt-4 text-left">
 
+      <div class="col-lg-8 offset-lg-2 mt-4 mb-4 bg-light px-5 py-4">
+        <p><a href="https://www.theverge.com/2019/6/18/18682026/openly-operated-user-data-privacy-auditing-standard-announce" target="_blank" style="border-bottom: none;"><img src="/images/theverge.png" alt="The Verge logo" title="The Verge logo" class="img-fluid mb-0 mt-3" style=" max-width: 155px;"></a></p>
+        <h5 class="pb-0">"Openly Operated wants to make privacy policies actually mean something... [it] lays out an attractive paradigm for privacy."</h5>
+        <p class="pt-0"><a href="https://www.theverge.com/2019/6/18/18682026/openly-operated-user-data-privacy-auditing-standard-announce" target="_blank" class="small d-block text-right font-weight-normal" style="border-bottom: none;">— The Verge, June 18th, 2019</a></p>
+      </div>
 
       <div class="col-12 mb-4 mt-4 text-center">
         <h2 class="mt-2"><strong>What is Openly Operated?</strong></h2>