Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(auth): hide MFA methods and recovery if MFA is disabled

Browse Source
This commit is contained in:
Steven Nguyen
2024-05-16 11:11:58 -07:00
parent 95096ea264
commit be527f8c19
1 changed files with 74 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/console/account/updateMfa.svelte
+74 -71
View File
@@ -95,99 +95,102 @@
href="https://appwrite.io/docs/products/auth/mfa">Learn more.</Button>
</p>
</div>
<div class="u-flex-vertical u-gap-16">
<div class="u-sep-block-end" style="padding-block-end: 8px;">
<EyebrowHeading tag="h6" size={3} class="u-normal">Methods</EyebrowHeading>
</div>
<div
class="method u-flex u-flex-vertical-mobile u-gap-16 u-main-space-between u-sep-block-end"
style="padding-block-end: 16px">
<div class="u-flex u-gap-8">
<div class="avatar is-size-x-small">
<span class="icon-device-mobile" aria-hidden="true" />
</div>
<div class="u-flex-vertical u-gap-4 body-text-2">
<span class="u-bold">Authenticator app</span>
<span
>Use an authentication app to generate two-factor authentication
codes.</span>
</div>
{#if $user.mfa}
<div class="u-flex-vertical u-gap-16">
<div class="u-sep-block-end" style="padding-block-end: 8px;">
<EyebrowHeading tag="h6" size={3} class="u-normal">Methods</EyebrowHeading>
</div>
<div class="method-button">
{#if $factors.totp}
<Button text secondary on:click={() => (showDelete = true)}
>Delete</Button>
{:else}
<Button secondary on:click={() => (showSetup = true)}>Add</Button>
{/if}
</div>
</div>
{#if $factors.email}
<div
class="u-flex u-main-space-between u-sep-block-end"
class="method u-flex u-flex-vertical-mobile u-gap-16 u-main-space-between u-sep-block-end"
style="padding-block-end: 16px">
<div class="u-flex u-gap-8">
<div class="avatar is-size-x-small">
<span class="icon-mail" aria-hidden="true" />
<span class="icon-device-mobile" aria-hidden="true" />
</div>
<div class="u-flex-vertical u-gap-4 body-text-2">
<span class="u-bold">Email verification</span>
<span>One-time codes will be sent to: {$user.email}</span>
<span class="u-bold">Authenticator app</span>
<span
>Use an authentication app to generate two-factor authentication
codes.</span>
</div>
</div>
<div class="method-button">
{#if $factors.totp}
<Button text on:click={() => (showDelete = true)}>Delete</Button>
{:else}
<Button secondary on:click={() => (showSetup = true)}>Add</Button>
{/if}
</div>
</div>
{/if}
{#if $factors.phone}
{#if $factors.email}
<div
class="u-flex u-main-space-between u-sep-block-end"
style="padding-block-end: 16px">
<div class="u-flex u-gap-8">
<div class="avatar is-size-x-small">
<span class="icon-mail" aria-hidden="true" />
</div>
<div class="u-flex-vertical u-gap-4 body-text-2">
<span class="u-bold">Email verification</span>
<span>One-time codes will be sent to: {$user.email}</span>
</div>
</div>
</div>
{/if}
{#if $factors.phone}
<div
class="u-flex u-main-space-between u-sep-block-end"
style="padding-block-end: 16px">
<div class="u-flex u-gap-8">
<div class="avatar is-size-x-small">
<span class="icon-send" aria-hidden="true" />
</div>
<div class="u-flex-vertical u-gap-4 body-text-2">
<span class="u-bold">SMS verification</span>
<span>One-time codes will be sent to: {$user.phone}</span>
</div>
</div>
</div>
{/if}
</div>
<div class="u-flex-vertical u-gap-16">
<div class="u-sep-block-end" style="padding-block-end: 8px;">
<EyebrowHeading tag="h6" size={3} class="u-normal">Recovery</EyebrowHeading>
</div>
<div
class="u-flex u-main-space-between u-sep-block-end"
class="method u-flex u-flex-vertical-mobile u-gap-16 u-main-space-between u-sep-block-end"
style="padding-block-end: 16px">
<div class="u-flex u-gap-8">
<div class="avatar is-size-x-small">
<span class="icon-send" aria-hidden="true" />
<span class="icon-lock-open" aria-hidden="true" />
</div>
<div class="u-flex-vertical u-gap-4 body-text-2">
<span class="u-bold">SMS verification</span>
<span>One-time codes will be sent to: {$user.phone}</span>
<span class="u-bold">Recovery codes</span>
<span
>Use in case you can't receive two-factor authentication codes.</span>
</div>
</div>
</div>
{/if}
</div>
<div class="u-flex-vertical u-gap-16">
<div class="u-sep-block-end" style="padding-block-end: 8px;">
<EyebrowHeading tag="h6" size={3} class="u-normal">Recovery</EyebrowHeading>
</div>
<div
class="method u-flex u-flex-vertical-mobile u-gap-16 u-main-space-between u-sep-block-end"
style="padding-block-end: 16px">
<div class="u-flex u-gap-8">
<div class="avatar is-size-x-small">
<span class="icon-lock-open" aria-hidden="true" />
</div>
<div class="u-flex-vertical u-gap-4 body-text-2">
<span class="u-bold">Recovery codes</span>
<span
>Use in case you can't receive two-factor authentication codes.</span>
<div class="method-button">
{#if $factors.recoveryCode}
<Button
class="method-button"
text
secondary
on:click={() => (showRegenerateRecoveryCodes = true)}
>Regenerate</Button>
{:else}
<Button
class="method-button"
secondary
on:click={createRecoveryCodes}>View</Button>
{/if}
</div>
</div>
<div class="method-button">
{#if $factors.recoveryCode}
<Button
class="method-button"
text
secondary
on:click={() => (showRegenerateRecoveryCodes = true)}
>Regenerate</Button>
{:else}
<Button class="method-button" secondary on:click={createRecoveryCodes}
>View</Button>
{/if}
</div>
</div>
</div>
{/if}
</div>
</svelte:fragment>
</CardGrid>