From c24f9ff1a13cb5b439779347c8db9b85d3c787c4 Mon Sep 17 00:00:00 2001
From: Zouheir Layine <58786497+zlayine@users.noreply.github.com>
Date: Fri, 29 Sep 2023 17:44:58 +0300
Subject: [PATCH] Login fix (#35)

---
 resources/js/components/pages/Settings.vue | 205 +++++++++++----------
 resources/js/store/index.ts                |   5 +-
 2 files changed, 113 insertions(+), 97 deletions(-)

diff --git a/resources/js/components/pages/Settings.vue b/resources/js/components/pages/Settings.vue
index 48fa5b1..ff38913 100644
--- a/resources/js/components/pages/Settings.vue
+++ b/resources/js/components/pages/Settings.vue
@@ -1,105 +1,111 @@
 <template>
     <div class="px-4 pb-2 sm:px-6 lg:px-8 overflow-y-auto transition-all">
         <div class="mt-4 flow-root">
-            <div class="space-y-6">
-                <div v-if="appStore.isMultiTenant" class="flex flex-col space-y-4">
-                    <div class="flex justify-between">
-                        <h1 class="text-xl md:text-2xl">
-                            My API Tokens
-                            <span v-if="enableTokenCreate && !tokens.length" class="text-red-500">&nbsp;*</span>
-                        </h1>
-                    </div>
-                    <div class="flex items-end space-x-4">
-                        <FormInput
-                            v-if="enableTokenCreate"
-                            class="sm:w-[300px] flex-1 sm:flex-none"
-                            v-model="tokenName"
-                            name="tokenName"
-                            placeholder="Enter token name"
-                        />
-                        <Btn primary class="py-2.5" @click="createApiToken">
-                            <KeyIcon class="w-4 h-4 mr-2 flex-shrink-0" />
-                            <span class="truncate"> Create New API Token </span>
-                        </Btn>
-                    </div>
-                    <div
-                        class="bg-white p-3 shadow sm:rounded-lg sm:p-4 flex justify-between items-center"
-                        v-for="token in tokens"
-                        :key="token.name"
-                    >
-                        <div class="flex items-center">
-                            <KeyIcon class="w-5 h-5 mr-4 text-green-500" />
-                            <span class="text-gray-900 mr-4">{{ token.name }}</span>
-                            <span class="text-gray-400 text-sm mt-1">
-                                {{
-                                    token.plainTextToken?.substring(token.plainTextToken?.indexOf('|') + 1 ?? 0) ??
-                                    '*******'
-                                }}
-                                <CopyTextIcon
-                                    v-if="token.plainTextToken"
-                                    :text="token.plainTextToken.substring(token.plainTextToken?.indexOf('|') + 1 ?? 0)"
-                                />
-                            </span>
+            <LoadingCircle class="mt-40" :size="44" v-if="loading" />
+            <template v-else>
+                <div class="space-y-6">
+                    <div v-if="appStore.isMultiTenant" class="flex flex-col space-y-4">
+                        <div class="flex justify-between">
+                            <h1 class="text-xl md:text-2xl">
+                                My API Tokens
+                                <span v-if="enableTokenCreate && !tokens.length" class="text-red-500">&nbsp;*</span>
+                            </h1>
+                        </div>
+                        <div class="flex items-end space-x-4">
+                            <FormInput
+                                v-if="enableTokenCreate"
+                                class="sm:w-[300px] flex-1 sm:flex-none"
+                                v-model="tokenName"
+                                name="tokenName"
+                                placeholder="Enter token name"
+                            />
+                            <Btn primary class="py-2.5" @click="createApiToken">
+                                <KeyIcon class="w-4 h-4 mr-2 flex-shrink-0" />
+                                <span class="truncate"> Create New API Token </span>
+                            </Btn>
+                        </div>
+                        <div
+                            class="bg-white p-3 shadow sm:rounded-lg sm:p-4 flex justify-between items-center"
+                            v-for="token in tokens"
+                            :key="token.name"
+                        >
+                            <div class="flex items-center">
+                                <KeyIcon class="w-5 h-5 mr-4 text-green-500" />
+                                <span class="text-gray-900 mr-4">{{ token.name }}</span>
+                                <span class="text-gray-400 text-sm mt-1">
+                                    {{
+                                        token.plainTextToken?.substring(token.plainTextToken?.indexOf('|') + 1 ?? 0) ??
+                                        '*******'
+                                    }}
+                                    <CopyTextIcon
+                                        v-if="token.plainTextToken"
+                                        :text="
+                                            token.plainTextToken.substring(token.plainTextToken?.indexOf('|') + 1 ?? 0)
+                                        "
+                                    />
+                                </span>
+                            </div>
+                            <Btn error @click="revokeToken(token.name)">Revoke</Btn>
                         </div>
-                        <Btn error @click="revokeToken(token.name)">Revoke</Btn>
                     </div>
-                </div>
-                <div v-if="appStore.isMultiTenant" class="flex flex-col space-y-4">
-                    <div class="">
-                        <h1 class="text-xl md:text-2xl">
-                            Wallet Account
-                            <span v-if="!appStore.loggedIn && !walletAccount" class="text-red-500">&nbsp;*</span>
-                        </h1>
-                        <p class="mt-1 text-sm text-gray-500 max-w-3xl">
-                            The platform depends on there being a funded wallet daemon account setup and connected to
-                            the platform and blockchain so it can receive transactions from the platform, sign them on
-                            your behalf and then broadcast them to the network. You can get the latest version of the
-                            wallet daemon from this repository:
-                            <a href="https://github.com/enjin/wallet-daemon" target="_blank" class="text-primary">
-                                https://github.com/enjin/wallet-daemon</a
-                            >
-                            and an overview can be found here:
-                            <a
-                                href="https://docs.enjin.io/enjin-platform/wallet-daemon"
-                                target="_blank"
-                                class="text-primary"
-                            >
-                                https://docs.enjin.io/enjin-platform/wallet-daemon</a
-                            >
-                        </p>
+                    <div v-if="appStore.isMultiTenant" class="flex flex-col space-y-4">
+                        <div class="">
+                            <h1 class="text-xl md:text-2xl">
+                                Wallet Account
+                                <span v-if="!appStore.loggedIn && !walletAccount" class="text-red-500">&nbsp;*</span>
+                            </h1>
+                            <p class="mt-1 text-sm text-gray-500 max-w-3xl">
+                                The platform depends on there being a funded wallet daemon account setup and connected
+                                to the platform and blockchain so it can receive transactions from the platform, sign
+                                them on your behalf and then broadcast them to the network. You can get the latest
+                                version of the wallet daemon from this repository:
+                                <a href="https://github.com/enjin/wallet-daemon" target="_blank" class="text-primary">
+                                    https://github.com/enjin/wallet-daemon</a
+                                >
+                                and an overview can be found here:
+                                <a
+                                    href="https://docs.enjin.io/enjin-platform/wallet-daemon"
+                                    target="_blank"
+                                    class="text-primary"
+                                >
+                                    https://docs.enjin.io/enjin-platform/wallet-daemon</a
+                                >
+                            </p>
+                        </div>
+                        <div class="flex items-end space-x-4">
+                            <FormInput
+                                v-model="walletAccount"
+                                class="sm:w-[300px] flex-1 sm:flex-none"
+                                :class="!enableAccountModify ? 'text-gray-400' : ''"
+                                name="tokenName"
+                                placeholder="Enter wallet account"
+                                :disabled="!enableAccountModify"
+                            />
+                            <Btn primary class="py-2.5" @click="updateWalletAccount">
+                                <PencilIcon class="w-4 h-4 mr-2" />
+                                <span class="truncate">
+                                    {{ enableAccountModify ? 'Update' : 'Edit' }}
+                                </span>
+                            </Btn>
+                        </div>
                     </div>
-                    <div class="flex items-end space-x-4">
-                        <FormInput
-                            v-model="walletAccount"
-                            class="sm:w-[300px] flex-1 sm:flex-none"
-                            :class="!enableAccountModify ? 'text-gray-400' : ''"
-                            name="tokenName"
-                            placeholder="Enter wallet account"
-                            :disabled="!enableAccountModify"
+
+                    <div class="flex flex-col space-y-4">
+                        <div class="flex justify-between">
+                            <h1 class="text-xl md:text-2xl">Settings</h1>
+                        </div>
+                        <FormCheckbox
+                            v-model="advancedMode"
+                            name="advancedMode"
+                            label="Advanced Mode"
+                            description="Enable advanced mode."
+                            readmore="Advanced mode"
                         />
-                        <Btn primary class="py-2.5" @click="updateWalletAccount">
-                            <PencilIcon class="w-4 h-4 mr-2" />
-                            <span class="truncate">
-                                {{ enableAccountModify ? 'Update' : 'Edit' }}
-                            </span>
-                        </Btn>
-                    </div>
-                </div>
-                <div class="flex flex-col space-y-4">
-                    <div class="flex justify-between">
-                        <h1 class="text-xl md:text-2xl">Settings</h1>
+                        <Btn v-if="appStore.isMultiTenant" class="mr-auto" @click="logout">Logout</Btn>
+                        <Btn v-else class="mr-auto" error @click="resetSettings"> Reset Settings </Btn>
                     </div>
-                    <FormCheckbox
-                        v-model="advancedMode"
-                        name="advancedMode"
-                        label="Advanced Mode"
-                        description="Enable advanced mode."
-                        readmore="Advanced mode"
-                    />
-                    <Btn v-if="appStore.isMultiTenant" class="mr-auto" @click="logout">Logout</Btn>
-                    <Btn v-else class="mr-auto" error @click="resetSettings"> Reset Settings </Btn>
                 </div>
-            </div>
+            </template>
         </div>
     </div>
 </template>
@@ -118,6 +124,7 @@ import CopyTextIcon from '../CopyTextIcon.vue';
 import { PencilIcon } from '@heroicons/vue/20/solid';
 import { AuthApi } from '~/api/auth';
 import { addressToPublicKey, isValidAddress, publicKeyToAddress } from '~/util/address';
+import LoadingCircle from '../LoadingCircle.vue';
 
 const router = useRouter();
 const appStore = useAppStore();
@@ -127,6 +134,7 @@ const tokenName = ref();
 const walletAccount = ref(publicKeyToAddress(appStore.user?.account));
 const enableTokenCreate = ref(false);
 const enableAccountModify = ref(false);
+const loading = ref(true);
 
 const tokens = computed(() => appStore.user?.apiTokens);
 
@@ -221,9 +229,18 @@ watch(
             walletAccount.value = publicKeyToAddress(appStore.user?.account);
         }
 
-        if (!appStore.user.apiTokens.length) {
+        if (!appStore.user?.apiTokens.length) {
             enableTokenCreate.value = true;
         }
     }
 );
