refactor: Improve admin settings design

Adding sections permit to be more clear and will help if we add a new "External links" section (#1764)

src/i18n/en_US.json

@@ -584,6 +584,7 @@
   "Increase": "Increase",
   "Increasing creation date": "Increasing creation date",
   "Increasing number of members": "Increasing number of members",
+  "Informations":"Informations",
   "Instance": "Instance",
   "Instance Long Description": "Instance Long Description",
   "Instance Name": "Instance Name",
@@ -849,6 +850,8 @@
   "Open user menu": "Open user menu",
   "Opened reports": "Opened reports",
   "Or": "Or",
+  "Open": "Open",
+  "Options":"Options",
   "Ordered list": "Ordered list",
   "Organized": "Organized",
   "Organized by": "Organized by",
@@ -896,6 +899,9 @@
   "Pick a profile or a group": "Pick a profile or a group",
   "Pick an identity": "Pick an identity",
   "Pick an instance": "Pick an instance",
+  "Pick a profile or a group": "Pick a profile or a group",
+  "Pick": "Pick",
+  "Pictures": "Pictures",
   "Please add as many details as possible to help identify the problem.": "Please add as many details as possible to help identify the problem.",
   "Please check your spam folder if you didn't receive the email.": "Please check your spam folder if you didn't receive the email.",
   "Please contact this instance's Mobilizon admin if you think this is a mistake.": "Please contact this instance's Mobilizon admin if you think this is a mistake.",
@@ -903,6 +909,7 @@
   "Please enter your password to confirm this action.": "Please enter your password to confirm this action.",
   "Please make sure the address is correct and that the page hasn't been moved.": "Please make sure the address is correct and that the page hasn't been moved.",
   "Please read the {fullRules} published by {instance}'s administrators.": "Please read the {fullRules} published by {instance}'s administrators.",
+  "Policies" : "Policies",
   "Popular groups close to you": "Popular groups close to you",
   "Popular groups nearby {position}": "Popular groups nearby {position}",
   "Post": "Post",
@@ -1037,6 +1044,7 @@
   "SSL/TLS": "SSL/TLS",
   "Save": "Save",
   "Save draft": "Save draft",
+  "Save instance settings":"Save instance settings",
   "Schedule": "Schedule",
   "Search": "Search",
   "Search events, groups, etc.": "Search events, groups, etc.",

src/i18n/fr_FR.json

@@ -570,6 +570,7 @@
   "Increase": "Augmenter",
   "Increasing creation date": "Date de création croissante",
   "Increasing number of members": "Nombre croissant de membres",
+  "Informations":"Informations",
   "Instances following you": "Instances vous suivant",
   "Instances you follow": "Instances que vous suivez",
   "Instances": "Instances",
@@ -857,6 +858,7 @@
   "Open main menu": "Ouvrir le menu principal",
   "Open user menu": "Ouvrir le menu utilisateur",
   "Open": "Ouvert",
+  "Options":"Options",
   "Ordered list": "Liste ordonnée",
   "Organized by {name}": "Organisé par {name}",
   "Organized by": "Organisé par",
@@ -905,6 +907,7 @@
   "Pick an instance": "Choisir une instance",
   "Pick a profile or a group": "Choisir un profil ou groupe",
   "Pick": "Choisir",
+  "Pictures": "Images",
   "Please add as many details as possible to help identify the problem.": "Merci d'ajouter un maximum de détails afin d'aider à identifier le problème.",
   "Please check your spam folder if you didn't receive the email.": "Merci de vérifier votre dossier des indésirables si vous n'avez pas reçu l'e-mail.",
   "Please contact this instance's Mobilizon admin if you think this is a mistake.": "Veuillez contacter l'administrateur·rice de cette instance Mobilizon si vous pensez qu’il s’agit d’une erreur.",
@@ -912,6 +915,7 @@
   "Please enter your password to confirm this action.": "Merci d'entrer votre mot de passe pour confirmer cette action.",
   "Please make sure the address is correct and that the page hasn't been moved.": "Assurez‐vous que l’adresse est correcte et que la page n’a pas été déplacée.",
   "Please read the {fullRules} published by {instance}'s administrators.": "Merci de lire les {fullRules} publiées par les administrateur·rice·s de {instance}.",
+  "Policies": "Règles",
   "Popular groups close to you": "Groupes populaires proches de vous",
   "Popular groups nearby {position}": "Groupes populaires près de {position}",
   "Postal Code": "Code postal",
@@ -1047,6 +1051,7 @@
   "Rules": "Règles",
   "Save draft": "Enregistrer le brouillon",
   "Save": "Enregistrer",
+  "Save instance settings":"Sauvegarder les paramètres de l'instance",
   "Schedule": "Programme",
   "Searching…": "Recherche en cours…",
   "Search events, groups, etc.": "Rechercher des événements, des groupes, etc.",

src/views/Admin/SettingsView.vue

@@ -7,8 +7,10 @@
       ]"
     />
 
