Add random password generation for new users

- Move GenerateRandomPassword to auth package for reuse
- Make password optional in user creation (generates 16-char if empty)
- Return generated password in response for user to copy
- Add Generate/Copy UI with show/hide toggle
This commit is contained in:
Christoph Haas 2026-03-29 14:52:59 +02:00
parent 7cdc561dcc
commit 8b2d2649ac
4 changed files with 80 additions and 20 deletions

View file

@ -14,6 +14,8 @@
let localPart = $state('');
let newUser = $state({ password: '', quota: 0 });
let createError = $state('');
let createdPassword = $state('');
let showCreatedPassword = $state(false);
let domainName = $state('');
async function loadUsers(name: string) {
@ -35,6 +37,8 @@
function openModal() {
createError = '';
createdPassword = '';
showCreatedPassword = false;
localPart = '';
newUser = { password: '', quota: 0 };
dialogEl?.showModal();
@ -44,6 +48,17 @@
dialogEl?.close();
}
function generatePassword() {
const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*';
let password = '';
const array = new Uint8Array(16);
crypto.getRandomValues(array);
for (let i = 0; i < 16; i++) {
password += chars[array[i] % chars.length];
}
newUser.password = password;
}
async function createUser() {
createError = '';
const email = `${localPart}@${domainName}`;
@ -55,14 +70,15 @@
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`
},
body: JSON.stringify({ email, password: newUser.password, quota: newUser.quota })
body: JSON.stringify({ email, password: newUser.password || undefined, quota: newUser.quota })
});
const data = await res.json();
if (res.ok) {
closeModal();
createdPassword = data.password || '';
showCreatedPassword = true;
await loadUsers(domainName);
} else {
const error = await res.json();
createError = error.error || 'Failed to create user';
createError = data.error || 'Failed to create user';
}
} catch (e) {
createError = 'Failed to create user';
@ -70,6 +86,10 @@
}
}
async function copyPassword() {
await navigator.clipboard.writeText(createdPassword);
}
async function deleteUser(id: number) {
if (!confirm('Delete this user? Mailbox will NOT be deleted.')) return;
try {
@ -191,13 +211,20 @@
</div>
</fieldset>
<fieldset class="fieldset mt-4">
<legend class="fieldset-legend">Password</legend>
<input
type="password"
class="input input-bordered w-full"
bind:value={newUser.password}
required
/>
<legend class="fieldset-legend">Password (leave empty to generate)</legend>
<div class="join w-full">
<input
type={showCreatedPassword ? 'text' : 'password'}
class="input input-bordered join-item flex-1"
bind:value={newUser.password}
/>
<button type="button" class="btn join-item" onclick={() => showCreatedPassword = !showCreatedPassword}>
{showCreatedPassword ? '🙈' : '👁️'}
</button>
<button type="button" class="btn btn-secondary join-item" onclick={generatePassword}>
Generate
</button>
</div>
</fieldset>
<fieldset class="fieldset mt-4">
<legend class="fieldset-legend">Quota (bytes, 0 = default)</legend>
@ -208,14 +235,27 @@
min="0"
/>
</fieldset>
{#if showCreatedPassword && createdPassword}
<div class="alert alert-success mt-4">
<div class="flex-1">
<label class="text-sm font-medium">User created! Copy password:</label>
<div class="flex items-center gap-2 mt-1">
<code class="flex-1 bg-base-200 p-2 rounded text-sm break-all">{createdPassword}</code>
<button type="button" class="btn btn-sm" onclick={copyPassword}>
Copy
</button>
</div>
</div>
</div>
{/if}
{#if createError}
<div class="alert alert-error mt-4">
<span>{createError}</span>
</div>
{/if}
<div class="modal-action">
<button type="button" class="btn" onclick={closeModal}>Cancel</button>
<button type="submit" class="btn btn-primary">Create</button>
<button type="button" class="btn" onclick={closeModal}>Close</button>
<button type="submit" class="btn btn-primary" disabled={showCreatedPassword}>Create</button>
</div>
</form>
</div>