Commit e47dd889 authored by Benni Mack's avatar Benni Mack
Browse files

[BUGFIX] Style installer steps

The installation process now uses
floating inputs, and sorts
the yellow box on step 4 properly.

Resolves: #93147
Releases: master
Change-Id: I89483171a0d58305d39cb4f75be642e89af16f55
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/67232

Tested-by: default avatarTYPO3com <noreply@typo3.com>
Tested-by: Simon Gilli's avatarSimon Gilli <typo3@gilbertsoft.org>
Tested-by: Benjamin Franzke's avatarBenjamin Franzke <bfr@qbus.de>
Tested-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
Reviewed-by: Simon Gilli's avatarSimon Gilli <typo3@gilbertsoft.org>
Reviewed-by: Benjamin Franzke's avatarBenjamin Franzke <bfr@qbus.de>
Reviewed-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
parent a61b8a90
......@@ -38,8 +38,8 @@
}
.typo3-install-container {
margin: 0 auto;
max-width: 680px;
margin: 4em auto;
max-width: 620px;
}
.typo3-install-content {
......
......@@ -295,6 +295,8 @@ $bs-datetimepicker-text-shadow: none;
// Overwrite Progress bar background color
$progress-bg: #dedede;
$progress-height: 1.25rem;
$progress-font-size: $font-size-base * 0.9;
//
// Components
......
......@@ -53,7 +53,7 @@ class BlankPageCest
$I->click('Continue');
// DatabaseData step
$I->waitForText('Create Administrative User / Specify Site Name');
$I->waitForText('Create Administrative User & Specify Site Name');
$I->fillField('#username', 'admin');
$I->fillField('#password', 'password');
$I->click('Continue');
......
......@@ -50,7 +50,7 @@ class BlankPageCest
$I->click('Continue');
// DatabaseData step
$I->waitForText('Create Administrative User / Specify Site Name');
$I->waitForText('Create Administrative User & Specify Site Name');
$I->fillField('#username', 'admin');
$I->fillField('#password', 'password');
$I->click('Continue');
......
......@@ -44,7 +44,7 @@ class BlankPageCest
$I->click('Continue');
// DatabaseData step
$I->waitForText('Create Administrative User / Specify Site Name');
$I->waitForText('Create Administrative User & Specify Site Name');
$I->fillField('#username', 'admin');
$I->fillField('#password', 'password');
$I->click('Continue');
......
......@@ -2,7 +2,7 @@
<div class="t3js-module-content" data-installer-database-data-execute-token="{executeDatabaseDataToken}">
<div class="typo3-install-content-body">
<h3>Create Administrative User / Specify Site Name</h3>
<h3>Create Administrative User & Specify Site Name</h3>
<p>Use this account to log into the backend of your site.</p>
<p>The password you provide for this account is also used to access the <strong>Install Tool</strong>.</p>
......@@ -12,79 +12,74 @@
<div class="t3js-installer-databaseData-output"></div>
<div class="typo3-install-content-spacer"></div>
<form method="post" id="stepInstaller-databaseData" class="t3-install-form-label-before form-horizontal">
<form method="post" id="stepInstaller-databaseData" class="t3-install-form-label-before">
<input type="hidden" value="execute" name="install[set]" />
<div class="form-group">
<label for="username" class="control-label col-md-2">Username</label>
<div class="col-md-10">
<input
class="t3-install-form-input-text form-control"
name="install[values][username]"
id="username"
placeholder="admin"
autocomplete="off"
/>
<div class="row">
<div class="col-md-6">
<div class="form-floating mb-3">
<input
class="t3-install-form-input-text form-control"
name="install[values][username]"
id="username"
placeholder="admin"
autocomplete="off"
/>
<label for="username" class="form-label">Username</label>
</div>
</div>
</div>
<div class="form-group">
<label for="password" class="control-label col-md-2">Password</label>
<div class="col-md-10">
<input
class="t3-install-form-input-text t3-install-form-password-strength form-control"
name="install[values][password]"
id="password"
type="password"
autocomplete="off"
/>
<div class="checkbox">
<label>
<input
type="checkbox"
id="show-password"
onchange="if (this.checked==true) { document.getElementById('password').type='text'; } else { document.getElementById('password').type='password'; }"
/>
Show password
</label>
<div class="col-md-6">
<div class="form-floating mb-3">
<input
class="t3-install-form-input-text t3-install-form-password-strength form-control"
name="install[values][password]"
id="password"
type="password"
autocomplete="off"
oninput="document.getElementById('t3js-password-alert').removeAttribute('style');"
placeholder="random password"
/>
<f:comment><!-- @todo: Add API for input group addons in floating forms--></f:comment>
<button class="btn btn-link" style="position: absolute; bottom: .35em; right: 0; outline: none; box-shadow: none" aria-label="Toggle password visibility" onclick="if (this.previousElementSibling.type === 'password') { this.previousElementSibling.type='text'; this.firstChild.setAttribute('class', 'fa fa-fw fa-eye');} else { this.previousElementSibling.type='password'; this.firstChild.setAttribute('class', 'fa fa-fw fa-lock');}return false"><i class="fa fa-fw fa-lock"></i></button>
<label for="password" class="form-label">Password</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<div class="alert alert-warning">
<div class="col-md-12">
<div class="alert alert-info" role="alert" style="display: none" id="t3js-password-alert">
If compromised, this account will provide an attacker with complete access to your installation. <br>A strong password is recommended. Include lower and upper case characters, special characters and numbers. Your password must be at least eight characters long.
</div>
</div>
</div>
<div class="form-group">
<label for="email" class="control-label col-md-2">Email address</label>
<div class="col-md-10">
<input
type="email"
class="t3-install-form-input-text form-control"
name="install[values][email]"
id="email"
/>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-floating mb-3">
<input
type="email"
class="t3-install-form-input-text form-control"
name="install[values][email]"
id="email"
placeholder="you@me.com"
/>
<label for="email" class="form-label">Email address</label>
</div>
<div class="form-group">
<label for="sitename" class="control-label col-md-2">Site name</label>
<div class="col-md-10">
<input
class="t3-install-form-input-text form-control"
name="install[values][sitename]"
id="sitename"
type="text"
value="{siteName}"
/>
<div class="form-floating mb-3">
<input
class="t3-install-form-input-text form-control"
name="install[values][sitename]"
id="sitename"
type="text"
value="{siteName}"
placeholder="Your new website"
/>
<label for="sitename" class="form-label">Site name</label>
</div>
<div class="form-group">
<button class="btn btn-success pull-right t3js-installer-databaseData-execute">
Continue
</button>
</div>
</div>
</div>
<div class="clearfix">
<button class="btn btn-success pull-right t3js-installer-databaseData-execute">
Continue
</button>
</div>
</form>
</div>
......
......@@ -18,21 +18,24 @@
<form method="post" id="stepInstaller-databaseSelect">
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<div class="radio">
<label for="t3-install-form-db-select-type-existing">
<input id="t3-install-form-db-select-type-existing" type="radio" name="install[values][type]" value="existing" class="radio" checked="checked" />
Use an existing empty database:
</label>
</div>
<div class="form-group">
<div class="form-group mb-3">
<p>
Select a database.
</p>
<select
id="t3-install-step-database-existing"
name="install[values][existing]"
class="form-control"
onfocus="document.getElementById('t3-install-form-db-select-type-existing').checked=true;"
>
<option value="">-- Select database --</option>
<option value="">-- Choose --</option>
<f:for each="{databaseList}" as="database">
<f:if condition="{database.tables} || {database.readonly}">
<f:then>
......@@ -45,6 +48,8 @@
</f:for>
</select>
</div>
</div>
<div class="col-md-6">
<div class="radio">
<label for="t3-install-step-database-new">
<input
......@@ -57,7 +62,7 @@
Create a new database:
</label>
</div>
<div class="form-group">
<div class="form-group mb-3">
<p>
Specify a name for your TYPO3 database.
</p>
......@@ -70,12 +75,11 @@
onfocus="document.getElementById('t3-install-form-db-select-type-new').checked=true;"
/>
</div>
<div class="form-group">
<button class="btn btn-success pull-right t3js-installer-databaseSelect-execute">
Continue
</button>
</div>
</div>
<div class="form-group">
<button class="btn btn-success pull-right t3js-installer-databaseSelect-execute">
Continue
</button>
</div>
</div>
</form>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment