diff --git a/i18n/en.json b/i18n/en.json index 4ddadf7348..bc52dbd85c 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -912,6 +912,7 @@ "failed_to_load_notifications": "Failed to load notifications", "failed_to_load_people": "Failed to load people", "failed_to_remove_product_key": "Failed to remove product key", + "failed_to_reset_pin_code": "Failed to reset PIN code", "failed_to_stack_assets": "Failed to stack assets", "failed_to_unstack_assets": "Failed to un-stack assets", "failed_to_update_notification_status": "Failed to update notification status", @@ -1056,6 +1057,7 @@ "folder_not_found": "Folder not found", "folders": "Folders", "folders_feature_description": "Browsing the folder view for the photos and videos on the file system", + "forgot_pin_code_question": "Forgot your PIN?", "forward": "Forward", "gcast_enabled": "Google Cast", "gcast_enabled_description": "This feature loads external resources from Google in order to work.", @@ -1599,6 +1601,9 @@ "reset_password": "Reset password", "reset_people_visibility": "Reset people visibility", "reset_pin_code": "Reset PIN code", + "reset_pin_code_description": "If you forgot your PIN code, you can contact the server administrator to reset it", + "reset_pin_code_success": "Successfully reset PIN code", + "reset_pin_code_with_password": "You can always reset your PIN code with your password", "reset_sqlite": "Reset SQLite Database", "reset_sqlite_confirmation": "Are you sure you want to reset the SQLite database? You will need to log out and log in again to resync the data", "reset_sqlite_success": "Successfully reset the SQLite database", diff --git a/web/src/lib/components/user-settings-page/PinCodeChangeForm.svelte b/web/src/lib/components/user-settings-page/PinCodeChangeForm.svelte index 54bcaca38f..8e79a41353 100644 --- a/web/src/lib/components/user-settings-page/PinCodeChangeForm.svelte +++ b/web/src/lib/components/user-settings-page/PinCodeChangeForm.svelte @@ -6,7 +6,7 @@ import PinCodeInput from '$lib/components/user-settings-page/PinCodeInput.svelte'; import { handleError } from '$lib/utils/handle-error'; import { changePinCode } from '@immich/sdk'; - import { Button } from '@immich/ui'; + import { Button, Heading, Text } from '@immich/ui'; import { t } from 'svelte-i18n'; import { fade } from 'svelte/transition'; @@ -16,11 +16,11 @@ let isLoading = $state(false); let canSubmit = $derived(currentPinCode.length === 6 && confirmPinCode.length === 6 && newPinCode === confirmPinCode); - interface Props { - onChanged?: () => void; - } + type Props = { + onForgot: () => void; + }; - let { onChanged }: Props = $props(); + let { onForgot }: Props = $props(); const handleSubmit = async (event: Event) => { event.preventDefault(); @@ -38,8 +38,6 @@ message: $t('pin_code_changed_successfully'), type: NotificationType.Info, }); - - onChanged?.(); } catch (error) { handleError(error, $t('unable_to_change_pin_code')); } finally { @@ -58,12 +56,13 @@
-

{$t('change_pin_code')}

+ {$t('change_pin_code')} - - +
diff --git a/web/src/lib/components/user-settings-page/PinCodeCreateForm.svelte b/web/src/lib/components/user-settings-page/PinCodeCreateForm.svelte index ae07e976b7..16f6d94eb4 100644 --- a/web/src/lib/components/user-settings-page/PinCodeCreateForm.svelte +++ b/web/src/lib/components/user-settings-page/PinCodeCreateForm.svelte @@ -6,7 +6,7 @@ import PinCodeInput from '$lib/components/user-settings-page/PinCodeInput.svelte'; import { handleError } from '$lib/utils/handle-error'; import { setupPinCode } from '@immich/sdk'; - import { Button } from '@immich/ui'; + import { Button, Heading } from '@immich/ui'; import { t } from 'svelte-i18n'; interface Props { @@ -54,10 +54,9 @@
{#if showLabel} -

{$t('setup_pin_code')}

+ {$t('setup_pin_code')} {/if} -
diff --git a/web/src/lib/components/user-settings-page/PinCodeInput.svelte b/web/src/lib/components/user-settings-page/PinCodeInput.svelte index 0a078f9870..c438d8f0b1 100644 --- a/web/src/lib/components/user-settings-page/PinCodeInput.svelte +++ b/web/src/lib/components/user-settings-page/PinCodeInput.svelte @@ -1,4 +1,5 @@ -
+
{#if hasPinCode} -
- +
+
{:else} -
+
(hasPinCode = true)} />
{/if} diff --git a/web/src/lib/modals/PinCodeResetModal.svelte b/web/src/lib/modals/PinCodeResetModal.svelte new file mode 100644 index 0000000000..a776ff7a94 --- /dev/null +++ b/web/src/lib/modals/PinCodeResetModal.svelte @@ -0,0 +1,81 @@ + + + + + + +
{$t('reset_pin_code_description')}
+ {#if passwordLoginEnabled} +
+
+ + + + {$t('reset_pin_code_with_password')} + + +
+ {/if} +
+ +
+ + + {#if passwordLoginEnabled} + + + + + {:else} + + {/if} + +