First version of installation wizard

This commit is contained in:
mespeche
2013-09-13 18:03:45 +02:00
parent ac40705c80
commit 8b0c8bd760
14 changed files with 601 additions and 66 deletions

View File

@@ -4,12 +4,28 @@
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://symfony.com/schema/routing http://symfony.com/schema/routing/routing-1.0.xsd">
<route id="home" path="/install" >
<route id="install.step1" path="/install" >
<default key="_controller">Thelia\Controller\Install\InstallController::index</default>
</route>
<route id="home" path="/install/step/2" >
<route id="install.step2" path="/install/step/2" >
<default key="_controller">Thelia\Controller\Install\InstallController::checkPermission</default>
</route>
<route id="install.step3" path="/install/step/3" >
<default key="_controller">Thelia\Controller\Install\InstallController::databaseConnection</default>
</route>
<route id="install.step4" path="/install/step/4" >
<default key="_controller">Thelia\Controller\Install\InstallController::databaseSelection</default>
</route>
<route id="install.step5" path="/install/step/5" >
<default key="_controller">Thelia\Controller\Install\InstallController::generalInformation</default>
</route>
<route id="install.step6" path="/install/thanks" >
<default key="_controller">Thelia\Controller\Install\InstallController::thanks</default>
</route>
</routes>

View File

