Display: Improvements to the installation process forms

assets/vue/AppInstaller.vue

@@ -20,18 +20,17 @@
           {{ stepTitle }}
         </li>
       </ol>
-      <div id="note">
-        <a
-          class="p-button p-component p-button-info p-button-outlined"
-          href="../../documentation/installation_guide.html"
-          target="_blank"
-        >
-          <span
-            aria-hidden="true"
-            class="p-button-icon p-button-icon-left mdi mdi-text-box-search-outline"
+      <div
+        id="note"
+        class="text-center"
+      >
+        <BaseAppLink url="../../documentation/installation_guide.html">
+          <BaseButton
+            type="primary"
+            icon="courses"
+            :label="t('Read the installation guide')"
           />
-          <span class="p-button-text">{{ t("Read the installation guide") }}</span>
-        </a>
+        </BaseAppLink>
       </div>
     </aside>
 
@@ -39,19 +38,19 @@
       <h1
         v-if="'new' === installerData.installType"
         v-t="'New installation'"
-        class="mb-4"
+        class="mb-4 text-center"
       />
       <h1
         v-else-if="'update' === installerData.installType"
         v-t="{
           path: 'Update from Chamilo ' + installerData.upgradeFromVersion.join(' | '),
         }"
-        class="mb-4"
+        class="mb-4 text-center"
       />
       <h1
         v-else
         v-t="'Chamilo\'s installation wizard'"
-        class="mb-8"
+        class="mb-8 text-center"
       />
 
       <form
@@ -235,6 +234,8 @@
 import { useI18n } from "vue-i18n"
 import { onMounted, provide, ref } from "vue"
 
+import BaseAppLink from "./components/basecomponents/BaseAppLink.vue"
+import BaseButton from "./components/basecomponents/BaseButton.vue"
 import Step1 from "./components/installer/Step1"
 import Step2 from "./components/installer/Step2"
 import Step3 from "./components/installer/Step3"

assets/vue/components/installer/Step1.vue

@@ -5,30 +5,22 @@
       class="install-icon w-36 mx-auto mb-4"
       src="/main/install/chamilo-install.svg"
     />
-    <h2
-      class="install-title mb-8"
-      v-text="t('Step 1 - Installation Language')"
-    />
+    <SectionHeader :title="t('Step 1 - Installation Language')" />
 
-    <div class="field">
-      <div class="p-float-label">
-        <Dropdown
-          v-model="installerData.langIso"
-          :filter="true"
-          :options="availableLanguages"
-          input-id="language_list"
-          option-label="english_name"
-          option-value="isocode"
-        />
-        <label
-          v-t="'Please select installation language'"
-          for="language_list"
-        />
-      </div>
-      <small
-        v-t="'Cannot find your language in the list? Contact us at info@chamilo.org to contribute as a translator.'"
-      />
-    </div>
+    <BaseDropdown
+      v-model="installerData.langIso"
+      :help-text="
+        t('Cannot find your language in the list? Contact us at {0} to contribute as a translator.', [
+          'info@chamilo.org',
+        ])
+      "
+      :label="t('Please select installation language')"
+      :options="availableLanguages"
+      input-id="language_list"
+      name="language_list_alt"
+      option-label="english_name"
+      option-value="isocode"
+    />
 
     <input
       v-model="installerData.langIso"
@@ -51,9 +43,10 @@
         :closable="false"
         severity="warn"
       >
-        <p class="update-message-text">
-          {{ t("An update is available. Click the button below to proceed with the update.") }}
-        </p>
+        <p
+          class="update-message-text"
+          v-t="'An update is available. Click the button below to proceed with the update.'"
+        />
         <p>{{ installerData.checkMigrationStatus.message }}</p>
         <p v-if="installerData.checkMigrationStatus.current_migration">
           Current Migration: {{ installerData.checkMigrationStatus.current_migration }}
@@ -63,12 +56,12 @@
         </p>
         <hr />
       </Message>
-      <Button
-        :class="[installerData.isUpdateAvailable ? 'p-button-secondary' : 'p-button-success']"
+      <BaseButton
         :label="t('Next')"
         :name="'step1'"
-        icon="mdi mdi-page-next"
-        type="submit"
+        :type="installerData.isUpdateAvailable ? 'secondary' : 'success'"
+        icon="next"
+        is-submit
       />
       <input
         id="is_executable"
@@ -84,8 +77,10 @@
 import { inject } from "vue"
 import { useI18n } from "vue-i18n"
 
-import Dropdown from "primevue/dropdown"
-import Button from "primevue/button"
+import Message from "primevue/message"
+import BaseDropdown from "../basecomponents/BaseDropdown.vue"
+import BaseButton from "../basecomponents/BaseButton.vue"
+import SectionHeader from "../layout/SectionHeader.vue"
 
 import languages from "../../utils/languages"
 

