feat(service): connect another service

Author: vbudhram

app/images/connect_another_service/lockbox.png

@@ -24,6 +24,7 @@ import CompleteSignUpView from '../views/complete_sign_up';
 import ConfirmResetPasswordView from '../views/confirm_reset_password';
 import ConfirmView from '../views/confirm';
 import ConnectAnotherDeviceView from '../views/connect_another_device';
+import ConnectAnotherServiceView from '../views/connect_another_service';
 import CookiesDisabledView from '../views/cookies_disabled';
 import DeleteAccountView from '../views/settings/delete_account';
 import DisplayNameView from '../views/settings/display_name';
@@ -108,6 +109,7 @@ const Router = Backbone.Router.extend({
     'confirm_signin(/)': createViewHandler(ConfirmView, { type: VerificationReasons.SIGN_IN }),
     'connect_another_device(/)': createViewHandler(ConnectAnotherDeviceView),
     'connect_another_device/why(/)': createChildViewHandler(WhyConnectAnotherDeviceView, ConnectAnotherDeviceView),
+    'connect_another_service(/)': createViewHandler(ConnectAnotherServiceView),
     'cookies_disabled(/)': createViewHandler(CookiesDisabledView),
     'force_auth(/)': createViewHandler(ForceAuthView),
     'legal(/)': createViewHandler('legal'),

app/images/connect_another_service/monitor.png

@@ -0,0 +1,24 @@
+<div id="main-content" class="card connect-another-service">
+    <header id="fxa-connect-another-service-header"><h1>{{#t}}Connect another service{{/t}}</h1></header>
+
+    <p>Do more with your Firefox Account with these new services.</p>
+
+    {{#connect-services}}
+        <div class="connect-service">
+            <div class="image-container">
+                <div class="image" data="{{name}}"></div>
+            </div>
+            <div class="content">
+                <div class="service-name">{{name}}</div>
+                <div class="service-description">{{description}}</div>
+            </div>
+            <div class="service-links">
+                <a class="service-link" target="_blank" href="{{link}}">Connect</a>
+            </div>
+        </div>
+    {{/connect-services}}
+
+    <div class="links">
+        <a href="/connect_another_device">Not now</a>
+    </div>
+</div>

app/images/connect_another_service/notes.png

@@ -0,0 +1,52 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import Cocktail from 'cocktail';
+import BaseView from './base';
+import Template from 'templates/connect_another_service.mustache';
+
+const View = BaseView.extend({
+  className: 'connect-another-service',
+  template: Template,
+
+  setInitialContext (context) {
+    const services = [
+      {
+        description: 'A Secure Notepad App.',
+        image: 'notes',
+        link: 'https://play.google.com/store/apps/details?id=org.mozilla.testpilot.notes&hl=en',
+        name: 'Notes',
+      },
+      {
+        description: 'Save articles, videos and stories from any publication, page or app.',
+        image: 'pocket',
+        link: 'https://getpocket.com/ff_signin?s=pocket&t=login',
+        name: 'Pocket',
+      },
+      {
+        description: 'Take your passwords everywhere with Firefox Lockbox.',
+        image: 'lockbox',
+        link: 'https://itunes.apple.com/us/app/firefox-lockbox/id1314000270?mt=8',
+        name: 'Lockbox',
+      },
+      {
+        description: 'Detects threats against your online accounts.',
+        image: 'monitor',
+        link: 'https://monitor.firefox.com/',
+        name: 'Monitor',
+      }
+    ];
+
+    context.set({
+      'connect-services': services
+    });
+  },
+});
+
+
+Cocktail.mixin(
+  View,
+);
+
+module.exports = View;

app/images/connect_another_service/pocket.png

@@ -94,7 +94,7 @@ define(function(require, exports, module) {
      */
     replaceCurrentPageWithAppsScreen (account, showSuccessMessage) {
       console.log('connect-another-device-mixin::replaceCurrentPageWithAppsScreen');
-      this.replaceCurrentPage('connect_another_app', { account, showSuccessMessage });
+      this.replaceCurrentPage('connect_another_service', { account, showSuccessMessage });
     },
 
     /**

app/scripts/lib/router.js

@@ -1,6 +1,7 @@
 @import '../../node_modules/jquery-modal/jquery.modal';
 @import 'modules/iframe';
 @import 'modules/branding';
+@import 'modules/connect-another-service';
 @import 'modules/tooltip';
 @import 'modules/input-row';
 @import 'modules/select-row';

app/scripts/templates/connect_another_service.mustache

@@ -0,0 +1,62 @@
+.connect-another-service {
+  .connect-service {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 10px;
+
+    .image-container {
+      align-self: center;
+
+      .image {
+        background-image: url('/images/icon-device-laptop.svg');
+        background-repeat: no-repeat;
+        background-size: cover;
+        height: 42px;
+        width: 42px;
+
+        &[data='Lockbox'] {
+          background-image: url('/images/connect_another_service/lockbox.png');
+        }
+
+        &[data='Pocket'] {
+          background-image: url('/images/connect_another_service/pocket.png');
+        }
+
+        &[data='Notes'] {
+          background-image: url('/images/connect_another_service/notes.png');
+        }
+
+        &[data='Monitor'] {
+          background-image: url('/images/connect_another_service/monitor.png');
+        }
+      }
+    }
+
+    .content {
+      align-self: center;
+      line-height: 1.3;
+      margin-left: 10px;
+      margin-right: 10px;
+      text-align: left;
+      width: 80%;
+
+      .service-name {
+        font-size: 18px;
+      }
+
+      .service-description {
+        font-size: 12px;
+      }
+    }
+
+    .service-links {
+      align-self: center;
+      justify-content: flex-end;
+
+      .service-link {
+        color: #008000;
+        font-size: 12px;
+      }
+    }
+  }
+}