Add "Create User" button to admin dashboard

backend/LexBoxApi/Controllers/UserController.cs

@@ -67,6 +67,7 @@ public async Task<ActionResult<LexAuthUser>> RegisterAccount(RegisterAccountInpu
 
         var jwtUser = _loggedInContext.MaybeUser;
         var emailVerified = jwtUser?.Email == accountInput.Email;
+        var createdByAdmin = jwtUser?.IsAdmin ?? false;
 
         var salt = Convert.ToHexString(RandomNumberGenerator.GetBytes(SHA1.HashSizeInBytes));
         var userEntity = new User
@@ -80,20 +81,24 @@ public async Task<ActionResult<LexAuthUser>> RegisterAccount(RegisterAccountInpu
             PasswordStrength = UserService.ClampPasswordStrength(accountInput.PasswordStrength),
             IsAdmin = false,
             EmailVerified = emailVerified,
+            CreatedById = createdByAdmin ? jwtUser?.Id : null,
             Locked = false,
             CanCreateProjects = false
         };
         registerActivity?.AddTag("app.user.id", userEntity.Id);
         _lexBoxDbContext.Users.Add(userEntity);
-        if (jwtUser is not null && jwtUser.Projects.Length > 0)
+        if (jwtUser is not null && !createdByAdmin && jwtUser.Projects.Length > 0)
         {
             userEntity.Projects = jwtUser.Projects.Select(p => new ProjectUsers { Role = p.Role, ProjectId = p.ProjectId }).ToList();
         }
         await _lexBoxDbContext.SaveChangesAsync();
 
         var user = new LexAuthUser(userEntity);
-        await HttpContext.SignInAsync(user.GetPrincipal("Registration"),
-            new AuthenticationProperties { IsPersistent = true });
+        if (accountInput.AutoLogin)
+        {
+            await HttpContext.SignInAsync(user.GetPrincipal("Registration"),
+                new AuthenticationProperties { IsPersistent = true });
+        }
 
         if (!emailVerified) await _emailService.SendVerifyAddressEmail(userEntity);
         return Ok(user);

backend/LexBoxApi/Models/RegisterAccountInput.cs

@@ -7,4 +7,5 @@ public record RegisterAccountInput([Required(AllowEmptyStrings = false)] string
     [Required(AllowEmptyStrings = false)] string Locale,
     [Required(AllowEmptyStrings = false)] string PasswordHash,
     int? PasswordStrength,
-    string TurnstileToken);
+    string TurnstileToken,
+    bool AutoLogin = true);

frontend/src/lib/components/Users/CreateUser.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import PasswordStrengthMeter from '$lib/components/PasswordStrengthMeter.svelte';
+  import { SubmitButton, FormError, Input, ProtectedForm, lexSuperForm, passwordFormRules, DisplayLanguageSelect } from '$lib/forms';
+  import t, { getLanguageCodeFromNavigator, locale } from '$lib/i18n';
+  import { register } from '$lib/user';
+  import { getSearchParamValues } from '$lib/util/query-params';
+  import { onMount } from 'svelte';
+  import { z } from 'zod';
+
+  export let autoLogin = true;
+  export let onSubmit: (() => void) | undefined = undefined;
+  export let submitButtonText = $t('register.button_register');
+
+  type RegisterPageQueryParams = {
+    name: string;
+    email: string;
+  };
+  let turnstileToken = '';
+  // $locale is the locale that our i18n is using for them (i.e. the best available option we have for them)
+  // getLanguageCodeFromNavigator() gives us the language/locale they probably actually want. Maybe we'll support it in the future.
+  const userLocale = getLanguageCodeFromNavigator() ?? $locale;
+  const formSchema = z.object({
+    name: z.string().trim().min(1, $t('register.name_missing')),
+    email: z.string().email($t('form.invalid_email')),
+    password: passwordFormRules($t),
+    score: z.number(),
+    locale: z.string().trim().min(2).default(userLocale),
+  });
+
+  let { form, errors, message, enhance, submitting } = lexSuperForm(formSchema, async () => {
+    const { user, error } = await register($form.password, $form.score, $form.name, $form.email, $form.locale, turnstileToken, autoLogin);
+    if (error) {
+      if (error.turnstile) {
+        $message = $t('turnstile.invalid');
+      }
+      if (error.accountExists) {
+        $errors.email = [$t('register.account_exists')];
+      }
+      return;
+    }
+    if (user) {
+      if (onSubmit) onSubmit();
+      if (autoLogin) await goto('/home', { invalidateAll: true }); // invalidate so we get the user from the server
+      return;
+    }
+    throw new Error('Unknown error, no error from server, but also no user.');
+  });
+  onMount(() => { // query params not available during SSR
+    const urlValues = getSearchParamValues<RegisterPageQueryParams>();
+    form.update((form) => {
+      if (urlValues.name) form.name = urlValues.name;
+      if (urlValues.email) form.email = urlValues.email;
+      return form;
+    }, { taint: true });
+  });
+</script>
+
+<ProtectedForm {enhance} bind:turnstileToken>
+  <Input autofocus id="name" label={$t('register.label_name')} bind:value={$form.name} error={$errors.name} />
+  <div class="contents email">
+    <Input
+      id="email"
+      label={$t('register.label_email')}
+      description={$t('register.description_email')}
+      type="email"
+      bind:value={$form.email}
+      error={$errors.email}
+    />
+  </div>
+  <Input
+    id="password"
+    label={$t('register.label_password')}
+    type="password"
+    bind:value={$form.password}
+    error={$errors.password}
+    autocomplete="new-password"
+  />
+  <PasswordStrengthMeter bind:score={$form.score} password={$form.password} />
+  <DisplayLanguageSelect
+    bind:value={$form.locale}
+  />
+  <FormError error={$message} />
+  <SubmitButton loading={$submitting}>{submitButtonText}</SubmitButton>
+</ProtectedForm>
+
+<style lang="postcss">
+  .email :global(.description) {
+    @apply text-success;
+  }
+</style>