assets/vue/components/installer/Step2.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="install-step">
-    <h2
-      v-t="'Step 2 - Requirements'"
-      class="install-title mb-8"
-    />
+    <SectionHeader :title="t('Step 2 - Requirements')" />
 
     <p class="RequirementText mb-4">
       <strong v-text="t('Please read the following requirements thoroughly.')" />
@@ -358,6 +355,7 @@ import Message from "primevue/message"
 import Tag from "primevue/tag"
 import InputText from "primevue/inputtext"
 import Button from "primevue/button"
+import SectionHeader from "../layout/SectionHeader.vue"
 
 const { t } = useI18n()
 

assets/vue/components/installer/Step3.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="install-step">
-    <h2
-      v-t="'Step 3 - License'"
-      class="install-title mb-8"
-    />
+    <SectionHeader :title="t('Step 3 - License')" />
 
     <p
       v-t="'Chamilo is free software distributed under the GNU General Public licence (GPL).'"
@@ -45,36 +42,31 @@
       :toggleable="true"
       class="mt-4"
     >
-      <p
-        v-t="'Dear user'"
-        class="mb-3"
-      />
-      <p
-        v-t="
-          'You are about to start using one of the best open-source e-learning platform on the market. Like many other open-source project, this project is backed up by a large community of students, teachers, developers and content creators who would like to promote the project better.'
-        "
-        class="mb-3"
-      />
-      <p
-        v-t="
-          'By knowing a little bit more about you, one of our most important users, who will manage this e-learning system, we will be able to let people know that our software is used and let you know when we organize events that might be relevant to you.'
-        "
-        class="mb-3"
-      />
-      <p
-        v-t="
-          'By filling this form, you accept that the Chamilo association or its members might send you information by e-mail about important events or updates in the Chamilo software or community. This will help the community grow as an organized entity where information flow, with a permanent respect of your time and your privacy.'
-        "
-        class="mb-3"
-      />
-      <p
-        class="mb-3"
-        v-html="
-          t(
-            'Please note that you are <b>not required</b> to fill this form. If you want to remain anonymous, we will loose the opportunity to offer you all the privileges of being a registered portal administrator, but we will respect your decision. Simply leave this form empty and click Next',
-          )
-        "
-      />
+      <div class="space-y-3 mb-3">
+        <p v-t="'Dear user'" />
+        <p
+          v-t="
+            'You are about to start using one of the best open-source e-learning platform on the market. Like many other open-source project, this project is backed up by a large community of students, teachers, developers and content creators who would like to promote the project better.'
+          "
+        />
+        <p
+          v-t="
+            'By knowing a little bit more about you, one of our most important users, who will manage this e-learning system, we will be able to let people know that our software is used and let you know when we organize events that might be relevant to you.'
+          "
+        />
+        <p
+          v-t="
+            'By filling this form, you accept that the Chamilo association or its members might send you information by e-mail about important events or updates in the Chamilo software or community. This will help the community grow as an organized entity where information flow, with a permanent respect of your time and your privacy.'
+          "
+        />
+        <p
+          v-html="
+            t(
+              'Please note that you are <b>not required</b> to fill this form. If you want to remain anonymous, we will loose the opportunity to offer you all the privileges of being a registered portal administrator, but we will respect your decision. Simply leave this form empty and click Next',
+            )
+          "
+        />
+      </div>
 
       <BaseInputText
         id="person_name"
@@ -223,6 +215,7 @@ import RadioButton from "primevue/radiobutton"
 import Button from "primevue/button"
 import BaseInputText from "../basecomponents/BaseInputText.vue"
 import BaseDropdown from "../basecomponents/BaseDropdown.vue"
+import SectionHeader from "../layout/SectionHeader.vue"
 
 const { t } = useI18n()
 

assets/vue/components/installer/Step4.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="install-step">
-    <h2
-      v-t="'Step 4 - Database settings'"
-      class="RequirementHeading mb-8"
-    />
+    <SectionHeader :title="t('Step 4 - Database settings')" />
 
     <p
       v-if="'update' === installerData.installType"
@@ -226,6 +223,7 @@ import InputText from "primevue/inputtext"
 import Password from "primevue/password"
 import Button from "primevue/button"
 import Message from "primevue/message"
+import SectionHeader from "../layout/SectionHeader.vue"
 
 const { t } = useI18n()
 

assets/vue/components/installer/Step5.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="install-step">
-    <h2
-      v-t="'Step 5 - Configuration settings'"
-      class="RequirementHeading mb-8"
+    <SectionHeader
+      :title="t('Step 5 - Configuration settings')"
+      class="RequirementHeading"
     />
 
     <div v-if="'update' === installerData.installType">
