feat: initial commit

src/lib/actions/analytics.ts

@@ -183,6 +183,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/lib/sdk/auth.ts

@@ -0,0 +1,35 @@
+import type { Client, Models } from '@appwrite.io/console';
+
+export type MockNumber = {
+    phone: string;
+    otp: string;
+};
+
+export type Project = Models.Project & {
+    authMockNumbers: MockNumber[];
+};
+
+export class Auth {
+    client: Client;
+
+    constructor(client: Client) {
+        this.client = client;
+    }
+
+    async updateMockNumbers(projectId: string, numbers: MockNumber[]): Promise<Project> {
+        const path = `/projects/${projectId}/auth/mock-numbers`;
+        const params = {
+            projectId,
+            numbers: numbers
+        };
+        const uri = new URL(this.client.config.endpoint + path);
+        return await this.client.call(
+            'patch',
+            uri,
+            {
+                'content-type': 'application/json'
+            },
+            params
+        );
+    }
+}

src/lib/stores/sdk.ts

@@ -21,6 +21,7 @@ import {
     Vcs
 } from '@appwrite.io/console';
 import { Billing } from '../sdk/billing';
+import { Auth } from '$lib/sdk/auth';
 
 const endpoint = VARS.APPWRITE_ENDPOINT ?? `${globalThis?.location?.origin}/v1`;
 
@@ -65,6 +66,7 @@ export const sdk = {
         health: new Health(clientConsole),
         locale: new Locale(clientConsole),
         projects: new Projects(clientConsole),
+        auth: new Auth(clientConsole),
         teams: new Teams(clientConsole),
         users: new Users(clientConsole),
         migrations: new Migrations(clientConsole),

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,166 @@
+<script lang="ts">
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { CardGrid, Heading, Alert } from '$lib/components';
+    import { FormList, InputPhone, InputText } from '$lib/elements/forms';
+    import Output from '$lib/components/output.svelte';
+    import Button from '$lib/elements/forms/button.svelte';
+    import {
+        TableBody,
+        TableCell,
+        TableCellHead,
+        TableHeader,
+        TableRow
+    } from '$lib/elements/table';
+    import Table from '$lib/elements/table/table.svelte';
+    import { symmetricDifference } from '$lib/helpers/array';
+    import type { MockNumber } from '$lib/sdk/auth';
+    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 { onMount } from 'svelte';
+
+    let projectId: string = $project.$id;
+    let numbers = writable<MockNumber[]>($project.authMockNumbers);
+
+    let isMockNumbersDisabled = true;
+    let phoneNumber: string = null;
+    let otp: string = null;
+
+    onMount(async () => {
+        console.log($numbers)
+    });
+
+    async function updateMockNumbers() {
+        numbers.update((n) => [
+            ...n,
+            {
+                phone: phoneNumber,
+                otp: otp
+            }
+        ]);
+        phoneNumber = null;
+        otp = null;
+
+        console.log($numbers);
+        try {
+            await sdk.forConsole.auth.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);
+        }
+    }
+
+    // const addPhoneNumber = () => {
+    //     numbers.update((n) => [
+    //         ...n,
+    //         {
+    //             phone: phoneNumber,
+    //             otp: otp
+    //         }
+    //     ]);
+    //     phoneNumber = null;
+    //     otp = null;
+    // };
+
+    const deletePhoneNumber = (number: MockNumber) => {
+        numbers.update((n) => n.filter((num) => num.phone !== number.phone));
+
+        console.log($numbers);
+    };
+
+    $: if (numbers && symmetricDifference($numbers, $project.authMockNumbers).length) {
+        isMockNumbersDisabled = false;
+    } else isMockNumbersDisabled = true;
+
+    $: if (phoneNumber && otp) {
+        isMockNumbersDisabled = false;
+    } else isMockNumbersDisabled = true;
+</script>
+
+<CardGrid>
+    <Heading tag="h6" size="7" id="variables">Mock Phone Numbers</Heading>
+    <p>
+        Create upto 10 mock phone numbers and verification codes for testing. These numbers
+        can be used to simulate the phone number verification without sending an SMS.
+    </p>
+
+    <svelte:fragment slot="aside">
+        <Alert dismissible={false} type="info">
+            <svelte:fragment slot="title">Use Mock phone numbers with caution</svelte:fragment>
+            Please use fictious phone numbers and verification codes to avoid affecting real user accounts.
+        </Alert>
+
+        <FormList>
+            <ul class="form-list is-multiple">
+                <InputPhone
+                    id="phone-number"
+                    label="Phone Number"
+                    placeholder="+1 650-555-1234"
+                    autocomplete={false}
+                    bind:value={phoneNumber} />
+
+                <InputText
+                    id="otp"
+                    label="Verification Code"
+                    bind:value={otp}
+                    maxlength={6}
+                    placeholder="123456" />
+            </ul>
+        </FormList>
+
+        {#if $numbers.length > 0}
+            <Table noMargin noStyles>
+                <TableHeader>
+                    <TableCellHead width={180}>Phone Number</TableCellHead>
+                    <TableCellHead width={180}>Verification Code</TableCellHead>
+                    <TableCellHead width={40} />
+                </TableHeader>
+                <TableBody>
+                    {#each $numbers as number, i}
+                        <TableRow>
+                            <TableCell title="Phone">
+                                <Output value={number.phone} hideCopyIcon>
+                                    {number.phone}
+                                </Output>
+                            </TableCell>
+
+                            <TableCell showOverflow title="Verification Code">
+                                <Output value={number.otp.toString()} hideCopyIcon>
+                                    {number.otp}
+                                </Output>
+                            </TableCell>
+
+                            <TableCell title="Remove" width={40}>
+                                <div class="u-flex">
+                                    <button
+                                        class="button is-text is-only-icon"
+                                        type="button"
+                                        aria-label="delete"
+                                        on:click={() => deletePhoneNumber(number)}>
+                                        <span class="icon-x" aria-hidden="true" />
+                                    </button>
+                                </div>
+                            </TableCell>
+                        </TableRow>
+                    {/each}
+                </TableBody>
+            </Table>
+        {/if}
+    </svelte:fragment>
+
+    <svelte:fragment slot="actions">
+        <Button disabled={isMockNumbersDisabled} on:click={updateMockNumbers}>Update</Button>
+    </svelte:fragment>
+</CardGrid>

src/routes/console/project-[project]/store.ts

@@ -1,11 +1,11 @@
 import { page } from '$app/stores';
-import type { Models } from '@appwrite.io/console';
+import type { Project } from '$lib/sdk/auth';
 import type { BarSeriesOption } from 'echarts/charts';
 import { derived, writable } from 'svelte/store';
 
 export const project = derived(
     page,
-    ($page) => $page.data.project as Models.Project & { region?: string }
+    ($page) => $page.data.project as Project & { region?: string }
 );
 export const onboarding = derived(
     project,