-    <section v-if="settingsToWrite">
+    <div v-if="settingsToWrite">
       <form @submit.prevent="updateSettings">
+        <section class="mt-4 mb-4 p-4 border rounded shadow-sm bg-white">
+          <h2>{{ t("Informations") }}</h2>
           <o-field :label="t('Instance Name')" label-for="instance-name">
             <o-input
               v-model="settingsToWrite.instanceName"
@@ -17,7 +19,7 @@
             />
           </o-field>
           <div class="field flex flex-col">
-          <label class="" for="instance-description">{{
+            <label for="instance-description">{{
               t("Instance Short Description")
             }}</label>
             <small>
@@ -35,9 +37,25 @@
             />
           </div>
           <div class="field flex flex-col">
-          <label class="" for="instance-slogan">{{
+            <label for="instance-long-description">{{
-            t("Instance Slogan")
+              t("Instance Long Description")
             }}</label>
+            <small>
+              {{
+                t(
+                  "A place to explain who you are and the things that set your instance apart. You can use HTML tags."
+                )
+              }}
+            </small>
+            <o-input
+              type="textarea"
+              v-model="settingsToWrite.instanceLongDescription"
+              rows="4"
+              id="instance-long-description"
+            />
+          </div>
+          <div class="field flex flex-col">
+            <label for="instance-slogan">{{ t("Instance Slogan") }}</label>
             <small>
               {{
                 t(
@@ -52,12 +70,17 @@
             />
           </div>
           <div class="field flex flex-col">
-          <label class="" for="instance-contact">{{ t("Contact") }}</label>
+            <label for="instance-contact">{{ t("Contact") }}</label>
             <small>
               {{ t("Can be an email or a link, or just plain text.") }}
             </small>
             <o-input v-model="settingsToWrite.contact" id="instance-contact" />
           </div>
+        </section>
+
+        <section class="mt-4 mb-4 p-4 border rounded shadow-sm bg-white">
+          <h2>{{ t("Pictures") }}</h2>
+
           <label class="field flex flex-col">
             <p>{{ t("Logo") }}</p>
             <small>
@@ -93,7 +116,9 @@
           <label class="field flex flex-col">
             <p>{{ t("Default Picture") }}</p>
             <small>
-            {{ t("Default picture when an event or group doesn't have one.") }}
+              {{
+                t("Default picture when an event or group doesn't have one.")
+              }}
             </small>
             <picture-upload
               v-model:modelValue="defaultPictureFile"
@@ -102,26 +127,10 @@
               :maxSize="maxSize"
             />
           </label>
-        <!-- piece of code to manage instance colors
+        </section>
-        <div class="field flex flex-col">
+
-          <label class="" for="primary-color">{{ t("Primary Color") }}</label>
+        <section class="mt-4 mb-4 p-4 border rounded shadow-sm bg-white">
-          <o-input
+          <h2>{{ t("Options") }}</h2>
-            type="color"
-            v-model="settingsToWrite.primaryColor"
-            id="primary-color"
-          />
-        </div>
-        <div class="field flex flex-col">
-          <label class="" for="secondary-color">{{
-            t("Secondary Color")
-          }}</label>
-          <o-input
-            type="color"
-            v-model="settingsToWrite.secondaryColor"
-            id="secondary-color"
-          />
-        </div>
-        -->
           <o-field :label="t('Allow registrations')">
             <fieldset>
             <o-field>
@@ -155,7 +164,7 @@
           </fieldset>
           </o-field>
           <div class="field flex flex-col">
-          <label class="" for="instance-languages">{{
+            <label for="instance-languages">{{
               t("Instance languages")
             }}</label>
             <small>
@@ -175,26 +184,12 @@
               <template #empty>{{ t("No languages found") }}</template>
             </o-taginput>
           </div>
+        </section>
+
+        <section class="mt-4 mb-4 p-4 border rounded shadow-sm bg-white">
+          <h2>{{ t("Policies") }}</h2>
           <div class="field flex flex-col">
-          <label class="" for="instance-long-description">{{
+            <label for="instance-rules">{{ t("Instance Rules") }}</label>
-            t("Instance Long Description")
-          }}</label>
-          <small>
-            {{
-              t(
-                "A place to explain who you are and the things that set your instance apart. You can use HTML tags."
-              )
-            }}
-          </small>
-          <o-input
-            type="textarea"
-            v-model="settingsToWrite.instanceLongDescription"
-            rows="4"
-            id="instance-long-description"
-          />
-        </div>
-        <div class="field flex flex-col">
-          <label class="" for="instance-rules">{{ t("Instance Rules") }}</label>
             <small>
               {{
                 t(
@@ -209,8 +204,8 @@
             />
           </div>
           <o-field :label="t('Instance Terms Source')">
-          <div class="">
+            <div>
-            <div class="">
+              <div>
                 <fieldset>
                   <legend>
                     {{ t("Choose the source of the instance's Terms") }}
@@ -241,7 +236,7 @@
                   </o-field>
                 </fieldset>
               </div>
-            <div class="">
+              <div>
                 <o-notification
                   class="bg-slate-700"
                   v-if="
@@ -284,7 +279,8 @@
                 <div
                   class="notification"
                   v-if="
-                  settingsToWrite.instanceTermsType === InstanceTermsType.CUSTOM
+                    settingsToWrite.instanceTermsType ===
+                    InstanceTermsType.CUSTOM
                   "
                 >
                   <b>{{ t("Custom") }}</b>
@@ -307,6 +303,7 @@
               </div>
             </div>
           </o-field>
+
           <o-field
             :label="t('Instance Terms URL')"
             label-for="instanceTermsUrl"
@@ -321,7 +318,9 @@
           <o-field
             :label="t('Instance Terms')"
             label-for="instanceTerms"
-          v-if="settingsToWrite.instanceTermsType === InstanceTermsType.CUSTOM"
+            v-if="
+              settingsToWrite.instanceTermsType === InstanceTermsType.CUSTOM
+            "
           >
             <o-input
               type="textarea"
@@ -330,11 +329,13 @@
             />
           </o-field>
           <o-field :label="t('Instance Privacy Policy Source')">
-          <div class="">
+            <div>
-            <div class="">
+              <div>
                 <fieldset>
                   <legend>
-                  {{ t("Choose the source of the instance's Privacy Policy") }}
+                    {{
+                      t("Choose the source of the instance's Privacy Policy")
+                    }}
                   </legend>
                   <o-field>
                     <o-radio
@@ -362,7 +363,7 @@
                   </o-field>
                 </fieldset>
               </div>
-            <div class="">
+              <div>
                 <div
                   class="notification"
                   v-if="
@@ -395,7 +396,9 @@
                 >
                   <b>{{ t("URL") }}</b>
                   <p class="prose dark:prose-invert">
-                  {{ t("Set an URL to a page with your own privacy policy.") }}
+                    {{
+                      t("Set an URL to a page with your own privacy policy.")
+                    }}
                   </p>
                 </div>
                 <div
@@ -453,11 +456,13 @@
               id="instancePrivacyPolicy"
             />
           </o-field>
+        </section>
+
         <o-button native-type="submit" variant="primary">{{
-          t("Save")
+          t("Save instance settings")
         }}</o-button>
       </form>
-    </section>
+    </div>
   </div>
 </template>
 <script lang="ts" setup>