mirror of
https://github.com/immich-app/immich
synced 2025-11-14 17:36:12 +00:00
211451d234
* chore(web): standardize settings labels - spelling out "max" and "min" in full - accordions use title case - labels for settings all use sentence case - remove the "Enable"/"Enabled"/"ENABLED" titles for toggles, in favor of just using the description - change any gray labels to be immich blue, to match the look and feel of the other settings * chore: update user settings toggle, remove unused "enable" strings
81 lines
2.4 KiB
Svelte
81 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import {
|
|
notificationController,
|
|
NotificationType,
|
|
} from '$lib/components/shared-components/notification/notification';
|
|
import { changePassword } from '@immich/sdk';
|
|
import { fade } from 'svelte/transition';
|
|
|
|
import Button from '$lib/components/elements/buttons/button.svelte';
|
|
import type { HttpError } from '@sveltejs/kit';
|
|
import SettingInputField, {
|
|
SettingInputFieldType,
|
|
} from '$lib/components/shared-components/settings/setting-input-field.svelte';
|
|
import { t } from 'svelte-i18n';
|
|
|
|
let password = '';
|
|
let newPassword = '';
|
|
let confirmPassword = '';
|
|
|
|
const handleChangePassword = async () => {
|
|
try {
|
|
await changePassword({ changePasswordDto: { password, newPassword } });
|
|
|
|
notificationController.show({
|
|
message: $t('updated_password'),
|
|
type: NotificationType.Info,
|
|
});
|
|
|
|
password = '';
|
|
newPassword = '';
|
|
confirmPassword = '';
|
|
} catch (error) {
|
|
console.error('Error [user-profile] [changePassword]', error);
|
|
notificationController.show({
|
|
message: (error as HttpError)?.body?.message || $t('errors.unable_to_change_password'),
|
|
type: NotificationType.Error,
|
|
});
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<section class="my-4">
|
|
<div in:fade={{ duration: 500 }}>
|
|
<form autocomplete="off" on:submit|preventDefault>
|
|
<div class="ml-4 mt-4 flex flex-col gap-4">
|
|
<SettingInputField
|
|
inputType={SettingInputFieldType.PASSWORD}
|
|
label={$t('password')}
|
|
bind:value={password}
|
|
required={true}
|
|
passwordAutocomplete="current-password"
|
|
/>
|
|
|
|
<SettingInputField
|
|
inputType={SettingInputFieldType.PASSWORD}
|
|
label={$t('new_password')}
|
|
bind:value={newPassword}
|
|
required={true}
|
|
passwordAutocomplete="new-password"
|
|
/>
|
|
|
|
<SettingInputField
|
|
inputType={SettingInputFieldType.PASSWORD}
|
|
label={$t('confirm_password')}
|
|
bind:value={confirmPassword}
|
|
required={true}
|
|
passwordAutocomplete="new-password"
|
|
/>
|
|
|
|
<div class="flex justify-end">
|
|
<Button
|
|
type="submit"
|
|
size="sm"
|
|
disabled={!(password && newPassword && newPassword === confirmPassword)}
|
|
on:click={() => handleChangePassword()}>{$t('save')}</Button
|
|
>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</section>
|