From c94c727058462c6f2dbf2c3e8af4ac9807c194c8 Mon Sep 17 00:00:00 2001
From: Eric Espie <eric.espie@combodo.com>
Date: Tue, 7 Jun 2022 09:02:53 +0200
Subject: [PATCH] =?UTF-8?q?N=C2=B03169=20-=20Add=20feature=20to=20connect?=
 =?UTF-8?q?=20Gsuite=20mail=20box=20with=20OAuth=20N=C2=B02504=20-=20Add?=
 =?UTF-8?q?=20feature=20to=20connect=20Office=20mail=20box=20with=20OAuth2?=
 =?UTF-8?q?=20for=20Microsoft=20Graph=20N=C2=B05102=20-=20Allow=20to=20sen?=
 =?UTF-8?q?d=20emails=20(eg.=20notifications)=20using=20GSuite=20SMTP=20an?=
 =?UTF-8?q?d=20OAuth=20=20*=20migration=20to=20iTop=203.0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/backoffice/pages/_all.scss                |  3 +-
 css/backoffice/pages/_oauth.wizard.scss       | 16 ++++++
 .../pages/backoffice/oauth/Wizard.html.twig   | 54 +++++++------------
 3 files changed, 38 insertions(+), 35 deletions(-)
 create mode 100644 css/backoffice/pages/_oauth.wizard.scss

diff --git a/css/backoffice/pages/_all.scss b/css/backoffice/pages/_all.scss
index d911ff390..3e6b6b39a 100644
--- a/css/backoffice/pages/_all.scss
+++ b/css/backoffice/pages/_all.scss
@@ -14,4 +14,5 @@
 @import "csv-import";
 @import "global-search";
 @import "run-query";
-@import "welcome-popup";
\ No newline at end of file
+@import "welcome-popup";
+@import "oauth.wizard";
\ No newline at end of file
diff --git a/css/backoffice/pages/_oauth.wizard.scss b/css/backoffice/pages/_oauth.wizard.scss
new file mode 100644
index 000000000..04fb33089
--- /dev/null
+++ b/css/backoffice/pages/_oauth.wizard.scss
@@ -0,0 +1,16 @@
+.ibo-oauth-wizard .ibo-panel--body{
+  .ibo-oauth-wizard--form--container{
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+  }
+  .ibo-oauth-wizard--form {
+
+  }
+  .ibo-oauth-wizard--illustration svg{
+    max-height: 400px;
+  }
+}
+#ibo-oauth-wizard--conf--result{
+  white-space: pre-wrap
+}
diff --git a/templates/pages/backoffice/oauth/Wizard.html.twig b/templates/pages/backoffice/oauth/Wizard.html.twig
index 0aee723b3..ee4395e68 100644
--- a/templates/pages/backoffice/oauth/Wizard.html.twig
+++ b/templates/pages/backoffice/oauth/Wizard.html.twig
@@ -1,13 +1,11 @@
 {# @copyright   Copyright (C) 2010-2022 Combodo SARL #}
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}
 
-<div class="ibo-oauth-wizard">
-    <h1>{{ 'UI:OAuth:Wizard:Page:Title'|dict_s }}</h1>
+{% UIContentBlock Standard {AddCSSClasses:["ibo-oauth-wizard"]} %}
 
-    <div class="ibo-oauth-wizard">
-
-        <div class="ibo-oauth-wizard--form--container">
-            <div id="select_layout">
+    {% UIPanel Neutral {sTitle:'UI:OAuth:Wizard:Form:Panel:Title'|dict_s, AddCSSClasses:['ibo-oauth-wizard']} %}
+        {% UIContentBlock Standard {AddCSSClasses:["ibo-oauth-wizard--form--container"]} %}
+            {% UIContentBlock Standard {sId:'select_layout'} %}
                 {% set sIsChecked = 'checked' %}
                 {% for aSelect in aProviders %}
                     <input type="radio" name="provider" {{ sIsChecked }} value="{{ aSelect.name }}" id="layout_{{ aSelect.name }}" data-color1="{{ aSelect.colors.0 }}" data-color2="{{ aSelect.colors.1 }}" data-color3="{{ aSelect.colors.2 }}" data-color4="{{ aSelect.colors.3 }}">
@@ -17,37 +15,25 @@
 
                     {% set sIsChecked = '' %}
                 {% endfor %}
-            </div>
-        </div>
+            {% EndUIContentBlock %}
+        {% EndUIContentBlock %}
+
+        {% set aCSSClasses = ['ibo-oauth-wizard--form'] %}
+        {% for aSelect in aProviders %}
+            {% set aCSSClasses = aCSSClasses|merge(['ibo-oauth-wizard--form-' ~ aSelect.name]) %}
+        {% endfor %}
+        {% UIForm Standard {AddCSSClasses:aCSSClasses} %}
+            {% UIInput ForHidden {sName:'url', sValue:''} %}
+            {% for sName, aInput in aInputs %}
+                {% UIInput ForInputWithLabel {sLabel:aInput.label, sInputName:sName, sInputValue:aInput.value, sInputId:"wizard_input_"~sName, sInputType:aInput.type} %}
+            {% endfor %}
+            {% UIButton ForPrimaryAction {sLabel:'UI:OAuth:Wizard:Form:Button:Submit:Label'|dict_s, sName:'value', sValue:'value', bIsSubmit:true, sId:'value', AddCSSClasses:["ibo-oauth-wizard--form--submit"]} %}
+        {% EndUIForm %}
+    {% EndUIPanel %}
 
-        <fieldset>
-            <legend>{{ 'UI:OAuth:Wizard:Form:Panel:Title'|dict_s }}</legend>
-            <form class="ibo-oauth-wizard--form">
-                <input type="hidden" name="url" value="">
-                {% for sName, aInput in aInputs %}
-                    <div class="details">
-                        <div class="field_container field_small">
-                            <div class="field_label label"><label for="wizard_input_{{ sName }}">{{ aInput.label }}</label></div>
-                            <div class="field_data">
-                                <input
-                                        type="{{ aInput.type }}"
-                                        id="wizard_input_{{ sName }}"
-                                        name="{{ sName }}"
-                                        {% if aInput.read_only %} readonly {% endif %}
-                                        value="{{ aInput.value }}"
-                                        size="100"
-                                >
-                            </div>
-                        </div>
-                    </div>
-                {% endfor %}
-                <button class="ibo-oauth-wizard--form--submit" type="submit">{{ 'UI:OAuth:Wizard:Form:Button:Submit:Label'|dict_s }}</button>
-            </form>
-        </fieldset>
-    </div>
 
     {% for sTemplate in aAdditionalBlocks %}
         {% include sTemplate %}
     {% endfor %}
 
-</div>
\ No newline at end of file
+{% EndUIContentBlock %}