From 612d3511721e3405cc41d2961de768c452cceaf2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Advaita=20K=E1=B9=9B=E1=B9=A3=E1=B9=87a=20D=C4=81sa?=
 <advaita.krishna.das@gmail.com>
Date: Fri, 3 Feb 2023 12:51:03 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20signup=20notification=20looks=20terrible?=
 =?UTF-8?q?=20=F0=9F=99=88=20(#122)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #110
---
 .../components/account/AccountPage.vue        | 22 +++++++++++++++++--
 .../account/email/SignUpViaEmailPage.vue      | 18 +--------------
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/app/settings/components/account/AccountPage.vue b/src/app/settings/components/account/AccountPage.vue
index 0e040074..94fe4f95 100644
--- a/src/app/settings/components/account/AccountPage.vue
+++ b/src/app/settings/components/account/AccountPage.vue
@@ -10,6 +10,13 @@
     </ion-header>
 
     <ion-content class="ion-padding">
+      <div
+        v-if="showVerifyEmail"
+        class="ion-padding alert"
+      >
+        {{ $t('account.confirmEmail') }}
+      </div>
+
       <h1 v-if="isAuthenticated">
         {{ $t('account.welcomeBack') }}
       </h1>
@@ -98,7 +105,7 @@ import {
   IonIcon, modalController
 } from '@ionic/vue'
 import { mail } from 'ionicons/icons'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useAccountStore } from '@/app/settings'
 import { couchDB } from '@/app/Application'
@@ -110,9 +117,10 @@ import SignUpViaEmailPage from './email/SignUpViaEmailPage.vue'
 const inProgress = ref(false)
 
 const account = useAccountStore()
-const { isAuthenticated, syncHost, token, syncTime } = storeToRefs(account)
+const { isAuthenticated, syncHost, token, syncTime, email } = storeToRefs(account)
 const { logOut } = account
 
+const showVerifyEmail = computed(() => email.value && !token.value)
 
 async function openModal(component: any) {
   const modal = await modalController.create({ component })
@@ -138,3 +146,13 @@ async function onRefreshToken() {
   token.value.expires = (await service.refreshToken(token.value)).expires
 }
 </script>
+
+
+<style scoped>
+.alert {
+  color: var(--ion-color-warning-contrast);
+  background-color: var(--ion-color-warning);
+  border: 1px solid var(--ion-color-warning-shade);
+  border-radius: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/app/settings/components/account/email/SignUpViaEmailPage.vue b/src/app/settings/components/account/email/SignUpViaEmailPage.vue
index aa539924..aaeb4f05 100644
--- a/src/app/settings/components/account/email/SignUpViaEmailPage.vue
+++ b/src/app/settings/components/account/email/SignUpViaEmailPage.vue
@@ -15,13 +15,6 @@
     </ion-header>
 
     <ion-content class="ion-padding">
-      <div
-        v-if="showVerifyEmail"
-        class="ion-padding alert"
-      >
-        {{ $t('account.confirmEmail') }}
-      </div>
-
       <ion-list>
         <!-- Name -->
         <ion-item class="ion-no-padding">
@@ -92,26 +85,17 @@ const account = useAccountStore()
 const { name, email, password } = storeToRefs(account)
 
 const inProgress = ref(false)
-const showVerifyEmail = ref(false)
 
 async function onSignUp() {
   inProgress.value = true
   await new AuthService(AUTH_HOST).signUp(
     name.value, email.value, password.value,
   )
+  modalController.dismiss(null, 'ok')
   inProgress.value = false
-  showVerifyEmail.value = true
 }
 
 function cancel() {
   return modalController.dismiss(null, 'cancel')
 }
 </script>
-
-<style scoped>
-.alert {
-  background-color: var(--ion-color-warning);
-  border: 1px solid var(--ion-color-warning-shade);
-  border-radius: 10px;
-}
-</style>
\ No newline at end of file