226226 />
227227 <div
228228 class =" field text-body-2"
229- v-text =" installerData.stepData.dbNameForm "
229+ v-text =" sanitizedDbName "
230230 />
231231 </div >
232232
379379</template >
380380
381381<script setup>
382- import { inject , ref } from " vue"
382+ import { inject , ref , computed } from " vue"
383383import { useI18n } from " vue-i18n"
384384
385385import Message from " primevue/message"
@@ -392,6 +392,19 @@ const { t } = useI18n()
392392
393393const installerData = inject (" installerData" )
394394
395+ // Compute the sanitized database name as it will be created on the server.
396+ const sanitizedDbName = computed (() => {
397+ const raw = installerData .value ? .stepData ? .dbNameForm || " "
398+
399+ // For updates we trust the existing database name as-is.
400+ if (installerData .value .installType === " update" || installerData .value .isUpdateAvailable ) {
401+ return raw
402+ }
403+
404+ // Same rule as backend: only letters, digits and underscore are kept.
405+ return raw .replace (/ [^ a-zA-Z0-9 _] / g , " " )
406+ })
407+
395408const loading = ref (false )
396409const isButtonDisabled = ref (installerData .value .isUpdateAvailable )
397410const isExecutable = ref (" " )
@@ -423,7 +436,7 @@ function btnStep6OnClick() {
423436}
424437
425438function startMigration (updatePath ) {
426- var xhr = new XMLHttpRequest ()
439+ const xhr = new XMLHttpRequest ()
427440 xhr .onreadystatechange = function () {
428441 if (xhr .readyState === 4 && xhr .status !== 200 ) {
429442 loading .value = false
@@ -442,7 +455,7 @@ function startMigration(updatePath) {
442455
443456function pollMigrationStatus () {
444457 setTimeout (() => {
445- var xhr = new XMLHttpRequest ()
458+ const xhr = new XMLHttpRequest ()
446459 xhr .onreadystatechange = function () {
447460 if (xhr .readyState === 4 && xhr .status === 200 ) {
448461 const response = JSON .parse (xhr .responseText )
0 commit comments