frontend/src/lib/components/Users/CreateUserModal.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Modal } from '$lib/components/modals';
+  import t from '$lib/i18n';
+  import { helpLinks } from '$lib/components/help';
+  import CreateUser from '$lib/components/Users/CreateUser.svelte';
+  import Markdown from 'svelte-exmarkdown';
+  import { NewTabLinkRenderer } from '$lib/components/Markdown';
+
+  let createUserModal: Modal;
+
+  export async function open(): Promise<void> {
+    await createUserModal.openModal(true, true);
+  }
+</script>
+
+<Modal bind:this={createUserModal} bottom>
+  <Markdown md={$t('admin_dashboard.create_user_modal.help_create_single_guest_user', helpLinks)} plugins={[{ renderer: { a: NewTabLinkRenderer } }]} />
+  <Markdown md={$t('admin_dashboard.create_user_modal.help_create_bulk_guest_users', helpLinks)} plugins={[{ renderer: { a: NewTabLinkRenderer } }]} />
+  <h1 class="text-center text-xl">{$t('admin_dashboard.create_user_modal.create_user')}</h1>
+  <CreateUser autoLogin={false} onSubmit={() => createUserModal.submitModal()} submitButtonText={$t('admin_dashboard.create_user_modal.create_user')} />
+</Modal>

frontend/src/lib/i18n/locales/en.json

@@ -39,6 +39,11 @@
         }
       }
     },
+    "create_user_modal": {
+      "create_user": "Create User",
+      "help_create_single_guest_user": "Did you know you can also [create users on a project page]({addProjectMember})? That also allows you to make those users members of the project in one step; users created here will not be members of any project and will need a second step to add them to a project.",
+      "help_create_bulk_guest_users": "If you want to create multiple users at once, the best way is probably to use the [Bulk Add/Create Project Members]({bulkAddCreate}) tool.",
+    },
     "user_details_modal": {
       "registered": "Registered",
       "locked": "Locked",

frontend/src/lib/user.ts

@@ -82,7 +82,7 @@ export async function login(userId: string, password: string): Promise<LoginResu
 }
 
 type RegisterResponse = { error?: { turnstile: boolean, accountExists: boolean }, user?: LexAuthUser };
