Merge pull request #798 from appwrite/mock-phone-numbers

Feat: Mock numbers

src/lib/actions/analytics.ts

@@ -194,6 +194,7 @@ export enum Submit {
     AuthPasswordHistoryUpdate = 'submit_auth_password_history_limit_update',
     AuthPasswordDictionaryUpdate = 'submit_auth_password_dictionary_update',
     AuthPersonalDataCheckUpdate = 'submit_auth_personal_data_check_update',
+    AuthMockNumbersUpdate = 'submit_auth_mock_numbers_update',
     SessionsLengthUpdate = 'submit_sessions_length_update',
     SessionsLimitUpdate = 'submit_sessions_limit_update',
     SessionDelete = 'submit_session_delete',

src/routes/console/project-[project]/auth/security/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { Container } from '$lib/layout';
+    import UpdateMockNumbers from './updateMockNumbers.svelte';
     import UpdatePasswordDictionary from './updatePasswordDictionary.svelte';
     import UpdatePasswordHistory from './updatePasswordHistory.svelte';
     import UpdatePersonalDataCheck from './updatePersonalDataCheck.svelte';
@@ -10,6 +11,7 @@
 
 <Container>
     <UpdateUsersLimit />
+    <UpdateMockNumbers />
     <UpdateSessionLength />
     <UpdateSessionsLimit />
     <UpdatePasswordHistory />

src/routes/console/project-[project]/auth/security/updateMockNumbers.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { CardGrid, Heading } from '$lib/components';
+    import { InputPhone, InputText } from '$lib/elements/forms';
+    import { Button, Form, FormItem, FormItemPart } from '$lib/elements/forms';
+    import { sdk } from '$lib/stores/sdk';
+    import { project } from '../../store';
+    import { addNotification } from '$lib/stores/notifications';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { writable } from 'svelte/store';
+    import Empty from '$lib/components/empty.svelte';
+    import type { Models } from '@appwrite.io/console';
+
+    const numbers = writable<Models.MockNumber[]>($project.authMockNumbers.numbers);
+    let initialNumbers = [];
+    let projectId: string = $project.$id;
+
+    $: initialNumbers = $project.authMockNumbers.numbers.map((num) => ({ ...num }));
+    $: submitDisabled = JSON.stringify($numbers) === JSON.stringify(initialNumbers);
+
+    async function updateMockNumbers() {
+        try {
+            // TODO: fix once SDK is updated
+            //@ts-expect-error $numbers is the wrong type in the SDK
+            await sdk.forConsole.projects.updateMockNumbers(projectId, $numbers);
+            await invalidate(Dependencies.PROJECT);
+            addNotification({
+                type: 'success',
+                message: 'Updated mock phone numbers successfully'
+            });
+            trackEvent(Submit.AuthMockNumbersUpdate);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.AuthMockNumbersUpdate);
+        }
+    }
+
+    function addPhoneNumber(number: Models.MockNumber) {
+        numbers.update((n) => [
+            ...n,
+            {
+                phone: number.phone,
+                otp: number.otp
+            }
+        ]);
+    }
+
+    function deletePhoneNumber(index: number) {
+        numbers.update((n) => {
+            n.splice(index, 1);
+            return n;
+        });
+    }
+</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.
+        </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}
+                                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: ''
+                            })}
+                        disabled={$numbers.length >= 10}>
+                        <span class="icon-plus" aria-hidden="true" />
+                        <span class="text">Add number</span>
+                    </Button>
+                {/if}
+            {:else}
+                <Empty
+                    on:click={() => {
+                        addPhoneNumber({
+                            phone: '',
+                            otp: ''
+                        });
+                    }}>Create a mock phone number</Empty>
+            {/if}
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={submitDisabled} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>