Skip to content

Commit

Permalink
Merge pull request #245 from cryptomator/redesigned-unlock-success
Browse files Browse the repository at this point in the history 
Redesigned unlock success
  • Loading branch information
@overheadhunter
overheadhunter authored Nov 24, 2023
2 parents 83ec967 + b6fdaff commit bb7b860
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 54 deletions.
34 changes: 18 additions & 16 deletions frontend/src/components/UnlockError.vue
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,24 @@
<template>
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="pt-8 pb-4 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>
<nav class="bg-tertiary2">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 h-16 flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
<div class="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>
</nav>

<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 class="max-w-7xl mx-auto px-4 py-12 sm:px-6 lg:px-8 flex justify-center">
<div class="bg-white px-4 py-5 shadow sm:rounded-lg sm:p-6 text-center sm:w-full sm:max-w-lg">
<div class="flex justify-center mb-3 sm:mb-5">
<img src="/logo.svg" class="h-12" alt="Logo" aria-hidden="true" />
</div>
<h1 class="text-2xl leading-6 font-medium text-gray-900">
Unlock failed
</h1>
<p class="mt-6 text-sm text-gray-500">
Your unlock failed unexpectedly. Please try again.
</p>
</div>
</div>
</template>
</template>
106 changes: 68 additions & 38 deletions frontend/src/components/UnlockSuccess.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<template>
<NavigationBar v-if="me != null" :me="me"/>
<NavigationBar v-if="accountState == AccountState.Ready && browserKeys" :me="me!"/>
<SimpleNavigationBar v-else-if="me" :me="me"/>

<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto px-4 py-12 sm:px-6 lg:px-8 flex justify-center">
<div v-if="me == null">
<div v-if="onFetchError == null">
{{ t('common.loading') }}
Expand All @@ -11,42 +12,53 @@
</div>
</div>

<div v-else>

<div class="mt-8 pb-4 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>
<!-- TODO: localize-->
<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>
<div v-if="deviceState == DeviceState.NoSuchDevice" class="max-w-lg mx-auto text-center text-xl text-primary-l2 sm:max-w-3xl">
<p class="mt-6">
This device is unknown to Cryptomator Hub.
</p>
<p class="mt-3">
Please return to Cryptomator and register your device.
</p>
</div>
<div v-else-if="vaultAccess == VaultAccess.Denied" class="max-w-lg mx-auto text-center text-xl text-primary-l2 sm:max-w-3xl">
<p class="mt-6">
You don't have access to this vault.
</p>
<p class="mt-3">
Please contact the vault owner to add your account to the vault members.
</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 v-else class="bg-white px-4 py-5 shadow sm:rounded-lg sm:p-6 text-center sm:w-full sm:max-w-lg">
<div class="flex justify-center mb-3 sm:mb-5">
<img src="/logo.svg" class="h-12" alt="Logo" aria-hidden="true" />
</div>

<!-- TODO: localize -->

<!-- ACCOUNT SETUP -->
<div v-if="accountState == AccountState.RequiresSetup" class="text-sm text-gray-500">
<h1 class="text-2xl leading-6 font-medium text-gray-900">
Setup Required
</h1>
<p class="my-3">
Complete setting up your account and retrieve your account key.
</p>
<router-link to="/app/setup" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">Complete Setup</router-link>
</div>

<!-- DEVICE SETUP -->
<div v-else-if="deviceState == DeviceState.NoSuchDevice" class="text-sm text-gray-500">
<h1 class="text-2xl leading-6 font-medium text-gray-900">
New Device
</h1>
<p class="my-3">
Please enter your account key in Cryptomator to authorize it.
</p>
<router-link v-if="browserKeys" to="/app/profile" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">View Account Key in my Profile</router-link>
</div>

<!-- NO VAULT ACCESS -->
<div v-else-if="vaultAccess == VaultAccess.Denied" class="text-sm text-gray-500">
<h1 class="text-2xl leading-6 font-medium text-gray-900">
No access to this Vault
</h1>
<p class="mt-2">
Please contact the vault owner to add you as a vault member.
</p>
</div>

<!-- SUCCESS -->
<div v-else class="text-sm text-gray-500">
<h1 class="text-2xl leading-6 font-medium text-gray-900">
Vault unlocked successfully
</h1>
<p class="mt-2">
You may now close this browser tab and return to Cryptomator.
</p>
</div>
</div>
</div>
Expand All @@ -56,8 +68,10 @@
import { ComputedRef, computed, onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import backend, { UserDto, VaultDto } from '../common/backend';
import { BrowserKeys } from '../common/crypto';
import FetchError from './FetchError.vue';
import NavigationBar from './NavigationBar.vue';
import SimpleNavigationBar from './SimpleNavigationBar.vue';
const { t } = useI18n({ useScope: 'global' });
Expand All @@ -66,6 +80,15 @@ const props = defineProps<{
deviceId: string
}>();
const accountState : ComputedRef<AccountState> = computed(() => {
const publicKey = me.value?.publicKey;
if (!publicKey) {
return AccountState.RequiresSetup;
} else {
return AccountState.Ready;
}
});
const deviceState : ComputedRef<DeviceState> = computed(() => {
const foundDevice = me.value?.devices.find(d => d.id === props.deviceId);
if (!foundDevice) {
Expand All @@ -81,6 +104,11 @@ const vaultAccess : ComputedRef<VaultAccess> = computed(() => {
: VaultAccess.Denied;
});
enum AccountState {
RequiresSetup,
Ready
}
enum DeviceState {
NoSuchDevice,
Validated
Expand All @@ -92,6 +120,7 @@ enum VaultAccess {
}
const me = ref<UserDto>();
const browserKeys = ref<boolean>(false);
const accessibleVaults = ref<VaultDto[]>();
const onFetchError = ref<Error | null>();
Expand All @@ -101,6 +130,7 @@ async function fetchData() {
onFetchError.value = null;
try {
me.value = await backend.users.me(true);
browserKeys.value = await BrowserKeys.load(me.value.id) != null;
accessibleVaults.value = await backend.vaults.listAccessible();
} catch (error) {
console.error('Retrieving user information failed.', error);
Expand Down

0 comments on commit bb7b860

Please sign in to comment.