@@ -39,7 +39,7 @@ class BaseInstallController extends BaseController
{
$parser = $this->container->get("thelia.parser");
// Define the template thant shoud be used
// Define the template that shoud be used
$parser->setTemplate("install");
return $parser;

View File

@@ -33,18 +33,61 @@ class InstallController extends BaseInstallController
{
public function index()
{
$this->verifyStep(1);
//$this->verifyStep(1);
$this->getSession()->set("step", 1);
$this->render("index.html");
return $this->render("index.html");
}
public function checkPermission()
{
$this->verifyStep(2);
//$this->verifyStep(2);
$permission = new CheckPermission();
//$permission = new CheckPermission();
$this->getSession()->set("step", 2);
return $this->render("step-2.html");
}
public function databaseConnection()
{
//$this->verifyStep(2);
//$permission = new CheckPermission();
$this->getSession()->set("step", 3);
return $this->render("step-3.html");
}
public function databaseSelection()
{
//$this->verifyStep(2);
//$permission = new CheckPermission();
$this->getSession()->set("step", 4);
return $this->render("step-4.html");
}
public function generalInformation()
{
//$this->verifyStep(2);
//$permission = new CheckPermission();
$this->getSession()->set("step", 5);
return $this->render("step-5.html");
}
public function thanks()
{
//$this->verifyStep(2);
//$permission = new CheckPermission();
$this->getSession()->set("step", 6);
return $this->render("thanks.html");
}
protected function verifyStep($step)

View File

@@ -34,9 +34,10 @@ abstract class BaseInstall
*/
public function __construct($verifyInstall = true)
{
/* TODO : activate this part
if (file_exists(THELIA_ROOT . '/local/config/database.yml') && $verifyInstall) {
throw new AlreadyInstallException("Thelia is already installed");
}
}*/
$this->exec();

View File

@@ -8,6 +8,7 @@
@import "modals.less";
@import "tables.less";
@import "tablesorter.less";
@import "wizard.less";
@import "bootstrap-editable.less";
@import "bootstrap-switch.less";

View File

@@ -0,0 +1,129 @@
.wizard {
background-color: #fff;
border: 1px solid #d4d4d4;
border-radius: 4px;
.box-shadow(0 1px 4px rgba(0, 0, 0, 0.065));
*zoom: 1;
margin-bottom: 20px;
&:before,
&:after {
display: table;
line-height: 0;
content: "";
clear: both;
}
ul {
padding: 0;
margin: 0;
list-style: none outside none;
}
li {
position: relative;
float: left;
height: 46px;
padding: 0 10px 0 30px;
margin: 0;
font-size: 15px;
line-height: 46px;
color: #999999;
cursor: default;
background: #ededed;
&.complete {
color: #468847;
background: #f3f4f5;
&:hover{
background: #e8e8e8;
.chevron:before {
border-left: 14px solid #e8e8e8;
}
}
a{
color: inherit;
text-decoration: none;
font-weight: normal;
}
.chevron:before {
border-left: 14px solid #f3f4f5;
}
}
&.active {
color: @link-color;
background: #fff;
.chevron:before {
border-left: 14px solid #fff;
}
}
.chevron {
position: absolute;
top: 0;
right: -14px;
display: block;
border: 24px solid transparent;
border-right: 0;
border-left: 14px solid #d4d4d4;
&:before {
position: absolute;
top: -24px;
right: 1px;
display: block;
border: 24px solid transparent;
border-right: 0;
border-left: 14px solid #ededed;
content: "";
}
}
.badge {
margin-right: 8px;
}
&:nth-child(1) {
z-index: 10;
padding-left: 20px;
border-radius: 4px 0 0 4px;
}
&:nth-child(2) {
z-index: 9;
}
&:nth-child(3) {
z-index: 8;
}
&:nth-child(4) {
z-index: 7;
}
&:nth-child(5) {
z-index: 6;
}
&:nth-child(6) {
z-index: 5;
}
&:nth-child(7) {
z-index: 4;
}
&:nth-child(8) {
z-index: 3;
}
&:nth-child(9) {
z-index: 2;
}
&:nth-child(10) {
z-index: 1;
}
}
}

View File

@@ -1,12 +1,46 @@
{extends file="layout.html"}
{block name="content"}
<h1>{intl l="Thelia installation wizard"}</h1>
<br />
{extends file="layout.tpl"}
{intl l="Bienvenue au sein du programme d'installation de Thelia."}<br />
{intl l="Nous allons vous guider tout au long de ce processus afin d'installer l'application sur votre système."}<br /><br />
{block name="page-title"}{intl l='Installation'}{/block}
<form action="{url path="/install/step/2" }" method="post">
<input type="submit" value="Continuer" />
</form>
{block name="main-content"}
<div class="install">
<div id="wrapper" class="container">
<div class="row">
<div class="col-md-12">
<div class="general-block-decorator">
<h3 class="title title-without-tabs">{intl l="Thelia installation wizard"}</h3>
<div class="wizard">
<ul>
<li class="active"><span class="badge">1</span>{intl l="Welcome"}<span class="chevron"></span></li>
<li><span class="badge">2</span>{intl l="Checking permissions"}<span class="chevron"></span></li>
<li><span class="badge">3</span>{intl l="Database connection"}<span class="chevron"></span></li>
<li><span class="badge">4</span>{intl l="Database selection"}<span class="chevron"></span></li>
<li><span class="badge">5</span>{intl l="General information"}<span class="chevron"></span></li>
<li><span class="badge">6</span>{intl l="Thanks"}<span class="chevron"></span></li>
</ul>
</div>
<div class="well">
<p class="lead text-center">
{intl l="Welcome in the Thelia installation wizard."}
</p>
<p class="text-center">
{intl l="We will guide you throughout this process to install any application on your system."}
</p>
</div>
<div class="clearfix">
<a href="install/step/2" class="pull-right btn btn-default btn-primary"><span class="glyphicon glyphicon-chevron-right"></span> {intl l="Continue"}</a>
</div>
</div>
</div>
</div>
</div>
</div>
{/block}

View File

@@ -1,49 +0,0 @@
<!DOCTYPE html>
<html lang="{$lang_code}">
<head>
<title>{block name="title"}Thelia Install{/block}</title>
{images file='../admin/default/assets/img/favicon.ico'}<link rel="shortcut icon" href="{$asset_url}" />{/images}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{stylesheets file='../admin/default/assets/bootstrap/css/bootstrap.css' filters='cssembed'}
<link rel="stylesheet" href="{$asset_url}">
{/stylesheets}
{stylesheets file='../admin/default/assets/bootstrap/css/bootstrap-responsive.css' filters='cssembed'}
<link rel="stylesheet" href="{$asset_url}">
{/stylesheets}
{stylesheets file='../admin/default/assets/css/*' filters='less,cssembed'}
<link rel="stylesheet" href="{$asset_url}">
{/stylesheets}
</head>
<body>
<div class="topbar">
<div class="container">
<div class="version-info">{intl l='Version %ver' ver="{$THELIA_VERSION}"}</div>
</div>
</div>
<div id="wrapper" class="container">
{block name="content"}{/block}
</div>
<hr />
<footer class="footer">
<div class="container">
<p>{intl l='&copy; Thelia 2013'}
- <a href="http://www.openstudio.fr/" target="_blank">{intl l='Édité par OpenStudio'}</a>
- <a href="http://forum.thelia.net/" target="_blank">{intl l='Forum Thelia'}</a>
- <a href="http://contrib.thelia.net/" target="_blank">{intl l='Contributions Thelia'}</a>
<span class="pull-right">{intl l='interface par <a target="_blank" href="http://www.steaw-webdesign.com/">Steaw-Webdesign</a>'}</span>
</p>
</div>
</footer>
</body>
</html>

View File

@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="{$lang_code}">
<head>
<title>{block name="page-title"}Thelia Install{/block}</title>
{images file='../admin/default/assets/img/favicon.ico'}<link rel="shortcut icon" href="{$asset_url}" />{/images}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{stylesheets file='../admin/default/assets/less/*' filters='less,cssembed'}
<link rel="stylesheet" href="{$asset_url}">
{/stylesheets}
</head>
<body>
<div class="topbar">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="version-info">{intl l='Version %ver' ver="{$THELIA_VERSION}"}</div>
</div>
</div>
</div>
</div>
{* -- Main page content section ----------------------------------------- *}
{block name="main-content"}Put here the content of the template{/block}
{* -- Footer section ---------------------------------------------------- *}
<hr />
<footer class="footer">
<div class="container">
<p>{intl l='&copy; Thelia 2013'}
- <a href="http://www.openstudio.fr/" target="_blank">{intl l='Édité par OpenStudio'}</a>
- <a href="http://forum.thelia.net/" target="_blank">{intl l='Forum Thelia'}</a>
- <a href="http://contrib.thelia.net/" target="_blank">{intl l='Contributions Thelia'}</a>
<span class="pull-right">{intl l='interface par <a target="_blank" href="http://www.steaw-webdesign.com/">Steaw-Webdesign</a>'}</span>
</p>
{module_include location='in_footer'}
</div>
</footer>
{* -- Javascript section ------------------------------------------------ *}
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
{block name="after-javascript-include"}{/block}
{javascripts file='../admin/default/assets/js/bootstrap/bootstrap.js'}
<script src="{$asset_url}"></script>
{/javascripts}
{block name="javascript-initialization"}{/block}
</body>
</html>

View File

@@ -0,0 +1,51 @@
{extends file="layout.tpl"}
{block name="page-title"}{intl l='Installation step 2'}{/block}
{block name="main-content"}
<div class="install">
<div id="wrapper" class="container">
<div class="row">
<div class="col-md-12">
<div class="general-block-decorator">
<h3 class="title title-without-tabs">{intl l="Thelia installation wizard"}</h3>
<div class="wizard">
<ul>
<li class="complete"><a href="#"><span class="badge">1</span>{intl l="Welcome"}<span class="chevron"></span></a></li>
<li class="active"><span class="badge">2</span>{intl l="Checking permissions"}<span class="chevron"></span></li>
<li><span class="badge">3</span>{intl l="Database connection"}<span class="chevron"></span></li>
<li><span class="badge">4</span>{intl l="Database selection"}<span class="chevron"></span></li>
<li><span class="badge">5</span>{intl l="General information"}<span class="chevron"></span></li>
<li><span class="badge">6</span>{intl l="Thanks"}<span class="chevron"></span></li>
</ul>
</div>
<div class="well">
<p>We will check some rights to files and directories...</p>
<ul class="list-unstyled list-group">
<li class="list-group-item text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</li>
<li class="list-group-item text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</li>
<li class="list-group-item text-danger">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</li>
<li class="list-group-item text-danger">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</li>
<li class="list-group-item text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</li>
<li class="list-group-item text-danger">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</li>
<li class="list-group-item text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</li>
</ul>
</div>
<div class="clearfix">
<a href="install" class="pull-left btn btn-default"><span class="glyphicon glyphicon-chevron-left"></span> {intl l="Return"}</a>
<a href="install/step/3" class="pull-right btn btn-default btn-primary"><span class="glyphicon glyphicon-chevron-right"></span> {intl l="Continue"}</a>
</div>
</div>
</div>
</div>
</div>
</div>
{/block}

View File

@@ -0,0 +1,56 @@
{extends file="layout.tpl"}
{block name="page-title"}{intl l='Installation step 3'}{/block}
{block name="main-content"}
<div class="install">
<div id="wrapper" class="container">
<div class="row">
<div class="col-md-12">
<div class="general-block-decorator">
<h3 class="title title-without-tabs">{intl l="Thelia installation wizard"}</h3>
<div class="wizard">
<ul>
<li class="complete"><a href="#"><span class="badge">1</span>{intl l="Welcome"}<span class="chevron"></span></a></li>
<li class="complete"><a href="#"><span class="badge">2</span>{intl l="Checking permissions"}<span class="chevron"></span></a></li>
<li class="active"><span class="badge">3</span>{intl l="Database connection"}<span class="chevron"></span></li>
<li><span class="badge">4</span>{intl l="Database selection"}<span class="chevron"></span></li>
<li><span class="badge">5</span>{intl l="General information"}<span class="chevron"></span></li>
<li><span class="badge">6</span>{intl l="Thanks"}<span class="chevron"></span></li>
</ul>
</div>
<div class="well">
<form action="">
<div class="form-group">
<label for="">{intl l="Host"} :</label>
<input id="" type="text" class="form-control">
</div>
<div class="form-group">
<label for="">{intl l="Login"} :</label>
<input id="" type="text" class="form-control">
</div>
<div class="form-group">
<label for="">{intl l="Password"} :</label>
<input id="" type="password" class="form-control">
</div>
</form>
</div>
<div class="clearfix">
<a href="install/step/2" class="pull-left btn btn-default"><span class="glyphicon glyphicon-chevron-left"></span> {intl l="Return"}</a>
<a href="install/step/4" class="pull-right btn btn-default btn-primary"><span class="glyphicon glyphicon-chevron-right"></span> {intl l="Continue"}</a>
</div>
</div>
</div>
</div>
</div>
</div>
{/block}

View File

@@ -0,0 +1,77 @@
{extends file="layout.tpl"}
{block name="page-title"}{intl l='Installation step 4'}{/block}
{block name="main-content"}
<div class="install">
<div id="wrapper" class="container">
<div class="row">
<div class="col-md-12">
<div class="general-block-decorator">
<h3 class="title title-without-tabs">{intl l="Thelia installation wizard"}</h3>
<div class="wizard">
<ul>
<li class="complete"><a href="#"><span class="badge">1</span>{intl l="Welcome"}<span class="chevron"></span></a></li>
<li class="complete"><a href="#"><span class="badge">2</span>{intl l="Checking permissions"}<span class="chevron"></span></a></li>
<li class="complete"><a href="#"><span class="badge">3</span>{intl l="Database connection"}<span class="chevron"></span></a></li>
<li class="active"><span class="badge">4</span>{intl l="Database selection"}<span class="chevron"></span></li>
<li><span class="badge">5</span>{intl l="General information"}<span class="chevron"></span></li>
<li><span class="badge">6</span>{intl l="Thanks"}<span class="chevron"></span></li>
</ul>
</div>
<div class="well">
<form action="">
<fieldset>
<legend>{intl l="Choose your database"}</legend>
<p>
The SQL server contains multiple databases.<br/>
Select below the one you want to use.
</p>
<div class="radio">
<label>
<input type="radio" name="" id="" value="">
Database 1
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="" id="" value="">
Database 2
</label>
</div>
<p>
{intl l="or"}
</p>
<div class="radio">
<label>
<input type="radio" name="" id="" value="" checked>
Create an other database
</label>
</div>
<div class="form-group">
<input type="text" class="form-control">
</div>
</fieldset>
</form>
</div>
<div class="clearfix">
<a href="install/step/2" class="pull-left btn btn-default"><span class="glyphicon glyphicon-chevron-left"></span> {intl l="Return"}</a>
<a href="install/step/4" class="pull-right btn btn-default btn-primary"><span class="glyphicon glyphicon-chevron-right"></span> {intl l="Continue"}</a>
</div>
</div>
</div>
</div>
</div>
</div>
{/block}

View File

@@ -0,0 +1,72 @@
{extends file="layout.tpl"}
{block name="page-title"}{intl l='Installation step 4'}{/block}
{block name="main-content"}
<div class="install">
<div id="wrapper" class="container">
<div class="row">
<div class="col-md-12">
<div class="general-block-decorator">
<h3 class="title title-without-tabs">{intl l="Thelia installation wizard"}</h3>
<div class="wizard">
<ul>
<li class="complete"><a href="#"><span class="badge">1</span>{intl l="Welcome"}<span class="chevron"></span></a></li>
<li class="complete"><a href="#"><span class="badge">2</span>{intl l="Checking permissions"}<span class="chevron"></span></a></li>
<li class="complete"><a href="#"><span class="badge">3</span>{intl l="Database connection"}<span class="chevron"></span></a></li>
<li class="complete"><a href="#"><span class="badge">4</span>{intl l="Database selection"}<span class="chevron"></span></a></li>
<li class="active"><span class="badge">5</span>{intl l="General information"}<span class="chevron"></span></li>
<li><span class="badge">6</span>{intl l="Thanks"}<span class="chevron"></span></li>
</ul>
</div>
<div class="well">
<form action="">
<p>
The system will now you create a custom site access.
</p>
<div class="form-group">
<label for="">{intl l="Login"} :</label>
<input id="" type="text" class="form-control">
</div>
<div class="form-group">
<label for="">{intl l="Password"} :</label>
<input id="" type="password" class="form-control">
</div>
<div class="form-group">
<label for="">{intl l="Password confirmation"} :</label>
<input id="" type="password" class="form-control">
</div>
<div class="form-group">
<label for="">{intl l="Email address"} :</label>
<input id="" type="email" class="form-control">
</div>
<div class="form-group">
<label for="">{intl l="Email address confirmation"} :</label>
<input id="" type="email" class="form-control">
</div>
</form>
</div>
<div class="clearfix">
<a href="install/step/2" class="pull-left btn btn-default"><span class="glyphicon glyphicon-chevron-left"></span> {intl l="Return"}</a>
<a href="install/step/4" class="pull-right btn btn-default btn-primary"><span class="glyphicon glyphicon-chevron-right"></span> {intl l="Continue"}</a>
</div>
</div>
</div>
</div>
</div>
</div>
{/block}

View File

@@ -0,0 +1,42 @@
{extends file="layout.tpl"}
{block name="page-title"}{intl l='Thanks'}{/block}
{block name="main-content"}
<div class="install">
<div id="wrapper" class="container">
<div class="row">
<div class="col-md-12">
<div class="general-block-decorator">
<h3 class="title title-without-tabs">{intl l="Thelia installation wizard"}</h3>
<div class="wizard">
<ul>
<li class="complete"><a href="#"><span class="badge">1</span>{intl l="Welcome"}<span class="chevron"></span></a></li>
<li class="complete"><a href="#"><span class="badge">2</span>{intl l="Checking permissions"}<span class="chevron"></span></a></li>
<li class="complete"><a href="#"><span class="badge">3</span>{intl l="Database connection"}<span class="chevron"></span></a></li>
<li class="complete"><a href="#"><span class="badge">4</span>{intl l="Database selection"}<span class="chevron"></span></a></li>
<li class="complete"><a href="#"><span class="badge">5</span>{intl l="General information"}<span class="chevron"></span></a></li>
<li class="active"><span class="badge">6</span>{intl l="Thanks"}<span class="chevron"></span></li>
</ul>
</div>
<div class="well">
<p class="lead text-center">
{intl l="Thank you have installed Thelia"}.
</p>
<p class="text-center">
{intl l="You will be redirected to your personal space in order to manage your store now."}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
{/block}