password dictonary UI

src/lib/actions/analytics.ts

@@ -142,6 +142,7 @@ export enum Submit {
     AuthLimitUpdate = 'submit_auth_limit_update',
     AuthStatusUpdate = 'submit_auth_status_update',
     AuthPasswordHistoryUpdate = 'submit_auth_password_history_limit_update',
+    AuthPasswordDictionaryUpdate = 'submit_auth_password_dictionary_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 UpdatePasswordDictionary from './updatePasswordDictionary.svelte';
     import UpdatePasswordHistory from './updatePasswordHistory.svelte';
     import UpdateSessionLength from './updateSessionLength.svelte';
     import UpdateSessionsLimit from './updateSessionsLimit.svelte';
@@ -11,4 +12,5 @@
     <UpdateSessionLength />
     <UpdateSessionsLimit />
     <UpdatePasswordHistory />
+    <UpdatePasswordDictionary />
 </Container>

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

@@ -0,0 +1,68 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { CardGrid, Heading } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, Form, FormList, InputNumber, InputSwitch } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { project } from '../../store';
+
+    const projectId = $project.$id;
+    let passwordDictionary = $project.authPasswordDictionary ?? 0;
+
+    async function updatePasswordDictionary() {
+        try {
+            const path = '/projects/' + projectId + '/auth/password-dictionary';
+            const uri = new URL(sdkForConsole.client.config.endpoint + path);
+            await sdkForConsole.client.call(
+                'patch',
+                uri,
+                {
+                    'content-type': 'application/json'
+                },
+                {
+                    enabled: passwordDictionary
+                }
+            );
+            invalidate(Dependencies.PROJECT);
+            addNotification({
+                type: 'success',
+                message: 'Updated password dictionary check.'
+            });
+            trackEvent(Submit.AuthPasswordDictionaryUpdate);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.AuthPasswordDictionaryUpdate);
+        }
+    }
+</script>
+
+<Form on:submit={updatePasswordDictionary}>
+    <CardGrid>
+        <Heading tag="h2" size="6">Password Dictionary</Heading>
+        <svelte:fragment slot="aside">
+            <FormList>
+                <InputSwitch
+                    bind:value={passwordDictionary}
+                    id="passwordDictionary"
+                    label="Password Dictionary" />
+            </FormList>
+            <p class="text">
+                When enabled it checks the user's password against the dictionary of most commonly
+                used password. It uses <a
+                    class="link"
+                    href="https://github.com/danielmiessler/SecLists/blob/master/Passwords/Common-Credentials/10k-most-common.txt"
+                    >10 K most common passwords</a> list.
+            </p>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={passwordDictionary === $project.passwordDictionary} submit
+                >Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>