minor style tweaks and refresh token fixes

Co-authored-by: timvisee <tim@visee.me>

app/ui/modal.js

@@ -6,7 +6,7 @@ module.exports = function(state, emit) {
       class="absolute inset-0 flex items-center justify-center overflow-hidden z-40 bg-white md:rounded-xl md:my-8 dark:bg-grey-90"
     >
       <div
-        class="h-full w-full max-h-screen absolute top-0 flex items-center justify-center"
+        class="h-full w-full max-h-screen absolute top-0 flex justify-center md:items-center"
       >
         <div class="w-full">
           ${state.modal(state, emit, close)}

app/ui/signupDialog.js

@@ -1,16 +1,15 @@
 const html = require('choo/html');
 const assets = require('../../common/assets');
-const { bytes, platform } = require('../utils');
+const { bytes } = require('../utils');
 const { canceledSignup, submittedSignup } = require('../metrics');
 
 module.exports = function(trigger) {
   return function(state, emit, close) {
     const DAYS = Math.floor(state.LIMITS.MAX_EXPIRE_SECONDS / 86400);
-    const hidden = platform() === 'android' ? 'hidden' : '';
     let submitting = false;
     return html`
       <send-signup-dialog
-        class="flex flex-col lg:flex-row justify-center px-8 md:px-24 w-full h-full"
+        class="flex flex-col lg:flex-row justify-center my-16 md:my-0 px-8 md:px-24 w-full h-full"
       >
         <img src="${assets.get('master-logo.svg')}" class="h-16 mt-1 mb-4" />
         <section
@@ -32,7 +31,6 @@ module.exports = function(trigger) {
               ${state.translate('accountBenefitTimeLimit', { count: DAYS })}
             </li>
             <li>${state.translate('accountBenefitSync')}</li>
-            <li>${state.translate('accountBenefitMoz')}</li>
           </ul>
         </section>
         <section
@@ -42,7 +40,7 @@ module.exports = function(trigger) {
             <input
               id="email-input"
               type="email"
-              class="${hidden} border rounded-lg w-full px-2 py-1 h-12 mb-3 text-lg text-grey-70 leading-loose dark:bg-grey-80 dark:text-white"
+              class="hidden lg:block border rounded-lg w-full px-2 py-1 h-12 mb-3 text-lg text-grey-70 leading-loose dark:bg-grey-80 dark:text-white"
               placeholder=${state.translate('emailPlaceholder')}
             />
             <input

app/user.js

@@ -219,12 +219,17 @@ export default class User {
           refresh_token: this.refreshToken
         })
       });
-      const auth = await tokenResponse.json();
+      if (tokenResponse.ok) {
-      this.info.access_token = auth.access_token;
+        const auth = await tokenResponse.json();
-      return true;
+        const info = { ...this.info, access_token: auth.access_token };
+        this.info = info;
+        return true;
+      }
     } catch (e) {
-      return false;
+      console.error(e);
     }
+    await this.logout();
+    return false;
   }
 
   async logout() {
@@ -268,29 +273,24 @@ export default class User {
     const key = b64ToArray(this.info.fileListKey);
     const sha = await crypto.subtle.digest('SHA-256', key);
     const kid = arrayToB64(new Uint8Array(sha)).substring(0, 16);
-    async function retry(e) {
+    const retry = async () => {
-      if (e.message === '401') {
+      const refreshed = await this.refresh();
-        const refreshed = await this.refresh();
+      if (refreshed) {
-        if (refreshed) {
+        return await this.syncFileList();
-          return await this.syncFileList();
+      } else {
-        } else {
+        return { incoming: true };
-          await this.logout();
-          return { incoming: true };
-        }
       }
-    }
+    };
     try {
-      const encrypted = await getFileList(
+      const encrypted = await getFileList(this.bearerToken, kid);
-        this.bearerToken,
-        this.refreshToken,
-        kid
-      );
       const decrypted = await streamToArrayBuffer(
         decryptStream(blobStream(encrypted), key)
       );
       list = JSON.parse(textDecoder.decode(decrypted));
     } catch (e) {
-      return retry(e);
+      if (e.message === '401') {
+        return retry(e);
+      }
     }
     changes = await this.storage.merge(list);
     if (!changes.outgoing) {
@@ -303,9 +303,11 @@ export default class User {
       const encrypted = await streamToArrayBuffer(
         encryptStream(blobStream(blob), key)
       );
-      await setFileList(this.bearerToken, this.refreshToken, kid, encrypted);
+      await setFileList(this.bearerToken, kid, encrypted);
     } catch (e) {
-      return retry(e);
+      if (e.message === '401') {
+        return retry(e);
+      }
     }
     return changes;
   }