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

feat: address review comments

Browse Source
This commit is contained in:
Christy Jacob
2024-07-22 00:52:07 +04:00
parent 5c6768d277
commit dcb885df65
4 changed files with 9658 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+9539
View File
File diff suppressed because it is too large Load Diff
src/routes/(console)/project-[project]/auth/security/mock-numbers-dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

src/routes/(console)/project-[project]/auth/security/mock-numbers-light.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

src/routes/(console)/project-[project]/auth/security/updateMockNumbers.svelte
+119 -59
View File
@@ -8,6 +8,13 @@
import { addNotification } from '$lib/stores/notifications';
import { invalidate } from '$app/navigation';
import { Dependencies } from '$lib/constants';
import { organization } from '$lib/stores/organization';
import { BillingPlan } from '$lib/constants';
import { isCloud } from '$lib/system';
import MockNumbersLight from './mock-numbers-light.png';
import MockNumbersDark from './mock-numbers-dark.png';
import EmptyCardImageCloud from '$lib/components/emptyCardImageCloud.svelte';
import { app } from '$lib/stores/app';
import Empty from '$lib/components/empty.svelte';
import type { Models } from '@appwrite.io/console';
@@ -48,75 +55,128 @@
numbers.splice(index, 1);
numbers = numbers;
}
function generateNumber(): string {
const areaCode = Math.floor(Math.random() * 800) + 200;
const lineNumber = Math.floor(Math.random() * 10000).toString().padStart(4, '0');
return `+1${areaCode}555${lineNumber}`;
}
function generateOTP(): string {
return Math.floor(100000 + Math.random() * 900000) + '';
}
</script>
<Form onSubmit={updateMockNumbers}>
<CardGrid>
<Heading tag="h6" size="7" id="variables">Mock Phone Numbers</Heading>
<p>
Generate <b>fictional</b> numbers to simulate phone verification while testing demo accounts.
A maximum of 10 phone numbers can be generated.
Generate <b>fictional</b> numbers to simulate phone verification when testing demo accounts
for submitting your application to the App Store or Google Play. Learn more
</p>
<svelte:fragment slot="aside">
{#if numbers?.length > 0}
<ul class="form-list">
{#each numbers as number, index}
<FormItem isMultiple>
<InputPhone
id={`key-${index}`}
bind:value={number.phone}
fullWidth
placeholder="Enter Phone Number"
label="Phone Number"
showLabel={index === 0 ? true : false}
minlength={8}
maxlength={16}
required />
<InputText
id={`value-${index}`}
bind:value={number.otp}
fullWidth
placeholder="Enter value"
label="Verification Code"
showLabel={index === 0 ? true : false}
maxlength={6}
required />
<FormItemPart alignEnd>
<Button
text
disabled={numbers.length === 0}
on:click={() => {
deletePhoneNumber(index);
}}>
<span class="icon-x" aria-hidden="true" />
</Button>
</FormItemPart>
</FormItem>
{/each}
</ul>
{#if numbers?.length < 10}
<Button
noMargin
text
on:click={() =>
addPhoneNumber({
phone: '',
otp: ''
})}
<!-- {#if isCloud && $organization?.billingPlan === BillingPlan.FREE}
<EmptyCardImageCloud source="email_signature_card" let:nextTier noAspectRatio>
<svelte:fragment slot="image">
<div class=" is-only-mobile u-width-full-line u-height-100-percent">
{#if $app.themeInUse === 'dark'}
<img
src={MockNumbersDark}
class="u-image-object-fit-cover u-only-dark u-width-full-line u-height-100-percent"
alt="Mock Numbers Example" />
{:else}
<img
src={MockNumbersLight}
class="u-image-object-fit-cover u-only-light u-width-full-line u-height-100-percent"
alt="Mock Numbers Example" />
{/if}
</div>
<div class="is-not-mobile u-width-full-line u-height-100-percent">
{#if $app.themeInUse === 'dark'}
<img
src={MockNumbersDark}
width="266"
height="171"
class="u-image-object-fit-contain u-block u-only-dark u-width-full-line u-height-100-percent"
style:object-position="top"
alt="Mock Numbers Example" />
{:else}
<img
src={MockNumbersLight}
width="266"
height="171"
class="u-image-object-fit-contain u-only-light u-width-full-line u-height-100-percent"
style:object-position="top"
alt="Mock Numbers Example" />
{/if}
</div>
</svelte:fragment>
<svelte:fragment slot="title"
>Upgrade to add mock phone numbers</svelte:fragment>
Upgrade to a {nextTier} to add mock phone numbers to your project.
</EmptyCardImageCloud>
{/if} -->
{#if $organization?.billingPlan !== BillingPlan.FREE}
{#if numbers?.length > 0}
<ul class="form-list">
{#each numbers as number, index}
<FormItem isMultiple>
<InputPhone
id={`key-${index}`}
bind:value={number.phone}
fullWidth
placeholder="Enter Phone Number"
label="Phone Number"
showLabel={index === 0 ? true : false}
minlength={8}
maxlength={16}
required />
<InputText
id={`value-${index}`}
bind:value={number.otp}
fullWidth
placeholder="Enter value"
label="Verification Code"
showLabel={index === 0 ? true : false}
maxlength={6}
required />
<FormItemPart alignEnd>
<Button
text
disabled={numbers.length === 0}
on:click={() => {
deletePhoneNumber(index);
}}>
<span class="icon-x" aria-hidden="true" />
</Button>
</FormItemPart>
</FormItem>
{/each}
</ul>
{#if numbers?.length < 10}
<Button
noMargin
text
on:click={() =>
addPhoneNumber({
phone: generateNumber(),
otp: generateOTP()
})}
disabled={numbers.length >= 10}>
<span class="icon-plus" aria-hidden="true" />
<span class="text">Add number</span>
</Button>
<span class="icon-plus" aria-hidden="true" />
<span class="text">Add number</span>
</Button>
{/if}
{:else}
<Empty
on:click={() => {
addPhoneNumber({
phone: generateNumber(),
otp: generateOTP()
});
}}>Generate number</Empty>
{/if}
{:else}
<Empty
on:click={() => {
addPhoneNumber({
phone: '',
otp: ''
});
}}>Create a mock phone number</Empty>
{/if}
</svelte:fragment>