Ana/3313 add link for linux users to ledger connection issues article (…

…#3315) * add linux webusb message. center signin button * add linux test but it errors. lint * changelog * fix linux message test
luniehq · Dec 17, 2019 · 44583ca · 44583ca
1 parent cf4d7b7
commit 44583ca
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 0 deletions.
diff --git a/changes/ana_3313-add-link-for-linux-users-to-ledger-connection-issues-article b/changes/ana_3313-add-link-for-linux-users-to-ledger-connection-issues-article
@@ -0,0 +1 @@
+[Changed] [#3313](https://github.com/cosmos/lunie/issues/3313) Now when Linux users go to sign in with Ledger they get a warning message with a link to the Ledger documentation to fix connection issues @Bitcoinera
diff --git a/src/components/common/TmSessionHardware.vue b/src/components/common/TmSessionHardware.vue
@@ -34,6 +34,25 @@
               <br />
             </template>
           </template>
+          <template v-else-if="isLinux">
+            Since we switched to WebUSB Linux users may experience connection
+            issues with their devices.
+            <br />
+            <br />
+            Please visit the following site to learn more about how to fix them:
+            <div
+              v-clipboard:copy="linuxLedgerConnectionLink"
+              v-clipboard:success="() => onCopy()"
+              class="copy-feature-link"
+            >
+              {{ linuxLedgerConnectionLink }}
+              <i class="material-icons copied" :class="{ active: copySuccess }">
+                check
+              </i>
+            </div>
+            <br />
+            <br />
+          </template>
           <template v-else-if="status === `connect` || status === `detect`">
             <p>
               Please plug in your Ledger&nbsp;Nano and open the Cosmos Ledger
@@ -82,6 +101,7 @@ export default {
     address: null,
     copySuccess: false,
     hidFeatureLink: `chrome://flags/#enable-experimental-web-platform-features`,
+    linuxLedgerConnectionLink: `https://support.ledger.com/hc/en-us/articles/360019301813-Fix-USB-issues`,
     navigator: window.navigator
   }),
   computed: {
@@ -95,6 +115,9 @@ export default {
     isWindows() {
       return this.navigator.platform.indexOf("Win") > -1
     },
+    isLinux() {
+      return this.navigator.platform.indexOf("Lin") > -1
+    },
     hasHIDEnabled() {
       return !!this.navigator.hid
     },
@@ -199,4 +222,9 @@ export default {
 .copy-feature-link .copied.active {
   opacity: 1;
 }
+
+.session-main .button {
+  margin: 0 auto;
+  display: block;
+}
 </style>
diff --git a/tests/unit/specs/components/common/TmSessionHardware.spec.js b/tests/unit/specs/components/common/TmSessionHardware.spec.js
@@ -8,6 +8,7 @@ localVue.use(Vuex)
 localVue.use(Vuelidate)
 localVue.directive(`tooltip`, () => {})
 localVue.directive(`focus`, () => {})
+localVue.directive('clipboard', () => {})
 
 describe(`TmSessionHardware`, () => {
   let wrapper, store
@@ -117,6 +118,20 @@ describe(`TmSessionHardware`, () => {
       )
     })
 
+    it(`does show the instructions to fix connection issues for Linux users`, () => {
+      wrapper.setData({
+        navigator: {
+          platform: "Linux i686",
+          userAgent: "Chrome"
+        }
+      })
+
+      expect(wrapper.html()).toMatchSnapshot()
+      expect(wrapper.html()).toContain(
+        "Since we switched to WebUSB Linux users may experience connection"
+      )
+    })
+
     describe(`onCopy`, () => {
       it(`should set and reset copySuccess`, () => {
         jest.useFakeTimers()

diff --git a/tests/unit/specs/components/common/__snapshots__/TmSessionHardware.spec.js.snap b/tests/unit/specs/components/common/__snapshots__/TmSessionHardware.spec.js.snap
@@ -337,3 +337,39 @@ exports[`TmSessionHardware sign in does show the instructions to enable HID on W
     </button> <a class="user-box"><i class="material-icons">close</i></a></div>
 </div>
 `;
+
+exports[`TmSessionHardware sign in does show the instructions to fix connection issues for Linux users 1`] = `
+<div class="session-frame" name="component-fade" mode="out-in">
+  <router-link-stub to="/"><img src="~assets/images/lunie-logo-white.svg" class="session-logo"></router-link-stub>
+  <div class="session-outer-container">
+    <div class="session"><a><i class="material-icons circle back">arrow_back</i></a>
+      <h2 class="session-title">
+        Use my Ledger Nano
+      </h2>
+      <div class="session-main">
+        <div class="tm-hardware-state">
+          <div class="tm-hardware-state-content">
+            <!---->
+            <div class="tm-hardware-state__label">
+              Since we switched to WebUSB Linux users may experience connection
+              issues with their devices.
+              <br> <br>
+              Please visit the following site to learn more about how to fix them:
+              <div class="copy-feature-link">
+                https://support.ledger.com/hc/en-us/articles/360019301813-Fix-USB-issues
+                <i class="material-icons copied">
+                  check
+                </i></div> <br> <br>
+              <!----> <button class="button">
+                Sign In
+              </button></div> <img src="~assets/images/loader.svg" alt="a small spinning circle to display loading" style="display: none;">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="session-close"><button class="button session-close-button" color="secondary">
+      Back to Lunie
+    </button> <a class="user-box"><i class="material-icons">close</i></a></div>
+</div>
+`;