beautified unlock-success/error, added some whitespaces to other code…

… for readability, related to #16

frontend/src/common/backend.ts

@@ -30,12 +30,16 @@ export class VaultDto {
   constructor(public id: string, public name: string, public masterkey: string, public iterations: number, public salt: string) { }
 }
 
+export class DeviceDto {
+  constructor(public id: string, public name: string, public publicKey: string, public accessTo: VaultDto[]) { }
+}
+
 export class UserDto {
   constructor(public id: string, public name: string, public pictureUrl: string, public devices: DeviceDto[]) { }
 }
 
-export class DeviceDto {
-  constructor(public id: string, public name: string, public publicKey: string, public accessTo: VaultDto[]) { }
+export class AccessDto {
+  constructor(public device_specific_masterkey: string, public ephemeral_public_key: string) { }
 }
 
 /* Services */
@@ -75,11 +79,6 @@ class VaultService {
     await axiosAuth.delete(`/vaults/${vaultId}/members/${userId}`);
   }
 }
-
-export class AccessDto {
-  constructor(public device_specific_masterkey: string, public ephemeral_public_key: string) { }
-}
-
 class DeviceService {
 
   public async createDevice(deviceId: string, name: string, publicKey: String): Promise<AxiosResponse<any>> {

frontend/src/common/config.ts

@@ -13,6 +13,7 @@ export class ConfigDto {
 }
 
 class ConfigWrapper {
+
   private data: ConfigDto;
   private deferredSetupCompletion: Deferred<void>;
 

frontend/src/common/crypto.ts

@@ -237,4 +237,5 @@ export class Masterkey {
     );
     return new DeviceSpecificMasterkey(base64url.stringify(new Uint8Array(wrapped), { pad: false }), base64url.stringify(new Uint8Array(epk), { pad: false }));
   }
+
 }

frontend/src/common/util.ts

@@ -10,9 +10,11 @@ export function uuid(): string {
 }
 
 export class Deferred<T> {
+
   public promise: Promise<T>;
   public reject: (reason?: any) => void;
   public resolve: (value: T) => void;
+
   constructor() {
     this.reject = (reason) => { };
     this.resolve = (value) => { };
@@ -21,4 +23,5 @@ export class Deferred<T> {
       this.resolve = resolve;
     });
   }
+
 }

frontend/src/components/DeviceList.vue

@@ -13,6 +13,7 @@
         Devices ({{ me.devices.length }})
       </h2>
     </div>
+
     <div class="mt-5 flex flex-col">
       <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
         <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">

frontend/src/components/Login.vue

@@ -4,6 +4,7 @@
       <img src="/logo.svg" class="h-8" alt="Logo"/>
       <span class="font-headline font-bold text-primary ml-2 pb-px">CRYPTOMATOR HUB</span>
     </div>
+
     <div class="relative shadow-xl sm:rounded-2xl sm:overflow-hidden">
       <div class="absolute inset-0">
         <div class="absolute inset-0 bg-gradient-to-r from-primary-l1 to-primary mix-blend-multiply" />

frontend/src/components/SearchInputGroup.vue

@@ -5,6 +5,7 @@
         <UsersIcon v-if="selectedItem == null" class="h-5 w-5 text-gray-400" aria-hidden="true" />
         <img v-else :src="selectedItem.pictureUrl" alt="" class="w-5 h-5 rounded-full" />
       </div>
+
       <Listbox v-model="selectedItem" as="div" class="w-full">
         <ListboxButton class="w-full" @focus="searchInput?.focus()">
           <input id="searchInput" ref="searchInput" v-model="searchTerm" v-focus :disabled="selectedItem != null" type="text" name="searchInput" autocomplete="off" class="focus:ring-primary focus:border-primary block w-full rounded-none rounded-l-md pl-10 sm:text-sm border-gray-300 disabled:bg-primary-l2" placeholder="John Doe" @focus="searchInputFocus = true" @blur="onSearchInputBlur()" />
@@ -22,10 +23,12 @@
           </ListboxOptions>
         </div>
       </Listbox>
+
       <button v-if="selectedItem != null" type="button" class="absolute inset-y-0 right-0 pr-3 flex items-center" @click="reset()">
         <XCircleIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
       </button>
     </div>
