Skip to content

Commit

Permalink
fix settings page
Browse files Browse the repository at this point in the history
  • Loading branch information
@zlayine
zlayine committed Oct 1, 2024
1 parent baf414d commit 38cb81f
Show file tree
Hide file tree
Showing 2 changed files with 177 additions and 84 deletions.
7 changes: 1 addition & 6 deletions resources/js/components/pages/Settings.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,7 @@
<div class="mt-4 flow-root">
<LoadingCircle v-if="loading" class="mt-40" :size="44" />
<template v-else>
<div
v-if="!showInitialSetup"
class="flex flex-col mb-6 w-full transition-all rounded-md bg-[#0284c7] p-3 text-white"
>
<div class="flex flex-col mb-6 w-full transition-all rounded-md bg-[#0284c7] p-3 text-white">
<p class="font-bold">Configuring Your Wallet</p>
<p>
To interact with the Enjin Platform, you need a wallet to sign your transactions. You can do
Expand Down Expand Up @@ -104,8 +101,6 @@ const loading = ref(appStore.user || !appStore.hasMultiTenantPackage ? false : t
const confirmModal = ref(false);
const verifyPasswordModal = ref(false);
const tokens = computed(() => appStore.user?.apiTokens);
const showInitialSetup = computed(() => !appStore.hasValidConfig && isMultiTenant.value && !tokens.value?.length);
const isMultiTenant = computed(() => appStore.isMultiTenant);
const logout = async () => {
Expand Down
254 changes: 176 additions & 78 deletions resources/js/components/pages/SettingsWalletDaemon.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,94 +11,184 @@
<div>
<div class="p-6 text-light-content dark:text-dark-content">
<div class="flex flex-col space-y-4">
<p v-if="!walletAccount" class="text-sm">Daemon Wallet is not configured at the moment</p>
<p v-else class="text-sm">Daemon Wallet is configured</p>
<label
v-if="walletAccount"
class="text-light-content dark:text-dark-content bg-light-surface-background dark:bg-dark-surface-background hover:text-white hover:bg-light-surface-brand text-sm rounded-md mr-auto p-2 cursor-pointer transition-all"
name="walletAccount"
disabled
@click="copyText(walletAccount)"
<Transition
enter-active-class="transition ease-out duration-300"
leave-active-class="transition ease-in duration-300"
enter-from-class="transform opacity-0 "
enter-to-class="transform opacity-100"
leave-from-class="transform opacity-100"
leave-to-class="transform opacity-0"
mode="out-in"
>
{{ walletAccount }}
</label>
<template v-if="isMultiTenant">
<p class="text-sm">
To configure a new Daemon wallet, you'll need to create an API token. This token will be
used to authenticate your Daemon wallet with your Platform account.
</p>
<div v-if="tokens.length">
<span class="text-xl mb-4">My API Tokens</span>
<div class="grid grid-cols-1 gap-4">
<div
class="bg-light-surface-background dark:bg-dark-surface-background !bg-opacity-50 p-3 shadow sm:rounded-lg sm:p-4 flex justify-between items-center gr"
v-for="token in tokens"
:key="token.name"
<div v-if="creationFlow" class="flex flex-col space-y-4">
<div class="text-sm">
<span> API Token was successfully created. Token: </span>
<CopyTextIcon
v-if="tokens[0].plainTextToken"
ref="copyIconRef"
class="cursor-pointer inline-flex"
:text="
tokens[0].plainTextToken.substring(
tokens[0].plainTextToken?.indexOf('|') + 1 ?? 0
)
"
>
<div class="flex-1 truncate flex items-center">
<KeyIcon class="w-5 h-5 mr-4 text-green-500" />
<span class="text-light-content-strong dark:text-dark-content-strong mr-4">
{{ token.name }}
</span>
<span class="text-light-content dark:text-dark-content text-sm mt-1 truncate">
<span v-if="!token.plainTextToken">
{{ '*******' }}
</span>
<CopyTextIcon
v-if="token.plainTextToken"
ref="copyIconRef"
class="cursor-pointer flex mr-4"
:text="
token.plainTextToken.substring(
token.plainTextToken?.indexOf('|') + 1 ?? 0
)
"
>
<span class="truncate">
{{
token.plainTextToken?.substring(
token.plainTextToken?.indexOf('|') + 1 ?? 0
)
}}
</span>
</CopyTextIcon>
</span>
</div>
<span class="truncate text-light-content-brand dark:text-dark-content-brand">
{{
tokens[0].plainTextToken?.substring(
tokens[0].plainTextToken?.indexOf('|') + 1 ?? 0
)
}}
</span>
</CopyTextIcon>
</div>
<Transition
enter-active-class="transition ease-out duration-300"
leave-active-class="transition ease-in duration-300"
enter-from-class="transform opacity-0 "
enter-to-class="transform opacity-100"
leave-from-class="transform opacity-100"
leave-to-class="transform opacity-0"
mode="out-in"
>
<div v-if="!walletAccount" class="flex flex-col space-y-4">
<span class="text-sm">
To enable automatic signing of your platform requests, Set up a Daemon wallet
with the API Token above and run it once to complete the setup. We'll notify you
here once the configuration is successful. Detailed configuration instructions
can be found in our
<a
href="https://docs.enjin.io/docs/using-wallet-daemon"
target="_blank"
class="text-light-content-brand dark:text-dark-content-brand"
>
documentation.
</a>
</span>
<LoadingCircle
class="py-2 text-light-content-brand dark:text-dark-content-brand"
:size="28"
/>
<p class="text-sm">
Please configure your Daemon wallet with the above API Token and run it once in
order to complete the configuration.
</p>
<Btn
class="flex-shrink-0"
:dusk="`btn__revoke-api-${token.name}`"
error
@click="confirmRevoke(token.name)"
primary
class="mx-auto"
:loading="loadingUser"
:disabled="loadingUser"
@click="refreshWalletAccount"
>
Revoke
Check wallet account
</Btn>
</div>
</div>
<p v-else class="text-sm">
Setup complete! Daemon Wallet account
<span class="text-light-content-brand dark:text-dark-content-brand">
{{ walletAccount }}
</span>
is now configured with your Enjin Platform account. As long as the Daemon Wallet is
running, it will be used to automatically sign and broadcast all platform requests
to the blockchain.
</p>
</Transition>
</div>
<div class="flex items-end space-x-4 mb-4">
<FormInput
v-if="enableTokenCreate"
class="sm:w-[300px] flex-1 sm:flex-none"
v-model="tokenName"
name="tokenName"
placeholder="Enter token name"
/>
<Btn
dusk="btn__create-api-token"
primary
class="py-2.5 disabled:!bg-primary"
@click="createApiToken"
:disabled="creating"
<div v-else class="flex flex-col space-y-4">
<p v-if="!walletAccount" class="text-sm">Daemon Wallet is not configured at the moment</p>
<p v-else class="text-sm">Daemon Wallet is configured</p>
<label
v-if="walletAccount"
class="text-light-content dark:text-dark-content bg-light-surface-background dark:bg-dark-surface-background hover:text-white hover:bg-light-surface-brand text-sm rounded-md mr-auto p-2 cursor-pointer transition-all"
name="walletAccount"
disabled
@click="copyText(walletAccount)"
>
<div v-if="!creating" class="flex items-center">
<KeyIcon class="w-4 h-4 mr-2 flex-shrink-0" />
<span class="truncate"> Create API Token </span>
{{ walletAccount }}
</label>
<template v-if="!isMultiTenant">
<p class="text-sm">
To configure a new Daemon wallet, you'll need to create an API token. This token
will be used to authenticate your Daemon wallet with your Platform account.
</p>
<div v-if="tokens.length">
<span class="text-xl mb-4">My API Tokens</span>
<div class="grid grid-cols-1 gap-4">
<div
class="bg-light-surface-background dark:bg-dark-surface-background !bg-opacity-50 p-3 shadow sm:rounded-lg sm:p-4 flex justify-between items-center gr"
v-for="token in tokens"
:key="token.name"
>
<div class="flex-1 truncate flex items-center">
<KeyIcon class="w-5 h-5 mr-4 text-green-500" />
<span
class="text-light-content-strong dark:text-dark-content-strong mr-4"
>
{{ token.name }}
</span>
<span
class="text-light-content dark:text-dark-content text-sm mt-1 truncate"
>
<span v-if="!token.plainTextToken">
{{ '*******' }}
</span>
<CopyTextIcon
v-if="token.plainTextToken"
ref="copyIconRef"
class="cursor-pointer flex mr-4"
:text="
token.plainTextToken.substring(
token.plainTextToken?.indexOf('|') + 1 ?? 0
)
"
>
<span class="truncate">
{{
token.plainTextToken?.substring(
token.plainTextToken?.indexOf('|') + 1 ?? 0
)
}}
</span>
</CopyTextIcon>
</span>
</div>
<Btn
class="flex-shrink-0"
:dusk="`btn__revoke-api-${token.name}`"
error
@click="confirmRevoke(token.name)"
>
Revoke
</Btn>
</div>
</div>
</div>
<LoadingCircle v-else class="w-4 h-4 text-white" />
</Btn>
<div class="flex items-end space-x-4 mb-4">
<FormInput
v-if="enableTokenCreate"
class="sm:w-[300px] flex-1 sm:flex-none"
v-model="tokenName"
name="tokenName"
placeholder="Enter token name"
/>
<Btn
dusk="btn__create-api-token"
primary
class="py-2.5 disabled:!bg-primary"
@click="createApiToken"
:disabled="creating"
>
<div v-if="!creating" class="flex items-center">
<KeyIcon class="w-4 h-4 mr-2 flex-shrink-0" />
<span class="truncate"> Create API Token </span>
</div>
<LoadingCircle v-else class="w-4 h-4 text-white" />
</Btn>
</div>
</template>
</div>
</template>
</Transition>
</div>
</div>
</div>
Expand Down Expand Up @@ -135,6 +225,8 @@ const enableTokenCreate = ref(false);
const tokenName = ref();
const confirmModal = ref(false);
const confirmModalName = ref();
const creationFlow = ref(false);
const loadingUser = ref(false);
const tokens = computed(() => appStore.user?.apiTokens ?? []);
Expand Down Expand Up @@ -192,6 +284,12 @@ const copyText = (text: string) => {
snackbar.info({ title: 'Copied to clipboard!' });
};
const refreshWalletAccount = async () => {
loadingUser.value = true;
await appStore.getUser();
loadingUser.value = false;
};
watch(
() => appStore.user,
(userVal) => {
Expand Down

0 comments on commit 38cb81f

Please sign in to comment.