Commit dc75bff7 authored by Benjamin Kott's avatar Benjamin Kott Committed by Benni Mack
Browse files

[TASK] Give install tool a fresher look

During the last-minute changes before LTS, some stylings in the
Maintenance area were done to streamline the look&feel, but the
installer process should get an update look as well.

Resolves: #86756
Releases: master
Change-Id: Idb58da1f467c27ce3e12252f201e031c2faaedc2
Reviewed-on: https://review.typo3.org/58543


Tested-by: default avatarTYPO3com <no-reply@typo3.com>
Reviewed-by: Anja Leichsenring's avatarAnja Leichsenring <aleichsenring@ab-softlab.de>
Tested-by: Anja Leichsenring's avatarAnja Leichsenring <aleichsenring@ab-softlab.de>
Reviewed-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
Tested-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
parent c23b1e19
......@@ -51,6 +51,7 @@
//
// TYPO3 Backend Components
//
@import "typo3/install";
@import "typo3/deprecated";
@import "typo3/main_type";
@import "typo3/various_fixes";
......
.typo3-install {
padding: 30px;
background-color: #dadada;
h1 {
font-size: 28px;
}
h2 {
font-size: 18px;
}
h3 {
font-size: 16px;
}
.btn {
font-size: inherit;
padding: 0.5em 1em;
}
.alert {
padding: 1.5em;
h3 {
font-size: 14px;
margin-bottom: 0;
}
> *:first-child {
margin-top: 0;
}
> *:last-child {
margin-bottom: 0;
}
}
}
.typo3-install-container {
margin: 0 auto;
max-width: 680px;
}
.typo3-install-content {
background-color: #fff;
box-shadow: 0 2px 1px rgba(0, 0, 0, 0.15);
overflow: hidden;
border-radius: 5px;
> div {
> *:first-child {
margin-top: 0;
}
> *:last-child {
margin-bottom: 0;
}
}
}
.typo3-install-content-header {
padding: 35px;
}
.typo3-install-content-header-logo {
margin: 0 auto;
margin-bottom: 15px;
}
.typo3-install-content-header-title {
font-size: 28px;
font-weight: 300;
}
.typo3-install-content-progress {
padding: 15px 35px;
border-top: 1px solid #eaeaea;
background-color: #fafafa;
}
.typo3-install-content-body {
border-top: 1px solid #eaeaea;
padding: 35px;
> *:first-child {
margin-top: 0;
}
> *:last-child {
margin-bottom: 0;
}
}
.typo3-install-content-spacer {
margin-top: 2em;
}
.typo3-install-content-spacer-small {
margin-top: 1em;
}
......@@ -10,5 +10,5 @@
<script type="text/javascript" src="{f:uri.resource(path: 'JavaScript/Contrib/require.js', extensionName: 'Core')}?{time}"></script>
<script type="text/javascript" src="{f:uri.resource(path: 'JavaScript/Installer.js')}?{time}"></script>
</head>
<body class="backend t3js-body install-tool-installer"></body>
<body class="backend t3js-body install-tool-installer typo3-install"></body>
</html>
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:i="http://typo3.org/ns/TYPO3/CMS/Install/ViewHelpers" data-namespace-typo3-fluid="true">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="page-header">
<h1 class="logo-pageheader">
<img src="{f:uri.resource(path: 'Images/typo3_orange.svg')}" width="130" class="logo" /><h2>Installing TYPO3 CMS <i:constant name="TYPO3_version" /></h2>
</h1>
</div>
<div class="typo3-install-container">
<div class="typo3-install-content">
<div class="typo3-install-content-header">
<img src="{f:uri.resource(path: 'Images/typo3_orange.svg')}" width="130" class="typo3-install-content-header-logo" />
<h1>
Installing TYPO3 CMS <strong><i:constant name="TYPO3_version" /></strong>
</h1>
</div>
<div class="typo3-install-content-progress">
<div class="progress t3js-installer-progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" style="width: {currentStep.percent}%;">
</div>
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" style="width: {currentStep.percent}%;"></div>
</div>
<div class="t3js-installer-content"></div>
</div>
<div class="t3js-installer-content">
</div>
</div>
</div>
</html>
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<div class="t3js-module-content" data-installer-database-data-execute-token="{executeDatabaseDataToken}">
<h3>Create Administrative User / Specify Site Name</h3>
<div class="typo3-install-content-body">
<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>
<p>On this page you can also set a name for your new website.</p>
<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>
<p>On this page you can also set a name for your new website.</p>
<div class="t3js-installer-databaseData-output"></div>
<div class="typo3-install-content-spacer"></div>
<div class="t3js-installer-databaseData-output"></div>
<div class="typo3-install-content-spacer"></div>
<div class="row">
<div class="col-md-12">
<form method="post" id="stepInstaller-databaseData" class="t3-install-form-label-before form-horizontal">
<input type="hidden" value="execute" name="install[set]" />
<div class="form-group">
<label for="password" 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>
<form method="post" id="stepInstaller-databaseData" class="t3-install-form-label-before form-horizontal">
<input type="hidden" value="execute" name="install[set]" />
<div class="form-group">
<label for="password" 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>
<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>
</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>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<div class="alert alert-warning">
If compromised, this account will provide an attacker with complete access to your installation. 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 class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<div class="alert alert-warning">
If compromised, this account will provide an attacker with complete access to your installation. 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 class="form-group">
<label for="sitename" class="control-label col-md-2">Site name</label>
<div class="col-md-10">
</div>
<input
class="t3-install-form-input-text form-control"
name="install[values][sitename]"
id="sitename"
type="text"
value="{siteName}"
/>
</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>
</div>
<div class="clearfix">
<button class="btn btn-success pull-right t3js-installer-databaseData-execute">
Continue
</button>
</form>
</div>
</div>
</form>
</div>
</div>
......
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<div class="t3js-module-content" data-installer-database-select-execute-token="{executeDatabaseSelectToken}">
<h3>Select a database</h3>
<div class="t3js-installer-databaseSelect-output"></div>
<div class="typo3-install-content-body">
<h2>Select a database</h2>
<f:if condition="{errors -> f:count()}">
<f:for each="{errors}" as="error">
<div class="alert alert-danger">
<h4>Exception</h4>
<p>{error}</p>
</div>
</f:for>
</f:if>
<div class="typo3-install-content-spacer"></div>
<div class="t3js-installer-databaseSelect-output"></div>
<div class="typo3-install-content-spacer"></div>
<form method="post" id="stepInstaller-databaseSelect">
<div class="row">
<div class="col-md-12">
<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">
<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>
<f:for each="{databaseList}" as="database">
<f:if condition="{database.tables}">
<f:then>
<option value="{database.name}" disabled="disabled">{database.name} ({database.tables} Tables)</option>
</f:then>
<f:else>
<option value="{database.name}">{database.name}</option>
</f:else>
</f:if>
</f:for>
</select>
<f:if condition="{errors -> f:count()}">
<f:for each="{errors}" as="error">
<div class="alert alert-danger">
<h4>Exception</h4>
<p>{error}</p>
</div>
<div class="radio">
<label for="t3-install-step-database-new">
</f:for>
</f:if>
<form method="post" id="stepInstaller-databaseSelect">
<div class="row">
<div class="col-md-12">
<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">
<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>
<f:for each="{databaseList}" as="database">
<f:if condition="{database.tables}">
<f:then>
<option value="{database.name}" disabled="disabled">{database.name} ({database.tables} Tables)</option>
</f:then>
<f:else>
<option value="{database.name}">{database.name}</option>
</f:else>
</f:if>
</f:for>
</select>
</div>
<div class="radio">
<label for="t3-install-step-database-new">
<input
id="t3-install-form-db-select-type-new"
type="radio"
name="install[values][type]"
value="new"
class="radio"
/>
Create a new database:
</label>
</div>
<div class="form-group">
<p>
Specify a name for your TYPO3 database.
</p>
<input
id="t3-install-form-db-select-type-new"
type="radio"
name="install[values][type]"
value="new"
class="radio"
id="t3-install-step-database-new"
class="t3-install-form-input-text form-control"
type="text"
name="install[values][new]"
checked="checked"
onfocus="document.getElementById('t3-install-form-db-select-type-new').checked=true;"
/>
Create a new database:
</label>
</div>
<div class="form-group">
<p>
Specify a name for your TYPO3 database.
</p>
<input
id="t3-install-step-database-new"
class="t3-install-form-input-text form-control"
type="text"
name="install[values][new]"
checked="checked"
onfocus="document.getElementById('t3-install-form-db-select-type-new').checked=true;"
/>
</div>
</div>
<div class="form-group">
<button class="btn btn-success pull-right t3js-installer-databaseSelect-execute">
Continue
</button>
<div class="form-group">
<button class="btn btn-success pull-right t3js-installer-databaseSelect-execute">
Continue
</button>
</div>
</div>
</div>
</div>
</form>
</form>
</div>
</div>
</html>
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<div class="t3js-module-content" data-installer-default-configuration-execute-token="{executeDefaultConfigurationToken}">
<h3>Installation Complete</h3>
<div class="typo3-install-content-body">
<h2>Installation Complete</h2>
<p>The Installation Wizard can create an empty page at the root of your website to help get you started. If you would like to use this option select "Create empty starting page".</p>
<p>The Installation Wizard can create an empty page at the root of your website to help get you started. If you would like to use this option select "Create empty starting page".</p>
<div class="typo3-install-content-spacer"></div>
<div class="t3js-installer-defaultConfiguration-output"></div>
<div class="typo3-install-content-spacer"></div>
<div class="t3js-installer-defaultConfiguration-output"></div>
<f:if condition="!{composerMode}">
<div class="alert alert-notice">
<h4>Want a pre-configured site?</h4>
<p>
You currently have an empty installation of TYPO3. If you would like to view a list of pre-configured distributions select “download list of distributions” from the list below.
<strong>Note: This may take some time to load.</strong>
</p>
</div>
</f:if>
<f:if condition="!{composerMode}">
<div class="alert alert-notice">
<h3>Want a pre-configured site?</h3>
<p>
You currently have an empty installation of TYPO3. If you would like to view a list of pre-configured distributions select “download list of distributions” from the list below.
<strong>Note: This may take some time to load.</strong>
</p>
</div>
</f:if>
<form method="post">
<div class="form-group">
<f:if condition="!{composerMode}">
<form method="post">
<div class="form-group">
<f:if condition="!{composerMode}">
<div class="radio">
<label for="load-distributions">
<input type="radio" id="load-distributions" name="install[values][sitesetup]" value="loaddistribution" />
Yes, download the list of distributions
</label>
</div>
</f:if>
<div class="radio">
<label for="create-site">
<input type="radio" id="create-site" name="install[values][sitesetup]" value="createsite" />
Create empty starting page
</label>
</div>
<div class="radio">
<label for="load-distributions">
<input type="radio" id="load-distributions" name="install[values][sitesetup]" value="loaddistribution" />
Yes, download the list of distributions
<label for="do-nothing">
<input type="radio" id="do-nothing" name="install[values][sitesetup]" value="donothing" checked="checked" />
Take me straight to the backend
</label>
</div>
</f:if>
<div class="radio">
<label for="create-site">
<input type="radio" id="create-site" name="install[values][sitesetup]" value="createsite" />
Create empty starting page
</label>
</div>
<div class="radio">
<label for="do-nothing">
<input type="radio" id="do-nothing" name="install[values][sitesetup]" value="donothing" checked="checked" />
Take me straight to the backend
</label>
<div class="clearfix">
<button class="btn btn-success pull-right t3js-installer-defaultConfiguration-execute">
Open the TYPO3 Backend
</button>
</div>
</div>
<button class="btn btn-success pull-right t3js-installer-defaultConfiguration-execute">
Open the TYPO3 Backend
</button>
</form>
</form>
</div>
</div>
</html>
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<div class="typo3-install-content-body">
<h3>Environment Overview</h3>
<p>First the Install Wizard needs to inspect your web server and identify any issues that may prevent TYPO3 from running correctly.</p>
<h2>Environment Overview</h2>
<p>First the Install Wizard needs to inspect your web server and identify any issues that may prevent TYPO3 from running correctly.</p>
<div class="row">
<div class="col-xs-6">
<form class="t3js-installer-environmentFolders-bad" style="display: none;">
<div class="form-group">
<button class="btn btn-default btn-block t3js-installer-environmentFolders-retry">
Scan environment again
</button>
</div>
</form>
<div class="t3js-installer-environment-details" style="display: none;">
<h3>Problems Detected</h3>
</div>
<div class="col-xs-6">
<form class="t3js-installer-environmentFolders-bad" style="display: none;">
<div class="form-group">
<button class="btn btn-danger btn-block t3js-installer-environmentFolders-execute">
Continue with errors
<span class="t3-install-form-button-icon-negative">&nbsp;</span>
</button>
</div>
</form>
</div>
</div>
<form class="t3js-installer-environmentFolders-good" style="display: none;">
<button class="btn btn-success t3js-installer-environmentFolders-execute">
No problems detected, continue with installation
</button>
</form>
<form class="t3js-installer-environmentFolders-bad" style="display: none;">
<div