+
     <button ref="actionButton" :disabled="selectedItem == null" type="button" class="-ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-transparent text-sm font-medium rounded-r-md text-white bg-primary hover:bg-primary-d1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary focus:border-primary disabled:opacity-50 disabled:hover:bg-primary disabled:cursor-not-allowed" @click="onAction()">
       {{ actionTitle }}
     </button>

frontend/src/components/Settings.vue

@@ -4,6 +4,7 @@
       Settings
     </h2>
   </div>
+
   <div class="mt-5">
     <select v-model="$i18n.locale" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md">
       <option v-for="(lang, i) in languages" :key="`Lang${i}`" :value="lang">

frontend/src/components/UnlockError.vue

@@ -1,3 +1,22 @@
 <template>
-  <h1>Unlock failed</h1>
+  <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+    <div class="pt-8 pb-4 flex-shrink-0 flex items-center">
+      <img src="/logo.svg" class="h-8" alt="Logo"/>
+      <span class="font-headline font-bold text-primary ml-2 pb-px">CRYPTOMATOR HUB</span>
+    </div>
+
+    <div class="relative shadow-xl sm:rounded-2xl sm:overflow-hidden">
+      <div class="absolute inset-0">
+        <div class="absolute inset-0 bg-gradient-to-r from-primary-l1 to-primary mix-blend-multiply" />
+      </div>
+      <div class="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8">
+        <h1 class="text-center text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl text-white">
+          Unlock failed
+        </h1>
+        <p class="mt-6 max-w-lg mx-auto text-center text-xl text-primary-l2 sm:max-w-3xl">
+          Your unlock failed unexpectedly. Please try again.
+        </p>
+      </div>
+    </div>
+  </div>
 </template>

frontend/src/components/UnlockSuccess.vue

@@ -1,19 +1,59 @@
 <template>
-  <h1 v-if="me != null" class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">Welcome Back, {{ me.name }}!</h1>
-  <p>You have access to this vault on the following devices:</p>
-  <ul v-if="me != null" class="list-disc list-inside p-2">
-    <li v-for="(device) in me.devices" :key="device.id">{{ device.name }}</li>
-  </ul>
-  <p class="mt-4">You can now close this page and return to your device.</p>
+  <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+    <div v-if="me == null">
+      Loading…
+    </div>
+
+    <div v-else>
+      <div class="pt-8 pb-4 flex-shrink-0 flex items-center">
+        <img src="/logo.svg" class="h-8" alt="Logo"/>
+        <span class="font-headline font-bold text-primary ml-2 pb-px">CRYPTOMATOR HUB</span>
+      </div>
+
+      <div class="relative shadow-xl sm:rounded-2xl sm:overflow-hidden">
+        <div class="absolute inset-0">
+          <div class="absolute inset-0 bg-gradient-to-r from-primary-l1 to-primary mix-blend-multiply" />
+        </div>
+        <div class="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8">
+          <h1 class="text-center text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl text-white">
+            Welcome back, {{ me.name }}!
+          </h1>
+          <!-- TODO: can we figure out if the _current_ device is on the device list? -->
+          <div v-if="me.devices.length == 0" class="max-w-lg mx-auto text-center text-xl text-primary-l2 sm:max-w-3xl">
+            <p class="mt-6">
+              You have no registered devices.
+            </p>
+            <p class="mt-3">
+              Please return to Cryptomator and register your device.
+            </p>
+          </div>
+
+          <div v-else class="max-w-lg mx-auto text-center text-xl text-primary-l2 sm:max-w-3xl">
+            <p class="mt-6">
+              Your unlock was successful.
+            </p>
+            <p class="mt-3">
+              You can now close this page and continue using Cryptomator.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import backend, { UserDto } from '../common/backend';
 
-const me = ref<UserDto | null>(null);
+const me = ref<UserDto>();
 
 onMounted(async () => {
-  me.value = await backend.users.me(true);
+  try {
+    me.value = await backend.users.me(true, true);
+  } catch (error) {
+    // TODO: error handling
+    console.error('Retrieving user information failed.', error);
+  }
 });
 </script>

frontend/src/components/VaultList.vue

@@ -27,6 +27,7 @@
         </router-link>
       </div>
     </div>
+
     <div class="mt-5 bg-white shadow overflow-hidden sm:rounded-md">
       <ul role="list" class="divide-y divide-gray-200">
         <li v-for="vault in vaults" :key="vault.masterkey">