mirror of
https://github.com/immich-app/immich.git
synced 2024-12-26 10:50:29 +02:00
feat(web): randomize password on reest (#7943)
* feat(web): randomize password on reest * prettier * chore: clean up --------- Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
This commit is contained in:
Sam Holton
GitHub
parent
ab4b8eca15
commit
cda45f9bfb
@ -8,8 +8,9 @@
|
||||
export let color: Color = 'transparent-gray';
|
||||
export let disabled = false;
|
||||
export let fullwidth = false;
|
||||
export let title: string | undefined = undefined;
|
||||
</script>
|
||||
|
||||
<Button size="link" {color} shadow={false} rounded="lg" {disabled} on:click {fullwidth}>
|
||||
<Button {title} size="link" {color} shadow={false} rounded="lg" {disabled} on:click {fullwidth}>
|
||||
<slot />
|
||||
</Button>
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
|
||||
export let user: UserResponseDto;
|
||||
export let canResetPassword = true;
|
||||
export let newPassword: string;
|
||||
|
||||
let error: string;
|
||||
let success: string;
|
||||
@ -53,12 +54,12 @@
|
||||
|
||||
const resetPassword = async () => {
|
||||
try {
|
||||
const defaultPassword = 'password';
|
||||
newPassword = generatePassword();
|
||||
|
||||
await updateUser({
|
||||
updateUserDto: {
|
||||
id: user.id,
|
||||
password: defaultPassword,
|
||||
password: newPassword,
|
||||
shouldChangePassword: true,
|
||||
},
|
||||
});
|
||||
@ -70,6 +71,23 @@
|
||||
isShowResetPasswordConfirmation = false;
|
||||
}
|
||||
};
|
||||
|
||||
// TODO move password reset server-side
|
||||
function generatePassword(length: number = 16) {
|
||||
let generatedPassword = '';
|
||||
|
||||
const characterSet = '0123456789' + 'abcdefghijklmnopqrstuvwxyz' + 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' + ',.-{}+!#$%/()=?';
|
||||
|
||||
for (let i = 0; i < length; i++) {
|
||||
let randomNumber = crypto.getRandomValues(new Uint32Array(1))[0];
|
||||
randomNumber = randomNumber / 2 ** 32;
|
||||
randomNumber = Math.floor(randomNumber * characterSet.length);
|
||||
|
||||
generatedPassword += characterSet[randomNumber];
|
||||
}
|
||||
|
||||
return generatedPassword;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
|
||||
import DeleteConfirmDialog from '$lib/components/admin-page/delete-confirm-dialoge.svelte';
|
||||
import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
|
||||
import RestoreDialogue from '$lib/components/admin-page/restore-dialoge.svelte';
|
||||
import Button from '$lib/components/elements/buttons/button.svelte';
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
@ -17,8 +19,9 @@
|
||||
import { user } from '$lib/stores/user.store';
|
||||
import { websocketEvents } from '$lib/stores/websocket';
|
||||
import { asByteUnitString } from '$lib/utils/byte-units';
|
||||
import { copyToClipboard } from '$lib/utils';
|
||||
import { UserStatus, getAllUsers, type UserResponseDto } from '@immich/sdk';
|
||||
import { mdiClose, mdiDeleteRestore, mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';
|
||||
import { mdiClose, mdiContentCopy, mdiDeleteRestore, mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';
|
||||
import { DateTime } from 'luxon';
|
||||
import { onMount } from 'svelte';
|
||||
import type { PageData } from './$types';
|
||||
@ -28,10 +31,11 @@
|
||||
let allUsers: UserResponseDto[] = [];
|
||||
let shouldShowEditUserForm = false;
|
||||
let shouldShowCreateUserForm = false;
|
||||
let shouldShowInfoPanel = false;
|
||||
let shouldShowPasswordResetSuccess = false;
|
||||
let shouldShowDeleteConfirmDialog = false;
|
||||
let shouldShowRestoreDialog = false;
|
||||
let selectedUser: UserResponseDto;
|
||||
let newPassword: string;
|
||||
|
||||
const refresh = async () => {
|
||||
allUsers = await getAllUsers({ isAll: false });
|
||||
@ -84,7 +88,7 @@
|
||||
const onEditPasswordSuccess = async () => {
|
||||
await refresh();
|
||||
shouldShowEditUserForm = false;
|
||||
shouldShowInfoPanel = true;
|
||||
shouldShowPasswordResetSuccess = true;
|
||||
};
|
||||
|
||||
const deleteUserHandler = (user: UserResponseDto) => {
|
||||
@ -121,6 +125,7 @@
|
||||
<FullScreenModal onClose={() => (shouldShowEditUserForm = false)}>
|
||||
<EditUserForm
|
||||
user={selectedUser}
|
||||
bind:newPassword
|
||||
canResetPassword={selectedUser?.id !== $user.id}
|
||||
on:editSuccess={onEditUserSuccess}
|
||||
on:resetPasswordSuccess={onEditPasswordSuccess}
|
||||
@ -147,29 +152,40 @@
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if shouldShowInfoPanel}
|
||||
<FullScreenModal onClose={() => (shouldShowInfoPanel = false)}>
|
||||
<div
|
||||
class="w-[500px] max-w-[95vw] rounded-3xl bg-immich-bg p-8 text-immich-fg shadow-sm dark:bg-immich-dark-gray dark:text-immich-dark-fg"
|
||||
{#if shouldShowPasswordResetSuccess}
|
||||
<FullScreenModal onClose={() => (shouldShowPasswordResetSuccess = false)}>
|
||||
<ConfirmDialogue
|
||||
title="Password Reset Success"
|
||||
confirmText="Done"
|
||||
onConfirm={() => (shouldShowPasswordResetSuccess = false)}
|
||||
onClose={() => (shouldShowPasswordResetSuccess = false)}
|
||||
hideCancelButton={true}
|
||||
confirmColor="green"
|
||||
>
|
||||
<h1 class="mb-4 text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">
|
||||
Password reset success
|
||||
</h1>
|
||||
<svelte:fragment slot="prompt">
|
||||
<div class="flex flex-col gap-4">
|
||||
<p>The user's password has been reset:</p>
|
||||
|
||||
<div class="flex justify-center gap-2">
|
||||
<code
|
||||
class="rounded-md bg-gray-200 px-2 py-1 font-bold text-immich-primary dark:text-immich-dark-primary dark:bg-gray-700"
|
||||
>
|
||||
{newPassword}
|
||||
</code>
|
||||
<LinkButton on:click={() => copyToClipboard(newPassword)} title="Copy password">
|
||||
<div class="flex place-items-center gap-2 text-sm">
|
||||
<Icon path={mdiContentCopy} size="18" />
|
||||
</div>
|
||||
</LinkButton>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
The user's password has been reset to the default <code
|
||||
class="rounded-md bg-gray-200 px-2 py-1 font-bold text-immich-primary dark:text-immich-dark-primary dark:bg-gray-700"
|
||||
>password</code
|
||||
>
|
||||
<br />
|
||||
<br />
|
||||
Please inform the user, and they will need to change the password at the next log-on.
|
||||
Please provide the temporary password to the user and inform them they will need to change the
|
||||
password at their next login.
|
||||
</p>
|
||||
|
||||
<div class="mt-6 flex w-full">
|
||||
<Button fullwidth on:click={() => (shouldShowInfoPanel = false)}>Done</Button>
|
||||
</div>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
</ConfirmDialogue>
|
||||
</FullScreenModal>
|
||||
{/if}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user