Merge branch 'main' into copy-audit

.gitignore

@@ -145,5 +145,4 @@ dist
 .stylelintcache
 
 # SvelteKit build / generate output
-.svelte-kit
-
+.svelte-kit

src/lib/components/customId.svelte

@@ -2,13 +2,13 @@
     import { trackEvent } from '$lib/actions/analytics';
     import { InnerModal } from '$lib/components';
     import { InputId } from '$lib/elements/forms';
-
+    import { InputProjectId } from '$lib/elements/forms';
     export let show = false;
     export let name: string;
     export let id: string;
     export let autofocus = true;
     export let fullWidth = false;
-
+    export let isProject = false;
     $: if (!show) {
         id = null;
     }
@@ -29,7 +29,11 @@
     </svelte:fragment>
     <svelte:fragment slot="content">
         <div class="form">
-            <InputId bind:value={id} {autofocus} />
+            {#if isProject}
+                <InputProjectId bind:value={id} {autofocus} />
+            {:else}
+                <InputId bind:value={id} {autofocus} />
+            {/if}
         </div>
     </svelte:fragment>
 </InnerModal>

src/lib/components/status.svelte

@@ -18,5 +18,5 @@
     {#if status}
         <span class="status-icon" />
     {/if}
-    <span class="text"><slot /></span>
+    <span class="text" data-private><slot /></span>
 </div>

src/lib/elements/forms/index.ts

@@ -26,3 +26,4 @@ export { default as InputId } from './inputId.svelte';
 export { default as InputSecret } from './inputSecret.svelte';
 export { default as Helper } from './helper.svelte';
 export { default as Label } from './label.svelte';
+export { default as InputProjectId } from './inputProjectId.svelte';

src/lib/elements/forms/inputCron.svelte

@@ -18,7 +18,7 @@
     let element: HTMLInputElement;
     let error: string;
 
-    const pattern = String.raw`^[^]+\s+[^]+\s+[^]+\s+[^]+\s+[^]+`;
+    const pattern = String.raw`^.*\s+.*\s+.*\s+.*\s+.*`;
 
     onMount(() => {
         if (element && autofocus) {

src/lib/elements/forms/inputProjectId.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { FormItem } from '.';
+    import TextCounter from './textCounter.svelte';
+
+    export let value = '';
+    export let autofocus = true;
+
+    let element: HTMLInputElement;
+    let icon = 'info';
+    const pattern = String.raw`^[a-z0-9][a-z0-9\-]*$`;
+    onMount(() => {
+        if (element && autofocus) {
+            element.focus();
+        }
+    });
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+
+        if (element.validity.patternMismatch) {
+            icon = 'exclamation';
+            return;
+        }
+    };
+
+    $: if (value) {
+        icon = 'info';
+    }
+</script>
+
+<FormItem>
+    <div class="input-text-wrapper">
+        <input
+            id="id"
+            placeholder="Enter ID"
+            maxlength={36}
+            {pattern}
+            autocomplete="off"
+            type="text"
+            class="input-text"
+            bind:value
+            bind:this={element}
+            on:invalid={handleInvalid} />
+        <TextCounter count={value?.length ?? 0} max={36} />
+    </div>
+</FormItem>
+<div
+    class="u-flex u-gap-4 u-margin-block-start-8 u-small"
+    class:u-color-text-warning={icon === 'exclamation'}>
+    <span
+        class:icon-info={icon === 'info'}
+        class:icon-exclamation={icon === 'exclamation'}
+        class="u-cross-center u-line-height-1 u-color-text-gray"
+        aria-hidden="true" />
+    <span class="text u-line-height-1-5">
+        Allowed characters: lowercase alphanumeric and non-leading hyphen
+    </span>
+</div>

src/lib/layout/header.svelte

@@ -133,9 +133,9 @@
                 <button class="user-profile-button" on:click={() => (showDropdown = !showDropdown)}>
                     <AvatarInitials size={40} name={$user.name} />
                     <span class="user-profile-info is-only-desktop">
-                        <span class="name">{$user.name}</span>
+                        <span class="name" data-private>{$user.name}</span>
                         {#if $organization}
-                            <span class="title">{$organization.name}</span>
+                            <span class="title" data-private>{$organization.name}</span>
                         {/if}
                     </span>
                     <span

src/routes/console/account/+page.svelte

@@ -167,7 +167,7 @@
                     <AvatarInitials size={48} name={$user.name} />
                 </svelte:fragment>
                 <svelte:fragment slot="title">
-                    <h6 class="u-bold u-trim-1">{$user.name}</h6>
+                    <h6 class="u-bold u-trim-1" data-private>{$user.name}</h6>
                 </svelte:fragment>
             </BoxAvatar>
         </svelte:fragment>

src/routes/console/onboarding/+page.svelte

@@ -64,7 +64,7 @@
                         </Pill>
                     </div>
                 {:else}
-                    <CustomId bind:show={showCustomId} name="Project" bind:id />
+                    <CustomId bind:show={showCustomId} name="Project" isProject bind:id />
                 {/if}
                 <Button fullWidth submit disabled={name === ''} event="create_project">
                     Create project

src/routes/console/organization-[organization]/createProject.svelte

@@ -56,7 +56,7 @@
                 </Pill>
             </div>
         {:else}
-            <CustomId bind:show={showCustomId} name="Project" bind:id />
+            <CustomId bind:show={showCustomId} name="Project" isProject bind:id />
         {/if}
     </FormList>
     <svelte:fragment slot="footer">

src/routes/console/organization-[organization]/deleteOrganization.svelte

@@ -43,7 +43,7 @@
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <p>
+    <p data-private>
         Are you sure you want to delete <b>{$organization.name}</b>? All projects ({$organization.total})
         and data associated with this organization will be deleted. This action is irreversible.
     </p>

src/routes/console/organization-[organization]/settings/+page.svelte

@@ -76,7 +76,7 @@
                         <AvatarGroup {avatars} total={$members.total} />
                     </svelte:fragment>
                     <svelte:fragment slot="title">
-                        <h6 class="u-bold u-trim-1">{$organization.name}</h6>
+                        <h6 class="u-bold u-trim-1" data-private>{$organization.name}</h6>
                     </svelte:fragment>
                     <p>{$organization.total} members</p>
                 </BoxAvatar>

src/routes/console/project-[project]/auth/user-[user]/updateStatus.svelte

@@ -139,7 +139,8 @@
                     <Button
                         secondary
                         on:click={() => (showVerifcationDropdown = !showVerifcationDropdown)}>
-                        {$user.emailVerification ? 'Unverify' : 'Verify'} account
+                        {$user.emailVerification && $user.phoneVerification ? 'Unverify' : 'Verify'}
+                        account
                     </Button>
                     <svelte:fragment slot="list">
                         <DropListItem icon="mail" on:click={() => updateVerificationEmail()}>

src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte

@@ -85,7 +85,7 @@
 <Container>
     {@const accessedAt = $key.accessedAt ? toLocaleDate($key.accessedAt) : 'never'}
     <CardGrid>
-        <div>
+        <div data-private>
             <Heading tag="h6" size="7">{$key.name}</Heading>
         </div>
         <svelte:fragment slot="aside">
@@ -157,7 +157,7 @@
             <Box>
                 <div class="u-flex u-gap-16">
                     <div class="u-cross-child-center u-line-height-1-5">
-                        <h6 class="u-bold">{$key.name}</h6>
+                        <h6 class="u-bold" data-private>{$key.name}</h6>
                         <p>Last accessed: {accessedAt}</p>
                     </div>
                 </div>

src/routes/console/project-[project]/settings/deleteProject.svelte

@@ -43,7 +43,7 @@
     <svelte:fragment slot="aside">
         <BoxAvatar>
             <svelte:fragment slot="title">
-                <h6 class="u-bold u-trim-1">{$project.name}</h6>
+                <h6 class="u-bold u-trim-1" data-private>{$project.name}</h6>
             </svelte:fragment>
             <p>Last update: {toLocaleDateTime($project.$updatedAt)}</p>
         </BoxAvatar>

src/routes/console/project-[project]/settings/migrations/(import)/step1.svelte

@@ -142,7 +142,7 @@
                     }))} />
             </FormList>
             <p class="u-text-center u-margin-block-start-24">
-                <button class="u-bold" on:click|preventDefault={deauthorizeGoogle}>Sign Out</button>
+                <button class="u-bold" on:click|preventDefault={deauthorizeGoogle}>Sign out</button>
             </p>
         {/if}
     {:else if $provider.provider === 'supabase'}

tests/unit/elements/inputProjectId.test.ts

@@ -0,0 +1,40 @@
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { InputProjectId } from '../../../src/lib/elements/forms';
+
+const validStrings = ['validstring', 'valid-string', 'validstring123', 'valid-'];
+
+const invalidStrings = ['-invalid', 'Valid', '_invalid', 'Valid123', 'valid.string'];
+
+test('shows id input', () => {
+    const { getByPlaceholderText } = render(InputProjectId);
+    const input = getByPlaceholderText('Enter ID');
+
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveAttribute('type', 'text');
+});
+
+test('state', async () => {
+    const { component, getByPlaceholderText } = render(InputProjectId, { value: '' });
+    const input = getByPlaceholderText('Enter ID');
+
+    expect(component.value).toEqual('');
+    await userEvent.type(input, 'lorem');
+    expect(component.value).toEqual('lorem');
+});
+
+validStrings.forEach((validString) => {
+    test(`validates ${validString} as valid`, () => {
+        const { getByPlaceholderText } = render(InputProjectId, { value: validString });
+        const input = getByPlaceholderText('Enter ID') as HTMLInputElement;
+        expect(input.checkValidity()).toBe(true);
+    });
+});
+invalidStrings.forEach((invalidString) => {
+    test(`validates ${invalidString} as invalid`, () => {
+        const { getByPlaceholderText } = render(InputProjectId, { value: invalidString });
+        const input = getByPlaceholderText('Enter ID') as HTMLInputElement;
+        expect(input.checkValidity()).toBe(false);
+    });
+});