implemented creation of new user

This commit is contained in:
2025-07-08 21:09:56 +02:00
parent 92c6b154ea
commit 5dc7c22b03
8 changed files with 174 additions and 117 deletions

View File

@@ -5,6 +5,7 @@
import { Router, Route } from 'svelte-tiny-router';
import Callback from "./routes/user/OidcCallback.svelte";
import EditService from "./routes/user/EditService.svelte";
import EditUser from "./routes/user/EditUser.svelte";
import Footer from "./Components/Footer.svelte";
import Login from "./Components/Login.svelte";
import Messages from "./routes/message/Messages.svelte";
@@ -12,7 +13,6 @@
import ResetPw from "./routes/user/ResetPw.svelte";
import Search from "./routes/search/Search.svelte";
import User from "./routes/user/User.svelte";
import UserEdit from "./routes/user/Edit.svelte";
let translations_ready = $state(false);
onMount(async () => {
@@ -37,8 +37,9 @@
<Route path="/message/settings" component={Messages} />
<Route path="/search" component={Search} />
<Route path="/user" component={User} />
<Route path="/user/create" component={EditUser} />
<Route path="/user/login" component={User} />
<Route path="/user/:user_id/edit" component={UserEdit} />
<Route path="/user/:user_id/edit" component={EditUser} />
<Route path="/user/oidc/add" component={EditService} />
<Route path="/user/oidc/edit/:serviceName" component={EditService} />
<Route component={User} />

View File

@@ -1,108 +0,0 @@
<script>
import { t } from '../../translations.svelte.js';
import { useTinyRouter } from 'svelte-tiny-router';
import { onMount } from 'svelte';
import { checkUser } from '../../user.svelte.js';
const router = useTinyRouter();
let { user_id } = $props();
let editUser = $state(null);
let options = $state([]);
let sent = $state(false);
let caption = $state(t('user.save_user'));
let message = $state(t('user.loading_data'));
onMount(async () => {
let url = `${location.protocol}//${location.host.replace('5173','8080')}/themes.json`;
let resp = await fetch(url);
if (resp.ok){
const arr = await resp.json();
for (let entry of arr){
const value = entry.value;
const caption = entry.caption ? entry.caption : value;
options.push({caption:caption,value:value})
}
}
url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/${user_id}`;
resp = await fetch(url,{credentials:'include'});
if (resp.ok) {
editUser = await resp.json();
} else {
message = await resp.text();
if (message == "") message = t(resp);
}
});
async function save(elem){
sent = true;
caption = t('user.data_sent');
let url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/${user_id}`;
let resp = await fetch(url,{
method: 'PATCH',
credentials: 'include',
body: JSON.stringify(editUser)
});
if (resp.ok){
caption = t('user.saved');
checkUser();
router.navigate('/user');
} else {
caption = t('user.failed');
}
}
</script>
<fieldset>
<legend>{t('user.editing',user_id)}</legend>
{#if editUser}
<table>
<tbody>
<tr>
<th>{t('user.id')}</th>
<td>{editUser.id}</td>
</tr>
<tr>
<th>{t('user.name')}</th>
<td>
<input type="text" bind:value={editUser.name} />
</td>
</tr>
<tr>
<th>{t('user.email')}</th>
<td>
<input type="text" bind:value={editUser.email} />
</td>
</tr>
<tr>
<th>{t('user.language')}</th>
<td>
<input type="text" bind:value={editUser.language} />
</td>
</tr>
<tr>
<th>{t('user.password')}</th>
<td>
<input type="password" bind:value={editUser.password} />
</td>
</tr>
<tr>
<th>{t('user.theme')}</th>
<td>
<select bind:value={editUser.theme}>
{#each options as entry,i}
<option value={entry.value}>{entry.caption}</option>
{/each}
</select>
</td>
</tr>
</tbody>
</table>
<button onclick={save} disabled={sent}>{caption}</button>
{:else}
{message}
{/if}
</fieldset>

View File

@@ -0,0 +1,125 @@
<script>
import { t } from '../../translations.svelte.js';
import { useTinyRouter } from 'svelte-tiny-router';
import { onMount } from 'svelte';
import { checkUser } from '../../user.svelte.js';
const router = useTinyRouter();
let { user_id } = $props();
let editUser = $state(null);
let options = $state([]);
let sent = $state(false);
let caption = $state(t('user.save_user'));
let message = $state(t('user.loading_data'));
onMount(async () => {
let url = `${location.protocol}//${location.host.replace('5173','8080')}/themes.json`;
let resp = await fetch(url);
if (resp.ok){
const arr = await resp.json();
for (let entry of arr){
const value = entry.value;
const caption = entry.caption ? entry.caption : value;
options.push({caption:caption,value:value})
}
}
if (user_id) {
url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/${user_id}`;
resp = await fetch(url,{credentials:'include'});
if (resp.ok) {
editUser = await resp.json();
} else {
message = await resp.text();
if (message == "") message = t(resp);
}
} else {
editUser = {}
}
});
async function save(ev){
ev.preventDefault();
sent = true;
caption = t('user.data_sent');
let method = 'PATCH';
let url = null;
if (user_id) {
url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/${user_id}`;
} else {
url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/create`;
method = 'POST';
}
let resp = await fetch(url,{
method: method,
credentials: 'include',
body: JSON.stringify(editUser)
});
if (resp.ok){
caption = t('user.saved');
checkUser();
router.navigate('/user');
} else {
caption = t('user.failed');
sent = false;
}
}
</script>
<fieldset>
<legend>{t('user.editing',user_id?user_id:'')}</legend>
{#if editUser}
<form onsubmit={save}>
<table>
<tbody>
{#if editUser.id}
<tr>
<th>{t('user.id')}</th>
<td>{editUser.id}</td>
</tr>
{/if}
<tr>
<th>{t('user.name')}</th>
<td>
<input type="text" bind:value={editUser.name} />
</td>
</tr>
<tr>
<th>{t('user.email')}</th>
<td>
<input type="text" bind:value={editUser.email} />
</td>
</tr>
<tr>
<th>{t('user.language')}</th>
<td>
<input type="text" bind:value={editUser.language} />
</td>
</tr>
<tr>
<th>{t('user.password')}</th>
<td>
<input type="password" bind:value={editUser.password} />
</td>
</tr>
<tr>
<th>{t('user.theme')}</th>
<td>
<select bind:value={editUser.theme}>
{#each options as entry,i}
<option value={entry.value}>{entry.caption}</option>
{/each}
</select>
</td>
</tr>
</tbody>
</table>
<button type="submit" disabled={sent}>{caption}</button>
</form>
{:else}
{message}
{/if}
</fieldset>

View File

@@ -28,10 +28,16 @@
for (let key of Object.keys(json)) user[key] = json[key];
}
}
</script>
<fieldset tabindex="0">
<legend>{t('user.list')}</legend>
<legend>
{t('user.list')}
{#if user.permissions.includes('CREATE_USERS')}
<button onclick={() => router.navigate('/user/create')}>{t('user.create_new')}</button>
{/if}
</legend>
<table>
<thead>
<tr>