resources/views/setup/step-4-database-mysql.phtml
<?php
declare(strict_types=1);
use Fisharebest\Webtrees\I18N;
use Illuminate\Support\Collection;
/**
* @var string $dbhost
* @var string $dbname
* @var string $dbpass
* @var string $dbport
* @var string $dbtype
* @var string $dbuser
* @var Collection<int,string> $errors
* @var string $lang
* @var string $tblpfx
* @var Collection<int,string> $warnings
* @var string $wtemail
* @var string $wtname
* @var string $wtpass
* @var string $wtuser
*/
?>
<form method="post" autocomplete="off">
<input name="lang" type="hidden" value="<?= e($lang) ?>">
<input name="dbtype" type="hidden" value="<?= e($dbtype) ?>">
<input name="wtname" type="hidden" value="<?= e($wtname) ?>">
<input name="wtuser" type="hidden" value="<?= e($wtuser) ?>">
<input name="wtpass" type="hidden" value="<?= e($wtpass) ?>">
<input name="wtemail" type="hidden" value="<?= e($wtemail) ?>">
<h2>
<?= I18N::translate('Database connection') ?> – MySQL / MariaDB / Percona
</h2>
<?php foreach ($errors as $error) : ?>
<p class="alert alert-danger"><?= $error ?></p>
<?php endforeach ?>
<?php foreach ($warnings as $warning) : ?>
<p class="alert alert-warning"><?= $warning ?></p>
<?php endforeach ?>
<div class="row mb-3">
<div class="col">
<?= I18N::translate('Connection type') ?>
</div>
</div>
<div class="row mb-3">
<div class="col-sm-3">
<div class="form-check">
<input type="radio" name="mysql-type" id="mysql-type-local" class="form-check-input" <?= ($dbhost === '' || $dbhost === 'localhost') ? 'checked="checked"' : '' ?>">
<label class="form-check-label" for="mysql-type-local">
<?= I18N::translate('local') ?>
</label>
</div>
</div>
<div class="col-sm-9">
<input type="text" value="localhost:<?= ini_get('pdo_mysql.default_socket') ?>" class="form-control" readonly="readonly">
</div>
</div>
<div class="row mb-3">
<div class="col-sm-3">
<div class="form-check">
<input type="radio" name="mysql-type" id="mysql-type-network" class="form-check-input" <?= ($dbhost === '' || $dbhost === 'localhost') ? '' : 'checked="checked"' ?>">
<label class="form-check-label" for="mysql-type-network">
<?= I18N::translate('network') ?>
</label>
</div>
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8">
<label class="form-label" for="dbhost">
<?= I18N::translate('Server name') ?>
</label>
</div>
<div class="col-4">
<label class="form-label" for="dbport">
<?= I18N::translate('Port number') ?>
</label>
</div>
</div>
<div class="row">
<div class="col-8">
<input class="form-control" id="dbhost" name="dbhost" type="text" value="<?= e($dbhost === 'localhost' ? '' : $dbhost) ?>" dir="ltr">
</div>
<div class="col-4">
<input class="form-control" id="dbport" name="dbport" pattern="\d+" type="text" value="<?= e($dbport ?: '3306') ?>" dir="ltr">
</div>
</div>
</div>
</div>
<div class="row mb-3">
<label class="col-form-label col-sm-3" for="dbuser">
<?= I18N::translate('Database user account') ?>
</label>
<div class="col-sm-9">
<input class="form-control" id="dbuser" name="dbuser" type="text" value="<?= e($dbuser) ?>" dir="ltr">
</div>
</div>
<div class="row mb-3">
<label class="col-form-label col-sm-3" for="dbpass">
<?= I18N::translate('Database password') ?>
</label>
<div class="col-sm-9">
<input class="form-control" id="dbpass" name="dbpass" type="password" value="<?= e($dbpass) ?>" dir="ltr" autocomplete="off" data-wt-show-password-text="<?= e(I18N::translate('show')) ?>" data-wt-show-password-title="<?= e(I18N::translate('Show password')) ?>" data-wt-hide-password-text="<?= e(I18N::translate('hide')) ?>" data-wt-hide-password-title="<?= e(I18N::translate('Hide password')) ?>">
</div>
</div>
<div class="row mb-3">
<label class="col-form-label col-sm-3" for="dbname">
<?= I18N::translate('Database name') ?>
</label>
<div class="col-sm-9">
<input class="form-control" dir="ltr" id="dbname" name="dbname" pattern="[^`'"]{1,64}" type="text" value="<?= e($dbname) ?>">
</div>
</div>
<div class="row mb-3">
<label class="col-form-label col-sm-3" for="tblpfx">
<?= I18N::translate('Table prefix') ?>
</label>
<div class="col-sm-9">
<input class="form-control" dir="ltr" id="tblpfx" maxlength="15" name="tblpfx" pattern="[a-zA-Z0-9_]+" type="text" value="<?= e($tblpfx) ?>">
<div class="form-text">
<?= I18N::translate('The prefix is optional, but recommended. By giving the table names a unique prefix you can let several different applications share the same database.') ?>
<?= I18N::translate('Use letters A-Z, a-z, digits 0-9, or underscores') ?>
</div>
</div>
</div>
<hr>
<div class="d-flex justify-content-between">
<button class="btn btn-primary" name="step" type="submit" value="5">
<?= I18N::translate('next') ?>
</button>
<button class="btn btn-secondary" name="step" type="submit" value="3">
<?= I18N::translate('previous') ?>
</button>
</div>
</form>
<script>
(function () {
const inputDbHost = document.getElementById('dbhost');
document.getElementById('mysql-type-local').addEventListener('click', () => inputDbHost.value = '');
inputDbHost.addEventListener('change', () => {
if (inputDbHost.value === 'localhost') {
inputDbHost.value = '';
}
if (inputDbHost.value === '') {
document.getElementById('mysql-type-local').click();
} else {
document.getElementById('mysql-type-network').click();
}
});
document.querySelector('form').addEventListener('submit', () => {
if (inputDbHost.value === '') {
inputDbHost.value = 'localhost'
}
});
})();
</script>