From 63e767bd1897c669652b81abaa9b352f8210ca69 Mon Sep 17 00:00:00 2001
From: Sylvain <bond.never.die@gmail.com>
Date: Wed, 17 Aug 2016 10:10:23 +0200
Subject: [PATCH] refactored settings page

---
 app/assets/javascripts/router.coffee.erb      |  36 +-
 .../templates/admin/settings/about.html       |  35 ++
 .../templates/admin/settings/general.html     | 308 +++++++++++
 .../templates/admin/settings/home_page.html   |  29 ++
 .../templates/admin/settings/index.html       | 491 ------------------
 .../templates/admin/settings/index.html.erb   |  41 ++
 .../admin/settings/reservations.html          |  84 +++
 .../components/jasny-bootstrap/Gruntfile.js   |   4 +-
 8 files changed, 517 insertions(+), 511 deletions(-)
 create mode 100644 app/assets/templates/admin/settings/about.html
 create mode 100644 app/assets/templates/admin/settings/general.html
 create mode 100644 app/assets/templates/admin/settings/home_page.html
 delete mode 100644 app/assets/templates/admin/settings/index.html
 create mode 100644 app/assets/templates/admin/settings/index.html.erb
 create mode 100644 app/assets/templates/admin/settings/reservations.html

diff --git a/app/assets/javascripts/router.coffee.erb b/app/assets/javascripts/router.coffee.erb
index 1dd4b362d..fcbc5a232 100644
--- a/app/assets/javascripts/router.coffee.erb
+++ b/app/assets/javascripts/router.coffee.erb
@@ -248,7 +248,7 @@ angular.module('application.router', ['ui.router']).
         url: '/projects?q&page&theme_id&component_id&machine_id&from&whole_network'
         views:
           'main@':