@@ -511,6 +511,7 @@ import Password from "primevue/password"
 import Dropdown from "primevue/dropdown"
 import Button from "primevue/button"
 import RadioButton from "primevue/radiobutton"
+import SectionHeader from "../layout/SectionHeader.vue"
 
 import languages from "../../utils/languages"
 

assets/vue/components/installer/Step6.vue

@@ -3,9 +3,9 @@
     v-show="!loading"
     class="install-step"
   >
-    <h2
-      v-t="'Step 6 - Last check before install'"
-      class="RequirementHeading mb-8"
+    <SectionHeader
+      :title="t('Step 6 - Last check before install')"
+      class="RequirementHeading"
     />
 
     <p
@@ -380,6 +380,7 @@ import Message from "primevue/message"
 import Button from "primevue/button"
 import ProgressBar from "primevue/progressbar"
 import Dialog from "primevue/dialog"
+import SectionHeader from "../layout/SectionHeader.vue"
 
 const { t } = useI18n()
 

assets/vue/components/installer/Step7.vue

@@ -1,14 +1,12 @@
 <template>
   <div class="install-step">
-    <h2
-      v-if="'update' !== installerData.installType"
-      v-t="'Step 7 - Installation process execution'"
-      class="RequirementHeading mb-8"
-    />
-    <h2
-      v-else
-      v-t="'Step 7 - Update process execution'"
-      class="RequirementHeading mb-8"
+    <SectionHeader
+      :title="
+        'update' !== installerData.installType
+          ? t('Step 7 - Installation process execution')
+          : t('Step 7 - Update process execution')
+      "
+      class="RequirementHeading"
     />
 
     <p
@@ -42,12 +40,13 @@
 
       <div class="formgroup-inline">
         <div class="field">
-          <Button
-            :label="t('Go to your newly created portal.')"
-            class="p-button-success"
-            type="button"
-            @click="btnFinishOnClick"
-          />
+          <BaseAppLink url="../../">
+            <Button
+              :label="t('Go to your newly created portal.')"
+              class="p-button-success"
+              type="button"
+            />
+          </BaseAppLink>
         </div>
       </div>
     </div>
@@ -60,12 +59,10 @@ import { useI18n } from "vue-i18n"
 
 import Message from "primevue/message"
 import Button from "primevue/button"
+import SectionHeader from "../layout/SectionHeader.vue"
+import BaseAppLink from "../basecomponents/BaseAppLink.vue"
 
 const { t } = useI18n()
 
 const installerData = inject("installerData")
-
-function btnFinishOnClick() {
-  window.location = "../../"
-}
 </script>

public/main/install/index.php

@@ -9,6 +9,7 @@ use Symfony\Component\Console\Input\ArrayInput;
 use Symfony\Component\Console\Output\ConsoleOutput;
 use Symfony\Component\Dotenv\Dotenv;
 use Symfony\Component\ErrorHandler\Debug;
+use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Session\Session as HttpSession;
 use Symfony\Component\Translation\Loader\PoFileLoader;
 use Symfony\Component\Translation\Translator;
@@ -71,12 +72,16 @@ Container::$session = new HttpSession();
 require_once 'install.lib.php';
 $installationLanguage = 'en_US';
 
-if (!empty($_POST['language_list']) && !ChamiloSession::has('install_language')) {
+$httpRequest = Request::createFromGlobals();
+
+if ($httpRequest->request->get('language_list')) {
     $search = ['../', '\\0'];
-    $installationLanguage = str_replace($search, '', urldecode($_POST['language_list']));
+    $installationLanguage = str_replace($search, '', urldecode($httpRequest->request->get('language_list')));
     ChamiloSession::write('install_language', $installationLanguage);
 } elseif (ChamiloSession::has('install_language')) {
   $installationLanguage = ChamiloSession::read('install_language');
+} else {
+  $installationLanguage = $httpRequest->getPreferredLanguage();
 }
 
 // Set translation
@@ -254,7 +259,7 @@ $total_steps = 7;
 $current_step = 1;
 if (!$_POST) {
     $current_step = 1;
-} elseif (!empty($_POST['language_list']) || !empty($_POST['step1']) || ((!empty($_POST['step2_update_8']) || (!empty($_POST['step2_update_6']))) && ($emptyUpdatePath || $badUpdatePath))) {
+} elseif ($httpRequest->request->get('language_list') || !empty($_POST['step1']) || ((!empty($_POST['step2_update_8']) || (!empty($_POST['step2_update_6']))) && ($emptyUpdatePath || $badUpdatePath))) {
     $current_step = 2;
 } elseif (!empty($_POST['step2']) || (!empty($_POST['step2_update_8']) || (!empty($_POST['step2_update_6'])))) {
     $current_step = 3;