+
+watch(
+    () => appStore.user,
+    (userVal) => {
+        if (userVal) {
+            loading.value = false;
+        }
+    }
+);
 </script>
diff --git a/resources/js/store/index.ts b/resources/js/store/index.ts
index 2242e21..501f93e 100644
--- a/resources/js/store/index.ts
+++ b/resources/js/store/index.ts
@@ -122,7 +122,7 @@ export const useAppStore = defineStore('app', {
                 this.config.channel = appConfig.channel;
             }
 
-            if (window.bootstrap.daemon) {
+            if (window.bootstrap?.daemon) {
                 this.config.daemon = window.bootstrap.daemon;
             }
         },
@@ -164,7 +164,6 @@ export const useAppStore = defineStore('app', {
             return true;
         },
         async login(email: string, password: string) {
-            this.loggedIn = true;
             const res = await AuthApi.login(email, password);
             if (!res.data.Login) throw [{ field: 'Login error', message: 'Invalid credentials' }];
 
@@ -173,12 +172,12 @@ export const useAppStore = defineStore('app', {
                 await this.logout();
                 throw [{ field: 'Login error', message: 'Please verify your email address' }];
             }
-
             this.loggedIn = res.data.Login;
 
             return res.data.Login;
         },
         async logout() {
+            this.loggedIn = false;
             await AuthApi.logout();
             this.clearLogin();
         },