Suggest language change at the beginning of onboarding

ui/src/lib/components/LocaleSelect.svelte

@@ -0,0 +1,76 @@
+<!--
+     This file is part of the happyDomain (R) project.
+     Copyright (c) 2022-2025 happyDomain
+     Authors: Pierre-Olivier Mercier, et al.
+
+     This program is offered under a commercial and under the AGPL license.
+     For commercial licensing, contact us at <contact@happydomain.org>.
+
+     For AGPL licensing:
+     This program is free software: you can redistribute it and/or modify
+     it under the terms of the GNU Affero General Public License as published by
+     the Free Software Foundation, either version 3 of the License, or
+     (at your option) any later version.
+
+     This program is distributed in the hope that it will be useful,
+     but WITHOUT ANY WARRANTY; without even the implied warranty of
+     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+     GNU Affero General Public License for more details.
+
+     You should have received a copy of the GNU Affero General Public License
+     along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<script lang="ts">
+    import { goto } from "$app/navigation";
+
+    import { Input, Spinner } from "@sveltestrap/sveltestrap";
+
+    import { saveAccountSettings } from "$lib/api/user";
+    import type { UserSettings } from "$lib/model/usersettings";
+    import { locales, locale } from "$lib/translations";
+    import { refreshUserSession, userSession } from "$lib/stores/usersession";
+    import { t } from "$lib/translations";
+
+    export let settings: UserSettings = $userSession.settings;
+    let formSent = false;
+
+    function saveLocale() {
+        formSent = true;
+        saveAccountSettings($userSession, settings).then(
+            (settings) => {
+                refreshUserSession().then(() => {
+                    formSent = false;
+                    if (settings.language != $locale) {
+                        $locale = settings.language;
+                    }
+                });
+            },
+            (error) => {
+                formSent = false;
+                toasts.addErrorToast({
+                    title: $t("errors.settings-change"),
+                    message: error,
+                    timeout: 10000,
+                });
+            },
+        );
+    }
+</script>
+
+<div class="d-flex gap-2 align-items-center">
+    <Input
+        id="locale-select"
+        type="select"
+        bind:value={settings.language}
+        on:change={saveLocale}
+        {...$$restProps}
+    >
+        {#each $locales as lang}
+            <option value={lang}>{lang}</option>
+        {/each}
+    </Input>
+    {#if formSent}
+        <Spinner size="sm" />
+    {/if}
+</div>

ui/src/lib/components/Onboarding.svelte

@@ -43,6 +43,7 @@
     } from "@sveltestrap/sveltestrap";
 
     import CardImportableDomains from "$lib/components/providers/CardImportableDomains.svelte";
+    import LocaleSelect from "$lib/components/LocaleSelect.svelte";
     import Logo from "$lib/components/Logo.svelte";
     import NewDomainInput from "$lib/components/domains/NewDomainInput.svelte";
     import PForm from "$lib/components/providers/Form.svelte";
@@ -169,6 +170,14 @@
                     <h3 class="fw-bolder">
                         {$t("common.welcome.start")}<Logo height="30" />{$t("common.welcome.end")}
                     </h3>
+                    <Row class="align-items-center mb-2">
+                        <label class="col-auto" for="locale-select">
+                            Choose happy<span class="fw-bold">Domain</span> language:
+                        </label>
+                        <Col>
+                            <LocaleSelect size="sm" />
+                        </Col>
+                    </Row>
                     <p>
                         {@html $t("onboarding.welcome.purpose", {
                             happyDomain: `happy<span class="fw-bold">Domain</span>`,