-export async function register(password: string, passwordStrength: number, name: string, email: string, locale: string, turnstileToken: string): Promise<RegisterResponse> {
+export async function register(password: string, passwordStrength: number, name: string, email: string, locale: string, turnstileToken: string, autoLogin: boolean): Promise<RegisterResponse> {
   const response = await fetch('/api/User/registerAccount', {
     method: 'post',
     headers: {
@@ -94,6 +94,7 @@ export async function register(password: string, passwordStrength: number, name:
       locale,
       turnstileToken,
       passwordStrength,
+      autoLogin,
       passwordHash: await hash(password),
     })
   });

frontend/src/routes/(authenticated)/admin/+page.svelte

@@ -21,8 +21,8 @@
   import { Button } from '$lib/forms';
   import { PageBreadcrumb } from '$lib/layout';
   import AdminTabs, { type AdminTabId } from './AdminTabs.svelte';
+  import CreateUserModal from '$lib/components/Users/CreateUserModal.svelte';
   import type { Confidentiality } from '$lib/components/Projects';
-  import { helpLinks } from '$lib/components/help';
 
   export let data: PageData;
   $: projects = data.projects;
@@ -70,6 +70,7 @@
   }
 
   let userModal: UserModal;
+  let createUserModal: CreateUserModal;
   let deleteUserModal: DeleteUserModal;
   let formModal: EditUserAccount;
 
@@ -125,15 +126,13 @@
               </Badge>
             </div>
           </div>
-          <a class="btn btn-sm btn-success btn-outline max-xs:btn-square group"
-            href={helpLinks.bulkAddCreate}
-            target="_blank" rel="external">
+          <button class="btn btn-sm btn-success max-xs:btn-square"
+            on:click={() => createUserModal.open()}>
             <span class="admin-tabs:hidden">
-              {$t('admin_dashboard.how_to_create_users')}
+              {$t('admin_dashboard.create_user_modal.create_user')}
             </span>
-            <span class="i-mdi-plus text-2xl group-hover:i-mdi-open-in-new" />
-          </a>
-        </div>
+            <span class="i-mdi-plus text-2xl" />
+          </button>        </div>
       </AdminTabs>
       <div class="mt-4">
         <FilterBar
@@ -246,4 +245,5 @@
   <EditUserAccount bind:this={formModal} {deleteUser} currUser={data.user} />
   <DeleteUserModal bind:this={deleteUserModal} i18nScope="admin_dashboard.form_modal.delete_user" />
   <UserModal bind:this={userModal}/>
+  <CreateUserModal bind:this={createUserModal}/>
 </main>

frontend/src/routes/(unauthenticated)/register/+page.svelte

@@ -1,89 +1,9 @@
 <script lang="ts">
-  import { goto } from '$app/navigation';
-  import PasswordStrengthMeter from '$lib/components/PasswordStrengthMeter.svelte';
-  import { SubmitButton, FormError, Input, ProtectedForm, lexSuperForm, passwordFormRules, DisplayLanguageSelect } from '$lib/forms';
-  import t, { getLanguageCodeFromNavigator, locale } from '$lib/i18n';
   import { TitlePage } from '$lib/layout';
-  import { register } from '$lib/user';
-  import { getSearchParamValues } from '$lib/util/query-params';
-  import { onMount } from 'svelte';
-  import { z } from 'zod';
-
-  type RegisterPageQueryParams = {
-    name: string;
-    email: string;
-  };
-  let turnstileToken = '';
-  // $locale is the locale that our i18n is using for them (i.e. the best available option we have for them)
-  // getLanguageCodeFromNavigator() gives us the language/locale they probably actually want. Maybe we'll support it in the future.
-  const userLocale = getLanguageCodeFromNavigator() ?? $locale;
-  const formSchema = z.object({
-    name: z.string().trim().min(1, $t('register.name_missing')),
-    email: z.string().email($t('form.invalid_email')),
-    password: passwordFormRules($t),
-    score: z.number(),
-    locale: z.string().trim().min(2).default(userLocale),
-  });
-
-  let { form, errors, message, enhance, submitting } = lexSuperForm(formSchema, async () => {
-    const { user, error } = await register($form.password, $form.score, $form.name, $form.email, $form.locale, turnstileToken);
-    if (error) {
-      if (error.turnstile) {
-        $message = $t('turnstile.invalid');
-      }
-      if (error.accountExists) {
-        $errors.email = [$t('register.account_exists')];
-      }
-      return;
-    }
-    if (user) {
-      await goto('/home', { invalidateAll: true }); // invalidate so we get the user from the server
-      return;
-    }
-    throw new Error('Unknown error, no error from server, but also no user.');
-  });
-  onMount(() => { // query params not available during SSR
-    const urlValues = getSearchParamValues<RegisterPageQueryParams>();
-    form.update((form) => {
-      if (urlValues.name) form.name = urlValues.name;
-      if (urlValues.email) form.email = urlValues.email;
-      return form;
-    }, { taint: true });
-  });
+  import t from '$lib/i18n';
+  import CreateUser from '$lib/components/Users/CreateUser.svelte';
 </script>
 
 <TitlePage title={$t('register.title')}>
-  <ProtectedForm {enhance} bind:turnstileToken>
-    <Input autofocus id="name" label={$t('register.label_name')} bind:value={$form.name} error={$errors.name} />
-    <div class="contents email">
-      <Input
-        id="email"
-        label={$t('register.label_email')}
-        description={$t('register.description_email')}
-        type="email"
-        bind:value={$form.email}
-        error={$errors.email}
-      />
-    </div>
-    <Input
-      id="password"
-      label={$t('register.label_password')}
-      type="password"
-      bind:value={$form.password}
-      error={$errors.password}
-      autocomplete="new-password"
-    />
-    <PasswordStrengthMeter bind:score={$form.score} password={$form.password} />
-    <DisplayLanguageSelect
-      bind:value={$form.locale}
-    />
-    <FormError error={$message} />
-    <SubmitButton loading={$submitting}>{$t('register.button_register')}</SubmitButton>
-  </ProtectedForm>
+  <CreateUser />
 </TitlePage>
-
-<style lang="postcss">
-  .email :global(.description) {
-    @apply text-success;
-  }
-</style>