-            templateUrl: '<%= asset_path "projects/index.html" %>'
+            templateUrl: '<%= asset_path "projects/index.html.erb" %>'
             controller: 'ProjectsController'
         resolve:
           themesPromise: ['Theme', (Theme)->
@@ -306,7 +306,7 @@ angular.module('application.router', ['ui.router']).
         url: '/machines'
         views:
           'main@':
-            templateUrl: '<%= asset_path "machines/index.html" %>'
+            templateUrl: '<%= asset_path "machines/index.html.erb" %>'
             controller: 'MachinesController'
         resolve:
           machinesPromise: ['Machine', (Machine)->
@@ -387,7 +387,7 @@ angular.module('application.router', ['ui.router']).
         url: '/trainings'
         views:
           'main@':
-            templateUrl: '<%= asset_path "trainings/index.html" %>'
+            templateUrl: '<%= asset_path "trainings/index.html.erb" %>'
             controller: 'TrainingsController'
         resolve:
           trainingsPromise: ['Training', (Training)->
@@ -452,7 +452,7 @@ angular.module('application.router', ['ui.router']).
         url: '/notifications'
         views:
           'main@':
-            templateUrl: '<%= asset_path "notifications/index.html" %>'
+            templateUrl: '<%= asset_path "notifications/index.html.erb" %>'
             controller: 'NotificationsController'
         resolve:
           translations: [ 'Translations', (Translations) ->
@@ -465,7 +465,7 @@ angular.module('application.router', ['ui.router']).
         abstract: Fablab.withoutPlans
         views:
           'main@':
-            templateUrl: '<%= asset_path "plans/index.html" %>'
+            templateUrl: '<%= asset_path "plans/index.html.erb" %>'
             controller: 'PlansIndexController'
         resolve:
           subscriptionExplicationsPromise: ['Setting', (Setting)->
@@ -487,7 +487,7 @@ angular.module('application.router', ['ui.router']).
         url: '/events'
         views:
           'main@':
-            templateUrl: '<%= asset_path "events/index.html" %>'
+            templateUrl: '<%= asset_path "events/index.html.erb" %>'
             controller: 'EventsController'
         resolve:
           categoriesPromise: ['Category', (Category) ->
@@ -571,7 +571,7 @@ angular.module('application.router', ['ui.router']).
         url: '/admin/project_elements'
         views:
           'main@':
-            templateUrl: '<%= asset_path "admin/project_elements/index.html" %>'
+            templateUrl: '<%= asset_path "admin/project_elements/index.html.erb" %>'
             controller: 'ProjectElementsController'
         resolve:
           componentsPromise: ['Component', (Component)->
@@ -592,7 +592,7 @@ angular.module('application.router', ['ui.router']).
         url: '/admin/trainings'
         views:
           'main@':
-            templateUrl: '<%= asset_path "admin/trainings/index.html" %>'
+            templateUrl: '<%= asset_path "admin/trainings/index.html.erb" %>'
             controller: 'TrainingsAdminController'
         resolve:
           trainingsPromise: ['Training', (Training)->
@@ -638,7 +638,7 @@ angular.module('application.router', ['ui.router']).
         url: '/admin/events'
         views:
           'main@':
-            templateUrl: '<%= asset_path "admin/events/index.html" %>'
+            templateUrl: '<%= asset_path "admin/events/index.html.erb" %>'
             controller: 'AdminEventsController'
         resolve:
           eventsPromise: ['Event', (Event)->
@@ -719,7 +719,7 @@ angular.module('application.router', ['ui.router']).
         url: '/admin/pricing'
         views:
           'main@':
-            templateUrl: '<%= asset_path "admin/pricing/index.html" %>'
+            templateUrl: '<%= asset_path "admin/pricing/index.html.erb" %>'
             controller: 'EditPricingController'
         resolve:
           plans: ['Plan', (Plan) ->
@@ -828,7 +828,7 @@ angular.module('application.router', ['ui.router']).
         url: '/admin/invoices'
         views:
           'main@':
-            templateUrl: '<%= asset_path "admin/invoices/index.html" %>'
+            templateUrl: '<%= asset_path "admin/invoices/index.html.erb" %>'
             controller: 'InvoicesController'
         resolve:
           settings: ['Setting', (Setting)->
@@ -859,16 +859,16 @@ angular.module('application.router', ['ui.router']).
         url: '/admin/members'
         views:
           'main@':
-            templateUrl: '<%= asset_path "admin/members/index.html" %>'
+            templateUrl: '<%= asset_path "admin/members/index.html.erb" %>'
             controller: 'AdminMembersController'
           'groups@app.admin.members':
-            templateUrl: '<%= asset_path "admin/groups/index.html" %>'
+            templateUrl: '<%= asset_path "admin/groups/index.html.erb" %>'
             controller: 'GroupsController'
           'tags@app.admin.members':
-            templateUrl: '<%= asset_path "admin/tags/index.html" %>'
+            templateUrl: '<%= asset_path "admin/tags/index.html.erb" %>'
             controller: 'TagsController'
           'authentification@app.admin.members':
-            templateUrl: '<%= asset_path "admin/authentications/index.html" %>'
+            templateUrl: '<%= asset_path "admin/authentications/index.html.erb" %>'
             controller: 'AuthentificationController'
         resolve:
           membersPromise: ['Member', (Member)->
@@ -977,7 +977,7 @@ angular.module('application.router', ['ui.router']).
         url: '/admin/statistics'
         views:
           'main@':
-            templateUrl: '<%= asset_path "admin/statistics/index.html" %>'
+            templateUrl: '<%= asset_path "admin/statistics/index.html.erb" %>'
             controller: 'StatisticsController'
         resolve:
           membersPromise: ['Member', (Member) ->
@@ -1005,7 +1005,7 @@ angular.module('application.router', ['ui.router']).
         url: '/admin/settings'
         views:
           'main@':
-            templateUrl: '<%= asset_path "admin/settings/index.html" %>'
+            templateUrl: '<%= asset_path "admin/settings/index.html.erb" %>'
             controller: 'SettingsController'
         resolve:
           settingsPromise: ['Setting', (Setting)->
@@ -1053,7 +1053,7 @@ angular.module('application.router', ['ui.router']).
         url: '/open_api_clients'
         views:
           'main@':
-            templateUrl: '<%= asset_path "admin/open_api_clients/index.html" %>'
+            templateUrl: '<%= asset_path "admin/open_api_clients/index.html.erb" %>'
             controller: 'OpenAPIClientsController'
         resolve:
           clientsPromise: ['OpenAPIClient', (OpenAPIClient)->
diff --git a/app/assets/templates/admin/settings/about.html b/app/assets/templates/admin/settings/about.html
new file mode 100644
index 000000000..9adf2b614
--- /dev/null
+++ b/app/assets/templates/admin/settings/about.html
@@ -0,0 +1,35 @@
+<div class="panel panel-default m-t-md">
+    <div class="panel-body">
+
+        <div class="row m-t-lg m-b-lg">
+            <div class="col-sm-offset-4 col-sm-4">
+                <h1 ng-model="aboutTitleSetting.value" medium-editor options='{"placeholder": "{{ "title_of_the_about_page" | translate }}", "disableToolbar": true, "disableReturn": false}' class="text-u-c"></h1>
+                <span class="help-block text-info text-xs"><i class="fa fa-lightbulb-o"></i> {{ 'shift_enter_to_force_carriage_return' | translate }}</span>
+                <button name="button" class="btn btn-warning" ng-click="save(aboutTitleSetting)" translate>{{ 'save' }}</button>
+            </div>
+
+        </div>
+
+        <div class="row">
+            <div class="col-md-4 col-md-offset-1">
+                <div class="text-justify" ng-model="aboutBodySetting.value" medium-editor options='{"placeholder": "{{ "input_the_main_content" | translate }}",
+                  "buttons": ["bold", "italic", "anchor", "header1", "header2" ]
+                  }'>
+
+                </div>
+                <button name="button" class="btn btn-warning" ng-click="save(aboutBodySetting)" translate>{{ 'save' }}</button>
+            </div>
+            <div class="col-md-4 col-md-offset-2">
+                <div ng-model="aboutContactsSetting.value" medium-editor options='{"placeholder": "{{ "input_the_fablab_contacts" | translate }}",
+                  "buttons": ["bold", "italic", "anchor", "header1", "header2" ]
+                  }'>
+
+                </div>
+                <span class="help-block text-info text-xs"><i class="fa fa-lightbulb-o"></i> {{ 'shift_enter_to_force_carriage_return' | translate }}</span>
+                <button name="button" class="btn btn-warning" ng-click="save(aboutContactsSetting)" translate>{{ 'save' }}</button>
+            </div>
+
+        </div>
+
+    </div>
+</div>
\ No newline at end of file
diff --git a/app/assets/templates/admin/settings/general.html b/app/assets/templates/admin/settings/general.html
new file mode 100644
index 000000000..72b4337dc
--- /dev/null
+++ b/app/assets/templates/admin/settings/general.html
@@ -0,0 +1,308 @@
+<div class="panel panel-default m-t-md">
+    <div class="panel-heading">
+        <span class="font-sbold" translate>{{ 'title' }}</span>
+    </div>
+    <div class="panel-body">
+        <div class="row m-t-lg">
+            <div class="col-md-4">
+                <form role="form" novalidate>
+                    <label for="fablabName" class="control-label m-r" translate>{{ 'fablab_title' }}</label>
+                    <div class="form-group">
+                        <div class="input-group">
+                            <div class="input-group-addon"><i class="fa fa-font"></i></div>
+                            <input type="text" id="fablabName" ng-model="fablabName.value" class="form-control" placeholder="{{ 'fablab_name' | translate }}"/>
+                        </div>
+                    </div>
+                    <button name="button" class="btn btn-warning" ng-click="save(fablabName)" translate>{{ 'save' }}</button>
+                </form>
+            </div>
+
+            <div class="col-md-4 col-md-offset-1">
+                <form role="form" novalidate>
+                    <h4 class="control-label m-r" translate>{{ 'title_concordance' }}</h4>
+                    <div class="form-group">
+                        <input type="radio" name="nameGenre" id="nameGenreMale" ng-model="nameGenre.value" ng-value="'male'" />
+                        <label for="nameGenreMale">{{ 'male' | translate }} <span style="font-weight: normal">{{ 'eg' | translate }} <cite>{{ 'about' | translate }} <strong translate>{{ 'male_preposition' }}</strong> {{fablabName.value}}</cite></span></label>
+                        <br/>
+                        <input type="radio" name="nameGenre" id="nameGenreFemale" ng-model="nameGenre.value" ng-value="'female'" />
+                        <label for="nameGenreFemale">{{ 'female' | translate }} <span style="font-weight: normal">{{ 'eg' | translate }} <cite>{{ 'about' | translate }} <strong translate>{{ 'female_preposition' }}</strong> {{fablabName.value}}</cite></span></label>
+                    </div>
+                    <button name="button" class="btn btn-warning" ng-click="save(nameGenre)" translate>{{ 'save' }}</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="panel panel-default m-t-lg">
+    <div class="panel-heading">
+        <span class="font-sbold" translate>{{ 'customize_information_messages' }}</span>
+    </div>
+    <div class="panel-body">
+
+
+        <div class="row">
+            <div class="col-md-3">
+                <h4 translate>{{ 'message_of_the_machine_booking_page' }}</h4>
+                <div ng-model="machineExplicationsAlert.value" medium-editor options='{"placeholder": "{{ "type_the_message_content" | translate }}",
+                      "buttons": ["bold", "italic", "unorderedlist", "header2" ]
+                      }'>
+
+                </div>
+                <button name="button" class="btn btn-warning" ng-click="save(machineExplicationsAlert)" translate>{{ 'save' }}</button>
+            </div>
+            <div class="col-md-3">
+                <h4 translate>{{ 'warning_message_of_the_training_booking_page'}}</h4>
+                <div ng-model="trainingExplicationsAlert.value" medium-editor options='{"placeholder": "{{ "type_the_message_content" | translate }}",
+                      "buttons": ["bold", "italic", "unorderedlist", "header2" ]
+                      }'>
+
+                </div>
+                <button name="button" class="btn btn-warning" ng-click="save(trainingExplicationsAlert)" translate>{{ 'save' }}</button>
+            </div>
+            <div class="col-md-3">
+                <h4 translate>{{ 'information_message_of_the_training_reservation_page'}}</h4>
+                <div ng-model="trainingInformationMessage.value" medium-editor options='{"placeholder": "{{ "type_the_message_content" | translate }}",
+                        "buttons": ["bold", "italic", "unorderedlist", "header2" ]
+                      }'>
+
+                </div>
+                <button name="button" class="btn btn-warning" ng-click="save(trainingInformationMessage)" translate>{{ 'save' }}</button>
+            </div>
+            <div class="col-md-3">
+                <h4 translate>{{ 'message_of_the_subscriptions_page' }}</h4>
+                <div ng-model="subscriptionExplicationsAlert.value" medium-editor options='{"placeholder": "{{ "type_the_message_content" | translate }}",
+                      "buttons": ["bold", "italic", "unorderedlist", "header2" ]
+                      }'>
+                </div>
+                <button name="button" class="btn btn-warning" ng-click="save(subscriptionExplicationsAlert)" translate>{{ 'save' }}</button>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-3">
+                <h4 translate>{{ 'message_of_the_event_page_relative_to_the_reduced_rate_availability_conditions' }}</h4>
+                <div ng-model="eventReducedAmountAlert.value" medium-editor options='{"placeholder": "{{ "type_the_message_content" | translate }}",
+                                "buttons": ["bold", "italic", "unorderedlist", "header2" ]
+                          }'>
+                </div>
+                <button name="button" class="btn btn-warning" ng-click="save(eventReducedAmountAlert)" translate>{{ 'save' }}</button>
+            </div>
+        </div>
+
+    </div>
+</div>
+
+<div class="panel panel-default m-t-lg">
+    <div class="panel-heading">
+        <span class="font-sbold" translate>{{ 'legal_documents'}}</span>
+    </div>
+    <div class="panel-body">
+        <div class="alert alert-warning m-t" translate>
+            {{ 'if_these_documents_are_not_filled_no_consent_about_them_will_be_asked_to_the_user' }}
+        </div>
+        <div class="row">
+            <form class="col-md-6" method="post" action="{{actionUrl.cgv}}" novalidate name="cgvForm" ng-upload="submited(content)" ng-submit="addLoader('cgv')" upload-options-enable-rails-csrf="true" unsaved-warning-form>
+                <input type="hidden" name="custom_asset[name]" value="cgv-file">
+                <input name="_method" type="hidden" ng-value="methods.cgv">
+                <label for="tnc_file" class="control-label m-r" translate>{{ 'general_terms_and_conditions_(T&C)' }}</label>
+                <div class="form-group">
+                    <div class="fileinput input-group" data-provides="fileinput" ng-class="fileinputClass(cgvFile.custom_asset_file_attributes.attachment)">
+                        <div class="form-control" data-trigger="fileinput">
+                            <i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename">{{cgvFile.custom_asset_file_attributes.attachment}}</span>
+                        </div>
+                                      <span class="input-group-addon btn btn-default btn-file">
+                                          <span class="fileinput-new" translate>{{ 'browse' }}</span>
+                                          <span class="fileinput-exists" translate>{{ 'change' }}</span>
+                                          <input type="file"
+                                                 id="tnc_file"
+                                                 name="custom_asset[custom_asset_file_attributes][attachment]"
+                                                 accept=".pdf"
+                                                 required />
+                                      </span>
+                    </div>
+                </div>
+                <button name="button" type="submit" ng-class="{'btn-loading':loader.cgv}" ng-disabled="cgvForm.$invalid" class="btn btn-warning" translate>{{ 'save' }}</button>
+            </form>
+        </div>
+        <div class="row m-t-xl">
+            <form class="col-md-6" method="post" action="{{actionUrl.cgu}}" novalidate name="cguForm" ng-upload="submited(content)" ng-submit="addLoader('cgu')" upload-options-enable-rails-csrf="true" unsaved-warning-form>
+                <input type="hidden" name="custom_asset[name]" value="cgu-file">
+                <input name="_method" type="hidden" ng-value="methods.cgu">
+                <label for="tos_file" class="control-label m-r" translate>{{ 'terms_of_service_(TOS)' }}</label>
+                <div class="form-group">
+                    <div class="fileinput input-group" data-provides="fileinput" ng-class="fileinputClass(cguFile.custom_asset_file_attributes.attachment)">
+                        <div class="form-control" data-trigger="fileinput">
+                            <i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename">{{cguFile.custom_asset_file_attributes.attachment}}</span>
+                        </div>
+                                      <span class="input-group-addon btn btn-default btn-file">
+                                          <span class="fileinput-new" translate>{{ 'browse' }}</span>
+                                          <span class="fileinput-exists" translate>{{ 'change' }}</span>
+                                          <input type="file"
+                                                 id="tos_file"
+                                                 name="custom_asset[custom_asset_file_attributes][attachment]"
+                                                 accept=".pdf"
+                                                 required />
+                                      </span>
+                    </div>
+                </div>
+                <button name="button" type="submit" ng-class="{'btn-loading':loader.cgu}" ng-disabled="cguForm.$invalid" class="btn btn-warning" translate>{{ 'save' }}</button>
+            </form>
+        </div>
+    </div>
+</div>
+
+<div class="panel panel-default m-t-lg">
+    <div class="panel-heading">
+        <span class="font-sbold" translate>{{ 'customize_the_graphics' }}</span>
+    </div>
+    <div class="panel-body">
+        <div class="alert alert-warning m-t">
+            <span translate>{{ 'for_an_optimal_rendering_the_logo_image_must_be_at_the_PNG_format_with_a_transparent_background_and_with_an_aspect_ratio_3.5_times_wider_than_the_height' }}</span><br/>
+            <span translate>{{ 'concerning_the_favicon_it_must_be_at_ICO_format_with_a_size_of_16x16_pixels' }}</span><br/>
+            <br/>
+            <span translate>{{ 'remember_to_refresh_the_page_for_the_changes_to_take_effect' }}</span>
+        </div>
+        <div class="row">
+            <div class="col-md-4">
+                <form class="custom-logo-container" method="post" action="{{actionUrl.logo}}" novalidate name="logoForm" ng-upload="submited(content)" upload-options-enable-rails-csrf="true" unsaved-warning-form>
+                    <input type="hidden" name="custom_asset[name]" value="logo-file">
+                    <input name="_method" type="hidden" ng-value="methods.logo">
+                    <h3 class="m-l" translate>{{ 'logo_(white_background)' }}</h3>
+                    <div class="custom-logo" style="background-image: url({{customLogo}});">
+                        <img src="data:image/png;base64," data-src="holder.js/100%x100%/text:&#xf03e;/font:FontAwesome/icon-xs" bs-holder ng-show="!customLogo" class="img-responsive">
+                        <img base-sixty-four-image="customLogo" ng-show="customLogo && customLogo.base64">
+                        <img ng-src="{{customLogo.custom_asset_file_attributes.attachment_url}}" alt="{{customLogo.custom_asset_file_attributes.attachment}}" ng-show="customLogo && customLogo.custom_asset_file_attributes" />
+                        <div class="tools-box">
+                            <div class="btn-group">
+                                <div class="btn btn-default btn-file">
+                                    <i class="fa fa-edit"></i> {{ 'change_the_logo' | translate }}
+                                    <input type="file"
+                                           accept="image/png,image/x-png"
+                                           name="custom_asset[custom_asset_file_attributes][attachment]"
+                                           ng-model="customLogo"
+                                           base-sixty-four-input
+                                           required />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <button name="button" type="submit" class="btn btn-warning m-t m-l" ng-disabled="logoForm.$invalid" translate>{{ 'save' }}</button>
+                </form>
+            </div>
+            <div class="col-md-4">
+                <form class="custom-logo-container" method="post" action="{{actionUrl.logoBlack}}" novalidate name="logoBlackForm" ng-upload="submited(content)" upload-options-enable-rails-csrf="true" unsaved-warning-form>
+                    <input type="hidden" name="custom_asset[name]" value="logo-black-file">
+                    <input name="_method" type="hidden" ng-value="methods.logoBlack">
+                    <h3 class="m-l" translate>{{ 'logo_(black_background)' }}</h3>
+                    <div class="custom-logo bg-dark" style="background-image: url({{customLogoBlack}});">
+                        <img src="data:image/png;base64," data-src="holder.js/100%x100%/text:&#xf03e;/font:FontAwesome/icon-black-xs" bs-holder ng-show="!customLogoBlack" class="img-responsive">
+                        <img base-sixty-four-image="customLogoBlack" ng-show="customLogoBlack && customLogoBlack.base64">
+                        <img ng-src="{{customLogoBlack.custom_asset_file_attributes.attachment_url}}" alt="{{customLogoBlack.custom_asset_file_attributes.attachment}}" ng-show="customLogoBlack && customLogoBlack.custom_asset_file_attributes" />
+                        <div class="tools-box">
+                            <div class="btn-group">
+                                <div class="btn btn-default btn-file">
+                                    <i class="fa fa-edit"></i> {{ 'change_the_logo' | translate }}
+                                    <input type="file"
+                                           accept="image/png,image/x-png"
+                                           name="custom_asset[custom_asset_file_attributes][attachment]"
+                                           ng-model="customLogoBlack"
+                                           base-sixty-four-input
+                                           required />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <button name="button" type="submit" class="btn btn-warning m-t m-l" ng-disabled="logoBlackForm.$invalid" translate>{{ 'save' }}</button>
+                </form>
+            </div>
+            <div class="col-md-4">
+                <form class="custom-favicon-container" method="post" action="{{actionUrl.favicon}}" novalidate name="faviconForm" ng-upload="submited(content)" upload-options-enable-rails-csrf="true" unsaved-warning-form>
+                    <input type="hidden" name="custom_asset[name]" value="favicon-file">
+                    <input name="_method" type="hidden" ng-value="methods.favicon">
+                    <h3 class="m-l" translate>{{ 'favicon' }}</h3>
+                    <div class="custom-favicon" style="background-image: url({{customFavicon}});">
+                        <img src="data:image/png;base64," data-src="holder.js/32x32/text:&#xf03e;/font:FontAwesome/icon-xs" bs-holder ng-show="!customFavicon" class="img-responsive">
+                        <img base-sixty-four-image="customFavicon" ng-show="customFavicon && customFavicon.base64">
+                        <img ng-src="{{customFavicon.custom_asset_file_attributes.attachment_url}}" alt="{{customFavicon.custom_asset_file_attributes.attachment}}" ng-show="customFavicon && customFavicon.custom_asset_file_attributes" />
+                        <div class="tools-box">
+                            <div class="btn-group">
+                                <div class="btn btn-default btn-file">
+                                    <i class="fa fa-edit"></i> {{ 'change_the_favicon' | translate }}
+                                    <input type="file"
+                                           accept="image/png,image/x-png,image/x-icon,image/ico,image/vnd.microsoft.icon"
+                                           name="custom_asset[custom_asset_file_attributes][attachment]"
+                                           ng-model="customFavicon"
+                                           base-sixty-four-input
+                                           required />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <button name="button" type="submit" class="btn btn-warning m-t m-l" ng-disabled="faviconForm.$invalid" translate>{{ 'save' }}</button>
+                </form>
+            </div>
+        </div>
+        <div class="row m-t m-l-xs">
+            <div class="col-md-4">
+                <h4 translate>{{ 'main_colour' }}</h4>
+                <form role="form" class="form-inline" name="mainColorForm" novalidate>
+                    <div class="form-group">
+                        <div class="input-group">
+                            <div class="input-group-addon">
+                                <i class="fa fa-paint-brush"></i>
+                            </div>
+                            <input type="text" minicolors ng-model="mainColorSetting.value" class="form-control" placeholder="{{ 'primary' | translate}}"/>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <button name="button" class="btn btn-warning" ng-click="save(mainColorSetting)" translate>{{ 'save' }}</button>
+                    </div>
+                </form>
+            </div>
+            <div class="col-md-4">
+                <h4 translate>{{ 'secondary_colour' }}</h4>
+                <form role="form" class="form-inline" name="secondColorForm" novalidate>
+                    <div class="form-group">
+                        <div class="input-group">
+                            <div class="input-group-addon">
+                                <i class="fa fa-paint-brush"></i>
+                            </div>
+                            <input type="text" minicolors ng-model="secondColorSetting.value" class="form-control" placeholder="{{ 'secondary' | translate}}"/>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <button name="button" class="btn btn-warning" ng-click="save(secondColorSetting)" translate>{{ 'save' }}</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+        <div class="row m-t">
+            <div class="col-md-4">
+                <form class="custom-profile-image-container" method="post" action="{{actionUrl.profileImage}}" novalidate name="profileImageForm" ng-upload="submited(content)" upload-options-enable-rails-csrf="true" unsaved-warning-form>
+                    <input type="hidden" name="custom_asset[name]" value="profile-image-file">
+                    <input name="_method" type="hidden" ng-value="methods.profileImage">
+                    <h3 class="m-l" translate>{{ 'background_picture_of_the_profile_banner' }}</h3>
+                    <div class="custom-profile-image" style="background-image: url({{profileImage}});">
+                        <img src="data:image/png;base64," data-src="holder.js/100%x100%/text:&#xf03e;/font:FontAwesome/icon-xs" bs-holder ng-show="!profileImage" class="img-responsive">
+                        <img base-sixty-four-image="profileImage" ng-show="profileImage && profileImage.base64">
+                        <img ng-src="{{profileImage.custom_asset_file_attributes.attachment_url}}" alt="{{profileImage.custom_asset_file_attributes.attachment}}" ng-show="profileImage && profileImage.custom_asset_file_attributes" />
+                        <div class="tools-box">
+                            <div class="btn-group">
+                                <div class="btn btn-default btn-file">
+                                    <i class="fa fa-edit"></i> {{ 'change_the_profile_banner' | translate }}
+                                    <input type="file"
+                                           accept="image/png,image/x-png"
+                                           name="custom_asset[custom_asset_file_attributes][attachment]"
+                                           ng-model="profileImage"
+                                           base-sixty-four-input
+                                           required />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <button name="button" type="submit" class="btn btn-warning m-t m-l" ng-disabled="profileImageForm.$invalid" translate>{{ 'save' }}</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/app/assets/templates/admin/settings/home_page.html b/app/assets/templates/admin/settings/home_page.html
new file mode 100644
index 000000000..3f6ee30a1
--- /dev/null
+++ b/app/assets/templates/admin/settings/home_page.html
@@ -0,0 +1,29 @@
+<div class="panel panel-default m-t-md">
+    <div class="panel-body">
+        <div class="row">
+            <div class="col-md-6">
+                <h4 translate>{{ 'news_of_the_home_page' }}</h4>
+                <div ng-model="homeBlogpostSetting.value" class="well" medium-editor options='{"placeholder": "{{ "type_your_news_here" | translate }}",
+                  "buttons": ["bold", "italic", "anchor", "header1", "header2" ]}'></div>
+                <span class="help-block text-info text-xs"><i class="fa fa-lightbulb-o"></i> {{ 'leave_it_empty_to_not_bring_up_any_news_on_the_home_page' | translate }}</span>
+                <button name="button" class="btn btn-warning" ng-click="save(homeBlogpostSetting)" translate>{{ 'save' }}</button>
+            </div>
+            <div class="col-md-6">
+                <h4 translate>{{ 'twitter_stream' }}</h4>
+                <form role="form" class="form-inline" name="twitterForm" novalidate>
+                    <div class="form-group">
+                        <div class="input-group">
+                            <div class="input-group-addon">
+                                <i class="fa fa-twitter"></i>
+                            </div>
+                            <input type="text" ng-model="twitterSetting.value" class="form-control" placeholder="{{ 'name_of_the_twitter_account' | translate }}"/>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <button name="button" class="btn btn-warning" ng-click="save(twitterSetting)" translate>{{ 'save' }}</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/app/assets/templates/admin/settings/index.html b/app/assets/templates/admin/settings/index.html
deleted file mode 100644
index 821060501..000000000
--- a/app/assets/templates/admin/settings/index.html
+++ /dev/null
@@ -1,491 +0,0 @@
-<section class="heading b-b">
-  <div class="row no-gutter">
-    <div class="col-xs-2 col-sm-2 col-md-1">
-      <section class="heading-btn">
-        <a href="#" ng-click="backPrevLocation($event)"><i class="fa fa-long-arrow-left "></i></a>
-      </section>
-    </div>
-    <div class="col-xs-10 col-sm-10 col-md-8 b-l">
-      <section class="heading-title">
-        <h1 translate>{{ 'customize_the_application' }}</h1>
-      </section>
-    </div>
-
-  </div>
-</section>
-
-<section class="m-lg">
-  <div class="row">
-
-    <div class="col-md-12">
-      <uib-tabset justified="true">
-
-        <uib-tab heading="{{ 'general' | translate }}">
-            <div class="panel panel-default m-t-md">
-                <div class="panel-heading">
-                    <span class="font-sbold" translate>{{ 'title' }}</span>
-                </div>
-                <div class="panel-body">
-                    <div class="row m-t-lg">
-                        <div class="col-md-4">
-                            <form role="form" novalidate>
-                                <label for="fablabName" class="control-label m-r" translate>{{ 'fablab_title' }}</label>
-                                <div class="form-group">
-                                    <div class="input-group">
-                                        <div class="input-group-addon"><i class="fa fa-font"></i></div>
-                                        <input type="text" id="fablabName" ng-model="fablabName.value" class="form-control" placeholder="{{ 'fablab_name' | translate }}"/>
-                                    </div>
-                                </div>
-                                <button name="button" class="btn btn-warning" ng-click="save(fablabName)" translate>{{ 'save' }}</button>
-                            </form>
-                        </div>
-
-                        <div class="col-md-4 col-md-offset-1">
-                            <form role="form" novalidate>
-                                <h4 class="control-label m-r" translate>{{ 'title_concordance' }}</h4>
-                                <div class="form-group">
-                                    <input type="radio" name="nameGenre" id="nameGenreMale" ng-model="nameGenre.value" ng-value="'male'" />
-                                    <label for="nameGenreMale">{{ 'male' | translate }} <span style="font-weight: normal">{{ 'eg' | translate }} <cite>{{ 'about' | translate }} <strong translate>{{ 'male_preposition' }}</strong> {{fablabName.value}}</cite></span></label>
-                                    <br/>
-                                    <input type="radio" name="nameGenre" id="nameGenreFemale" ng-model="nameGenre.value" ng-value="'female'" />
-                                    <label for="nameGenreFemale">{{ 'female' | translate }} <span style="font-weight: normal">{{ 'eg' | translate }} <cite>{{ 'about' | translate }} <strong translate>{{ 'female_preposition' }}</strong> {{fablabName.value}}</cite></span></label>
-                                </div>
-                                <button name="button" class="btn btn-warning" ng-click="save(nameGenre)" translate>{{ 'save' }}</button>
-                            </form>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="panel panel-default m-t-lg">
-                <div class="panel-heading">
-                  <span class="font-sbold" translate>{{ 'customize_information_messages' }}</span>
-                </div>
-                <div class="panel-body">
-
-
-                  <div class="row">
-                    <div class="col-md-3">
-                      <h4 translate>{{ 'message_of_the_machine_booking_page' }}</h4>
-                      <div ng-model="machineExplicationsAlert.value" medium-editor options='{"placeholder": "{{ "type_the_message_content" | translate }}",
-                      "buttons": ["bold", "italic", "unorderedlist", "header2" ]
-                      }'>
-
-                      </div>
-                      <button name="button" class="btn btn-warning" ng-click="save(machineExplicationsAlert)" translate>{{ 'save' }}</button>
-                    </div>
-                    <div class="col-md-3">
-                      <h4 translate>{{ 'warning_message_of_the_training_booking_page'}}</h4>
-                      <div ng-model="trainingExplicationsAlert.value" medium-editor options='{"placeholder": "{{ "type_the_message_content" | translate }}",
-                      "buttons": ["bold", "italic", "unorderedlist", "header2" ]
-                      }'>
-
-                      </div>
-                      <button name="button" class="btn btn-warning" ng-click="save(trainingExplicationsAlert)" translate>{{ 'save' }}</button>
-                    </div>
-                    <div class="col-md-3">
-                      <h4 translate>{{ 'information_message_of_the_training_reservation_page'}}</h4>
-                      <div ng-model="trainingInformationMessage.value" medium-editor options='{"placeholder": "{{ "type_the_message_content" | translate }}",
-                        "buttons": ["bold", "italic", "unorderedlist", "header2" ]
-                      }'>
-
-                      </div>
-                      <button name="button" class="btn btn-warning" ng-click="save(trainingInformationMessage)" translate>{{ 'save' }}</button>
-                    </div>
-                    <div class="col-md-3">
-                      <h4 translate>{{ 'message_of_the_subscriptions_page' }}</h4>
-                      <div ng-model="subscriptionExplicationsAlert.value" medium-editor options='{"placeholder": "{{ "type_the_message_content" | translate }}",
-                      "buttons": ["bold", "italic", "unorderedlist", "header2" ]
-                      }'>
-                      </div>
-                      <button name="button" class="btn btn-warning" ng-click="save(subscriptionExplicationsAlert)" translate>{{ 'save' }}</button>
-                    </div>
-                  </div>
-                  <div class="row">
-                      <div class="col-md-3">
-                          <h4 translate>{{ 'message_of_the_event_page_relative_to_the_reduced_rate_availability_conditions' }}</h4>
-                          <div ng-model="eventReducedAmountAlert.value" medium-editor options='{"placeholder": "{{ "type_the_message_content" | translate }}",
-                                "buttons": ["bold", "italic", "unorderedlist", "header2" ]
-                          }'>
-                          </div>
-                          <button name="button" class="btn btn-warning" ng-click="save(eventReducedAmountAlert)" translate>{{ 'save' }}</button>
-                      </div>
-                  </div>
-
-                </div>
-            </div>
-
-            <div class="panel panel-default m-t-lg">
-                <div class="panel-heading">
-                    <span class="font-sbold" translate>{{ 'legal_documents'}}</span>
-                </div>
-                <div class="panel-body">
-                    <div class="alert alert-warning m-t" translate>
-                        {{ 'if_these_documents_are_not_filled_no_consent_about_them_will_be_asked_to_the_user' }}
-                    </div>
-                    <div class="row">
-                        <form class="col-md-6" method="post" action="{{actionUrl.cgv}}" novalidate name="cgvForm" ng-upload="submited(content)" ng-submit="addLoader('cgv')" upload-options-enable-rails-csrf="true" unsaved-warning-form>
-                            <input type="hidden" name="custom_asset[name]" value="cgv-file">
-                            <input name="_method" type="hidden" ng-value="methods.cgv">
-                            <label for="moveDelay" class="control-label m-r" translate>{{ 'general_terms_and_conditions_(T&C)' }}</label>
-                            <div class="form-group">
-                                <div class="fileinput input-group" data-provides="fileinput" ng-class="fileinputClass(cgvFile.custom_asset_file_attributes.attachment)">
-                                    <div class="form-control" data-trigger="fileinput">
-                                        <i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename">{{cgvFile.custom_asset_file_attributes.attachment}}</span>
-                                    </div>
-                                      <span class="input-group-addon btn btn-default btn-file">
-                                          <span class="fileinput-new" translate>{{ 'browse' }}</span>
-                                          <span class="fileinput-exists" translate>{{ 'change' }}</span>
-                                          <input type="file"
-                                                 name="custom_asset[custom_asset_file_attributes][attachment]"
-                                                 accept=".pdf"
-                                                 required />
-                                      </span>
-                                </div>
-                            </div>
-                            <button name="button" type="submit" ng-class="{'btn-loading':loader.cgv}" ng-disabled="cgvForm.$invalid" class="btn btn-warning" translate>{{ 'save' }}</button>
-                        </form>
-                    </div>
-                    <div class="row m-t-xl">
-                        <form class="col-md-6" method="post" action="{{actionUrl.cgu}}" novalidate name="cguForm" ng-upload="submited(content)" ng-submit="addLoader('cgu')" upload-options-enable-rails-csrf="true" unsaved-warning-form>
-                            <input type="hidden" name="custom_asset[name]" value="cgu-file">
-                            <input name="_method" type="hidden" ng-value="methods.cgu">
-                            <label for="moveDelay" class="control-label m-r" translate>{{ 'terms_of_service_(TOS)' }}</label>
-                            <div class="form-group">
-                                <div class="fileinput input-group" data-provides="fileinput" ng-class="fileinputClass(cguFile.custom_asset_file_attributes.attachment)">
-                                    <div class="form-control" data-trigger="fileinput">
-                                        <i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename">{{cguFile.custom_asset_file_attributes.attachment}}</span>
-                                    </div>
-                                      <span class="input-group-addon btn btn-default btn-file">
-                                          <span class="fileinput-new" translate>{{ 'browse' }}</span>
-                                          <span class="fileinput-exists" translate>{{ 'change' }}</span>
-                                          <input type="file"
-                                                 name="custom_asset[custom_asset_file_attributes][attachment]"
-                                                 accept=".pdf"
-                                                 required />
-                                      </span>
-                                </div>
-                            </div>
-                            <button name="button" type="submit" ng-class="{'btn-loading':loader.cgu}" ng-disabled="cguForm.$invalid" class="btn btn-warning" translate>{{ 'save' }}</button>
-                        </form>
-                    </div>
-                </div>
-            </div>
-
-            <div class="panel panel-default m-t-lg">
-                <div class="panel-heading">
-                    <span class="font-sbold" translate>{{ 'customize_the_graphics' }}</span>
-                </div>
-                <div class="panel-body">
-                    <div class="alert alert-warning m-t">
-                        <span translate>{{ 'for_an_optimal_rendering_the_logo_image_must_be_at_the_PNG_format_with_a_transparent_background_and_with_an_aspect_ratio_3.5_times_wider_than_the_height' }}</span><br/>
-                        <span translate>{{ 'concerning_the_favicon_it_must_be_at_ICO_format_with_a_size_of_16x16_pixels' }}</span><br/>
-                        <br/>
-                        <span translate>{{ 'remember_to_refresh_the_page_for_the_changes_to_take_effect' }}</span>
-                    </div>
-                    <div class="row">
-                        <div class="col-md-4">
-                            <form class="custom-logo-container" method="post" action="{{actionUrl.logo}}" novalidate name="logoForm" ng-upload="submited(content)" upload-options-enable-rails-csrf="true" unsaved-warning-form>
-                                <input type="hidden" name="custom_asset[name]" value="logo-file">
-                                <input name="_method" type="hidden" ng-value="methods.logo">
-                                <h3 class="m-l" translate>{{ 'logo_(white_background)' }}</h3>
-                                <div class="custom-logo" style="background-image: url({{customLogo}});">
-                                    <img src="data:image/png;base64," data-src="holder.js/100%x100%/text:&#xf03e;/font:FontAwesome/icon-xs" bs-holder ng-show="!customLogo" class="img-responsive">
-                                    <img base-sixty-four-image="customLogo" ng-show="customLogo && customLogo.base64">
-                                    <img ng-src="{{customLogo.custom_asset_file_attributes.attachment_url}}" alt="{{customLogo.custom_asset_file_attributes.attachment}}" ng-show="customLogo && customLogo.custom_asset_file_attributes" />
-                                    <div class="tools-box">
-                                        <div class="btn-group">
-                                            <div class="btn btn-default btn-file">
-                                                <i class="fa fa-edit"></i> {{ 'change_the_logo' | translate }}
-                                                <input type="file"
-                                                       accept="image/png,image/x-png"
-                                                       name="custom_asset[custom_asset_file_attributes][attachment]"
-                                                       ng-model="customLogo"
-                                                       base-sixty-four-input
-                                                       required />
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <button name="button" type="submit" class="btn btn-warning m-t m-l" ng-disabled="logoForm.$invalid" translate>{{ 'save' }}</button>
-                            </form>
-                        </div>
-                        <div class="col-md-4">
-                            <form class="custom-logo-container" method="post" action="{{actionUrl.logoBlack}}" novalidate name="logoBlackForm" ng-upload="submited(content)" upload-options-enable-rails-csrf="true" unsaved-warning-form>
-                                <input type="hidden" name="custom_asset[name]" value="logo-black-file">
-                                <input name="_method" type="hidden" ng-value="methods.logoBlack">
-                                <h3 class="m-l" translate>{{ 'logo_(black_background)' }}</h3>
-                                <div class="custom-logo bg-dark" style="background-image: url({{customLogoBlack}});">
-                                    <img src="data:image/png;base64," data-src="holder.js/100%x100%/text:&#xf03e;/font:FontAwesome/icon-black-xs" bs-holder ng-show="!customLogoBlack" class="img-responsive">
-                                    <img base-sixty-four-image="customLogoBlack" ng-show="customLogoBlack && customLogoBlack.base64">
-                                    <img ng-src="{{customLogoBlack.custom_asset_file_attributes.attachment_url}}" alt="{{customLogoBlack.custom_asset_file_attributes.attachment}}" ng-show="customLogoBlack && customLogoBlack.custom_asset_file_attributes" />
-                                    <div class="tools-box">
-                                        <div class="btn-group">
-                                            <div class="btn btn-default btn-file">
-                                                <i class="fa fa-edit"></i> {{ 'change_the_logo' | translate }}
-                                                <input type="file"
-                                                       accept="image/png,image/x-png"
-                                                       name="custom_asset[custom_asset_file_attributes][attachment]"
-                                                       ng-model="customLogoBlack"
-                                                       base-sixty-four-input
-                                                       required />
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <button name="button" type="submit" class="btn btn-warning m-t m-l" ng-disabled="logoBlackForm.$invalid" translate>{{ 'save' }}</button>
-                            </form>
-                        </div>
-                        <div class="col-md-4">
-                            <form class="custom-favicon-container" method="post" action="{{actionUrl.favicon}}" novalidate name="faviconForm" ng-upload="submited(content)" upload-options-enable-rails-csrf="true" unsaved-warning-form>
-                                <input type="hidden" name="custom_asset[name]" value="favicon-file">
-                                <input name="_method" type="hidden" ng-value="methods.favicon">
-                                <h3 class="m-l" translate>{{ 'favicon' }}</h3>
-                                <div class="custom-favicon" style="background-image: url({{customFavicon}});">
-                                    <img src="data:image/png;base64," data-src="holder.js/32x32/text:&#xf03e;/font:FontAwesome/icon-xs" bs-holder ng-show="!customFavicon" class="img-responsive">
-                                    <img base-sixty-four-image="customFavicon" ng-show="customFavicon && customFavicon.base64">
-                                    <img ng-src="{{customFavicon.custom_asset_file_attributes.attachment_url}}" alt="{{customFavicon.custom_asset_file_attributes.attachment}}" ng-show="customFavicon && customFavicon.custom_asset_file_attributes" />
-                                    <div class="tools-box">
-                                        <div class="btn-group">
-                                            <div class="btn btn-default btn-file">
-                                                <i class="fa fa-edit"></i> {{ 'change_the_favicon' | translate }}
-                                                <input type="file"
-                                                       accept="image/png,image/x-png,image/x-icon,image/ico,image/vnd.microsoft.icon"
-                                                       name="custom_asset[custom_asset_file_attributes][attachment]"
-                                                       ng-model="customFavicon"
-                                                       base-sixty-four-input
-                                                       required />
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <button name="button" type="submit" class="btn btn-warning m-t m-l" ng-disabled="faviconForm.$invalid" translate>{{ 'save' }}</button>
-                            </form>
-                        </div>
-                    </div>
-                    <div class="row m-t m-l-xs">
-                        <div class="col-md-4">
-                            <h4 translate>{{ 'main_colour' }}</h4>
-                            <form role="form" class="form-inline" name="mainColorForm" novalidate>
-                                <div class="form-group">
-                                    <div class="input-group">
-                                        <div class="input-group-addon">
-                                            <i class="fa fa-paint-brush"></i>
-                                        </div>
-                                        <input type="text" minicolors ng-model="mainColorSetting.value" class="form-control" placeholder="{{ 'primary' | translate}}"/>
-                                    </div>
-                                </div>
-                                <div class="form-group">
-                                    <button name="button" class="btn btn-warning" ng-click="save(mainColorSetting)" translate>{{ 'save' }}</button>
-                                </div>
-                            </form>
-                        </div>
-                        <div class="col-md-4">
-                            <h4 translate>{{ 'secondary_colour' }}</h4>
-                            <form role="form" class="form-inline" name="secondColorForm" novalidate>
-                                <div class="form-group">
-                                    <div class="input-group">
-                                        <div class="input-group-addon">
-                                            <i class="fa fa-paint-brush"></i>
-                                        </div>
-                                        <input type="text" minicolors ng-model="secondColorSetting.value" class="form-control" placeholder="{{ 'secondary' | translate}}"/>
-                                    </div>
-                                </div>
-                                <div class="form-group">
-                                    <button name="button" class="btn btn-warning" ng-click="save(secondColorSetting)" translate>{{ 'save' }}</button>
-                                </div>
-                            </form>
-                        </div>
-                    </div>
-                    <div class="row m-t">
-                        <div class="col-md-4">
-                            <form class="custom-profile-image-container" method="post" action="{{actionUrl.profileImage}}" novalidate name="profileImageForm" ng-upload="submited(content)" upload-options-enable-rails-csrf="true" unsaved-warning-form>
-                                <input type="hidden" name="custom_asset[name]" value="profile-image-file">
-                                <input name="_method" type="hidden" ng-value="methods.profileImage">
-                                <h3 class="m-l" translate>{{ 'background_picture_of_the_profile_banner' }}</h3>
-                                <div class="custom-profile-image" style="background-image: url({{profileImage}});">
-                                    <img src="data:image/png;base64," data-src="holder.js/100%x100%/text:&#xf03e;/font:FontAwesome/icon-xs" bs-holder ng-show="!profileImage" class="img-responsive">
-                                    <img base-sixty-four-image="profileImage" ng-show="profileImage && profileImage.base64">
-                                    <img ng-src="{{profileImage.custom_asset_file_attributes.attachment_url}}" alt="{{profileImage.custom_asset_file_attributes.attachment}}" ng-show="profileImage && profileImage.custom_asset_file_attributes" />
-                                    <div class="tools-box">
-                                        <div class="btn-group">
-                                            <div class="btn btn-default btn-file">
-                                                <i class="fa fa-edit"></i> {{ 'change_the_profile_banner' | translate }}
-                                                <input type="file"
-                                                       accept="image/png,image/x-png"
-                                                       name="custom_asset[custom_asset_file_attributes][attachment]"
-                                                       ng-model="profileImage"
-                                                       base-sixty-four-input
-                                                       required />
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <button name="button" type="submit" class="btn btn-warning m-t m-l" ng-disabled="profileImageForm.$invalid" translate>{{ 'save' }}</button>
-                            </form>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </uib-tab>
-
-        <uib-tab heading="{{ 'home_page' | translate }}">
-          <div class="panel panel-default m-t-md">
-            <div class="panel-body">
-              <div class="row">
-                <div class="col-md-6">
-                  <h4 translate>{{ 'news_of_the_home_page' }}</h4>
-                  <div ng-model="homeBlogpostSetting.value" class="well" medium-editor options='{"placeholder": "{{ "type_your_news_here" | translate }}",
-                  "buttons": ["bold", "italic", "anchor", "header1", "header2" ]}'></div>
-                  <span class="help-block text-info text-xs"><i class="fa fa-lightbulb-o"></i> {{ 'leave_it_empty_to_not_bring_up_any_news_on_the_home_page' | translate }}</span>
-                  <button name="button" class="btn btn-warning" ng-click="save(homeBlogpostSetting)" translate>{{ 'save' }}</button>
-                </div>
-                <div class="col-md-6">
-                  <h4 translate>{{ 'twitter_stream' }}</h4>
-                  <form role="form" class="form-inline" name="twitterForm" novalidate>
-                    <div class="form-group">
-                      <div class="input-group">
-                        <div class="input-group-addon">
-                          <i class="fa fa-twitter"></i>
-                        </div>
-                        <input type="text" ng-model="twitterSetting.value" class="form-control" placeholder="{{ 'name_of_the_twitter_account' | translate }}"/>
-                      </div>
-                    </div>
-                    <div class="form-group">
-                      <button name="button" class="btn btn-warning" ng-click="save(twitterSetting)" translate>{{ 'save' }}</button>
-                    </div>
-                  </form>
-                </div>
-              </div>
-            </div>
-          </div>
-        </uib-tab>
-
-        <uib-tab heading="{{ 'about' | translate }}">
-          <div class="panel panel-default m-t-md">
-            <div class="panel-body">
-
-              <div class="row m-t-lg m-b-lg">
-                <div class="col-sm-offset-4 col-sm-4">
-                  <h1 ng-model="aboutTitleSetting.value" medium-editor options='{"placeholder": "{{ "title_of_the_about_page" | translate }}", "disableToolbar": true, "disableReturn": false}' class="text-u-c"></h1>
-                  <span class="help-block text-info text-xs"><i class="fa fa-lightbulb-o"></i> {{ 'shift_enter_to_force_carriage_return' | translate }}</span>
-                  <button name="button" class="btn btn-warning" ng-click="save(aboutTitleSetting)" translate>{{ 'save' }}</button>
-                </div>
-
-              </div>
-
-              <div class="row">
-                <div class="col-md-4 col-md-offset-1">
-                  <div class="text-justify" ng-model="aboutBodySetting.value" medium-editor options='{"placeholder": "{{ "input_the_main_content" | translate }}",
-                  "buttons": ["bold", "italic", "anchor", "header1", "header2" ]
-                  }'>
-
-                  </div>
-                  <button name="button" class="btn btn-warning" ng-click="save(aboutBodySetting)" translate>{{ 'save' }}</button>
-                </div>
-                <div class="col-md-4 col-md-offset-2">
-                  <div ng-model="aboutContactsSetting.value" medium-editor options='{"placeholder": "{{ "input_the_fablab_contacts" | translate }}",
-                  "buttons": ["bold", "italic", "anchor", "header1", "header2" ]
-                  }'>
-
-                  </div>
-                  <span class="help-block text-info text-xs"><i class="fa fa-lightbulb-o"></i> {{ 'shift_enter_to_force_carriage_return' | translate }}</span>
-                  <button name="button" class="btn btn-warning" ng-click="save(aboutContactsSetting)" translate>{{ 'save' }}</button>
-                </div>
-
-              </div>
-
-            </div>
-          </div>
-        </uib-tab>
-        <uib-tab heading="{{ 'reservations' | translate }}">
-            <div class="panel panel-default m-t-lg">
-                <div class="panel-heading">
-                    <span class="font-sbold" translate>{{ 'reservations_parameters' }}</span>
-                </div>
-                <div class="panel-body">
-                    <div>
-                        <div class="row">
-                            <h3 class="m-l" translate>{{ 'confine_the_booking_agenda' }}</h3>
-                            <div class="col-md-2">
-                                <h4 translate>{{ 'opening_time' }}</h4>
-                                <uib-timepicker ng-model="windowStart.value" hour-step="timepicker.hstep" minute-step="timepicker.mstep" show-meridian="false"></uib-timepicker>
-                            </div>
-                            <div class="col-md-4 m-t">
-                                <button name="button" class="btn btn-warning m-l" ng-click="save(windowStart)" translate>{{ 'save' }}</button>
-                            </div>
-                            <div class="col-md-2">
-                                <h4 translate>{{ 'closing_time' }}</h4>
-                                <uib-timepicker ng-model="windowEnd.value" hour-step="timepicker.hstep" minute-step="timepicker.mstep" show-meridian="false"></uib-timepicker>
-                            </div>
-                            <div class="col-md-4 m-t">
-                                <button name="button" class="btn btn-warning m-l" ng-click="save(windowEnd)" translate>{{ 'save' }}</button>
-                            </div>
-                        </div>
-                        <div class="row">
-                            <h3 class="m-l" translate>{{ 'ability_for_the_users_to_move_their_reservations' }}</h3>
-                            <div class="form-group m-l">
-                                <label for="enableMove" class="control-label m-r" translate>{{ 'reservations_shifting' }}</label>
-                                <input bs-switch
-                                       ng-model="enableMove.value"
-                                       id="enableMove"
-                                       type="checkbox"
-                                       class="form-control"
-                                       switch-on-text="{{ 'enabled' | translate }}"
-                                       switch-off-text="{{ 'disabled' | translate }}"
-                                       switch-animate="true"/>
-                                <button name="button" class="btn btn-warning m-l" ng-click="save(enableMove)" translate>{{ 'save' }}</button>
-                            </div>
-                        </div>
-                        <div class="row" ng-show="enableMove.value">
-                            <div class="col-md-4">
-                                <label for="moveDelay" class="control-label m-r" translate>{{ 'prior_period_(hours)' }}</label>
-                                <div class="form-group">
-                                    <div class="input-group">
-                                        <div class="input-group-addon">
-                                            <i class="fa fa-clock-o"></i>
-                                        </div>
-                                        <input type="number" class="form-control" id="moveDelay" ng-model="moveDelay.value">
-                                    </div>
-                                </div>
-                                <button name="button" class="btn btn-warning" ng-click="save(moveDelay)" translate>{{ 'save' }}</button>
-                            </div>
-                        </div>
-                        <div class="row">
-                            <h3 class="m-l" translate>{{ 'ability_for_the_users_to_cancel_their_reservations' }}</h3>
-                            <div class="form-group m-l">
-                                <label for="enableCancel" class="control-label m-r" translate>{{ 'reservations_cancelling' }}</label>
-                                <input bs-switch
-                                       ng-model="enableCancel.value"
-                                       id="enableCancel"
-                                       type="checkbox"
-                                       class="form-control"
-                                       switch-on-text="{{ 'enabled' | translate }}"
-                                       switch-off-text="{{ 'disabled' | translate }}"
-                                       switch-animate="true"/>
-                                <button name="button" class="btn btn-warning m-l" ng-click="save(enableCancel)" translate>{{ 'save' }}</button>
-                            </div>
-                        </div>
-                        <div class="row" ng-show="enableCancel.value">
-                            <div class="col-md-4">
-                                <label for="moveDelay" class="control-label m-r" translate>{{ 'prior_period_(hours)' }}</label>
-                                <div class="form-group">
-                                    <div class="input-group">
-                                        <div class="input-group-addon">
-                                            <i class="fa fa-clock-o"></i>
-                                        </div>
-                                        <input type="number" class="form-control" id="cancelDelay" ng-model="cancelDelay.value">
-                                    </div>
-                                </div>
-                                <button name="button" class="btn btn-warning" ng-click="save(cancelDelay)" translate>{{ 'save' }}</button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </uib-tab>
-      </uib-tabset>
-    </div>
-
-  </div>
-</section>
diff --git a/app/assets/templates/admin/settings/index.html.erb b/app/assets/templates/admin/settings/index.html.erb
new file mode 100644
index 000000000..aacf87196
--- /dev/null
+++ b/app/assets/templates/admin/settings/index.html.erb
@@ -0,0 +1,41 @@
+<section class="heading b-b">
+  <div class="row no-gutter">
+    <div class="col-xs-2 col-sm-2 col-md-1">
+      <section class="heading-btn">
+        <a href="#" ng-click="backPrevLocation($event)"><i class="fa fa-long-arrow-left "></i></a>
+      </section>
+    </div>
+    <div class="col-xs-10 col-sm-10 col-md-8 b-l">
+      <section class="heading-title">
+        <h1 translate>{{ 'customize_the_application' }}</h1>
+      </section>
+    </div>
+
+  </div>
+</section>
+
+<section class="m-lg">
+  <div class="row">
+
+    <div class="col-md-12">
+      <uib-tabset justified="true">
+
+        <uib-tab heading="{{ 'general' | translate }}">
+          <ng-include src="'<%= asset_path 'admin/settings/general.html' %>'"></ng-include>
+        </uib-tab>
+
+        <uib-tab heading="{{ 'home_page' | translate }}">
+          <ng-include src="'<%= asset_path 'admin/settings/home_page.html' %>'"></ng-include>
+        </uib-tab>
+
+        <uib-tab heading="{{ 'about' | translate }}">
+          <ng-include src="'<%= asset_path 'admin/settings/about.html' %>'"></ng-include>
+        </uib-tab>
+        <uib-tab heading="{{ 'reservations' | translate }}">
+          <ng-include src="'<%= asset_path 'admin/settings/reservations.html' %>'"></ng-include>
+        </uib-tab>
+      </uib-tabset>
+    </div>
+
+  </div>
+</section>
diff --git a/app/assets/templates/admin/settings/reservations.html b/app/assets/templates/admin/settings/reservations.html
new file mode 100644
index 000000000..1c94fdc91
--- /dev/null
+++ b/app/assets/templates/admin/settings/reservations.html
@@ -0,0 +1,84 @@
+<div class="panel panel-default m-t-lg">
+    <div class="panel-heading">
+        <span class="font-sbold" translate>{{ 'reservations_parameters' }}</span>
+    </div>
+    <div class="panel-body">
+        <div>
+            <div class="row">
+                <h3 class="m-l" translate>{{ 'confine_the_booking_agenda' }}</h3>
+                <div class="col-md-2">
+                    <h4 translate>{{ 'opening_time' }}</h4>
+                    <uib-timepicker ng-model="windowStart.value" hour-step="timepicker.hstep" minute-step="timepicker.mstep" show-meridian="false"></uib-timepicker>
+                </div>
+                <div class="col-md-4 m-t">
+                    <button name="button" class="btn btn-warning m-l" ng-click="save(windowStart)" translate>{{ 'save' }}</button>
+                </div>
+                <div class="col-md-2">
+                    <h4 translate>{{ 'closing_time' }}</h4>
+                    <uib-timepicker ng-model="windowEnd.value" hour-step="timepicker.hstep" minute-step="timepicker.mstep" show-meridian="false"></uib-timepicker>
+                </div>
+                <div class="col-md-4 m-t">
+                    <button name="button" class="btn btn-warning m-l" ng-click="save(windowEnd)" translate>{{ 'save' }}</button>
+                </div>
+            </div>
+            <div class="row">
+                <h3 class="m-l" translate>{{ 'ability_for_the_users_to_move_their_reservations' }}</h3>
+                <div class="form-group m-l">
+                    <label for="enableMove" class="control-label m-r" translate>{{ 'reservations_shifting' }}</label>
+                    <input bs-switch
+                           ng-model="enableMove.value"
+                           id="enableMove"
+                           type="checkbox"
+                           class="form-control"
+                           switch-on-text="{{ 'enabled' | translate }}"
+                           switch-off-text="{{ 'disabled' | translate }}"
+                           switch-animate="true"/>
+                    <button name="button" class="btn btn-warning m-l" ng-click="save(enableMove)" translate>{{ 'save' }}</button>
+                </div>
+            </div>
+            <div class="row" ng-show="enableMove.value">
+                <div class="col-md-4">
+                    <label for="moveDelay" class="control-label m-r" translate>{{ 'prior_period_(hours)' }}</label>
+                    <div class="form-group">
+                        <div class="input-group">
+                            <div class="input-group-addon">
+                                <i class="fa fa-clock-o"></i>
+                            </div>
+                            <input type="number" class="form-control" id="moveDelay" ng-model="moveDelay.value">
+                        </div>
+                    </div>
+                    <button name="button" class="btn btn-warning" ng-click="save(moveDelay)" translate>{{ 'save' }}</button>
+                </div>
+            </div>
+            <div class="row">
+                <h3 class="m-l" translate>{{ 'ability_for_the_users_to_cancel_their_reservations' }}</h3>
+                <div class="form-group m-l">
+                    <label for="enableCancel" class="control-label m-r" translate>{{ 'reservations_cancelling' }}</label>
+                    <input bs-switch
+                           ng-model="enableCancel.value"
+                           id="enableCancel"
+                           type="checkbox"
+                           class="form-control"
+                           switch-on-text="{{ 'enabled' | translate }}"
+                           switch-off-text="{{ 'disabled' | translate }}"
+                           switch-animate="true"/>
+                    <button name="button" class="btn btn-warning m-l" ng-click="save(enableCancel)" translate>{{ 'save' }}</button>
+                </div>
+            </div>
+            <div class="row" ng-show="enableCancel.value">
+                <div class="col-md-4">
+                    <label for="moveDelay" class="control-label m-r" translate>{{ 'prior_period_(hours)' }}</label>
+                    <div class="form-group">
+                        <div class="input-group">
+                            <div class="input-group-addon">
+                                <i class="fa fa-clock-o"></i>
+                            </div>
+                            <input type="number" class="form-control" id="cancelDelay" ng-model="cancelDelay.value">
+                        </div>
+                    </div>
+                    <button name="button" class="btn btn-warning" ng-click="save(cancelDelay)" translate>{{ 'save' }}</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/vendor/assets/components/jasny-bootstrap/Gruntfile.js b/vendor/assets/components/jasny-bootstrap/Gruntfile.js
index df551fecf..264d1f480 100644
--- a/vendor/assets/components/jasny-bootstrap/Gruntfile.js
+++ b/vendor/assets/components/jasny-bootstrap/Gruntfile.js
@@ -234,7 +234,7 @@ module.exports = function (grunt) {
       options: {
         inject: 'js/tests/unit/phantom.js'
       },
-      files: 'js/tests/index.html'
+      files: 'js/tests/index.html.erb'
     },
 
     connect: {
@@ -315,7 +315,7 @@ module.exports = function (grunt) {
         options: {
           build: process.env.TRAVIS_JOB_ID,
           concurrency: 10,
-          urls: ['http://127.0.0.1:3000/js/tests/index.html'],
+          urls: ['http://127.0.0.1:3000/js/tests/index.html.erb'],
           browsers: grunt.file.readYAML('test-infra/sauce_browsers.yml')
         }
       }