Make ERP5JS login pages look like ERP5JS Dialogs

![login](/uploads/d270b602f784466dcc8d0806ec0ab9e1/image.png)

![recover](/uploads/da5bca427e6053a4724a4f7171db71db/image.png)

![reset password](/uploads/27e3519dfaf96cd66ce3adf9d6184ba8/image.png)


See merge request !1165

bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/WebSite_viewRecoverAccount.zpt

@@ -10,7 +10,7 @@
 
     <div data-gadget-scope='header'>
       <div class="ui-header">
-        <h1><span i18n:domain="ui" i18n:translate="">Recover your account</span></h1>
+        <h1><span i18n:domain="ui" i18n:translate="">Recover your Account</span></h1>
       </div>
     </div>
 
@@ -27,21 +27,29 @@
         <article>
 
           <section>
-            <form method="post" tal:attributes="action python: context.absolute_url()">
+            <form method="post" tal:attributes="action python: context.absolute_url()" class="field_container">
+              <section class="ui-content-header-plain">
+                <h3 class="ui-content-title ui-body-c">
+                    <span class="ui-icon ui-icon-custom ui-icon-life-ring"></span>
+                    <tal:block  i18n:domain="ui" i18n:translate="">Recover your Account</tal:block>
+                </h3>
+              </section>
+              <div>
+                <div>
                   <div class="ui-field-contain">
                     <label i18n:domain="ui" i18n:translate="">Username</label>
                     <div><input autofocus type="text" name="user_login" value="" required=""></div>
                   </div>
-              <br/>
-              <div class="ui-field-contain">
-                <label></label>
-                <div><input type="submit" value="Validate" i18n:attributes="value" i18n:domain="ui" tal:attributes="name python: '%s:method' % (form_action, )"/></div>
+                  <div class="dialog_button_container">
+                    <input type="submit" value="Recover your Account" i18n:attributes="value" i18n:domain="ui" tal:attributes="name python: '%s:method' % (form_action, )"/>
                   </div>
 
                   <input type="hidden" name="url" tal:attributes="value python: context.absolute_url()" />
                   <input tal:condition="exists: request/came_from"
                         type="hidden" name="came_from"
                         tal:attributes="value request/came_from" />
+                </div>
+              </div>
             </form>
            </section>
         </article>

bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/WebSite_viewResetPassword.zpt

@@ -9,7 +9,7 @@
 
     <div data-gadget-scope='header'>
       <div class="ui-header">
-        <h1><span>Reset your password</span></h1>
+        <h1><span i18n:domain="ui" i18n:translate="">Reset Password</span></h1>
       </div>
     </div>
 
@@ -26,22 +26,30 @@
         <article class="ui-content">
 
           <section>
-            <form method="post" tal:attributes="action python: context.absolute_url()">
+            <form method="post" tal:attributes="action python: context.absolute_url()" class="field_container">
+              <section class="ui-content-header-plain">
+                <h3 class="ui-content-title ui-body-c">
+                    <span class="ui-icon ui-icon-custom ui-icon-key"></span>
+                    <tal:block  i18n:domain="ui" i18n:translate="">Reset Password</tal:block>
+                </h3>
+              </section>
+              <div>
+                <div>
                   <div class="ui-field-contain">
-                <label data-i18n="New Password">New Password<span></span></label>
+                    <label i18n:domain="ui" i18n:translate="">New Password<span></span></label>
                     <div><input autofocus name="password" type="password" value="" required=""></div>
                   </div>
                   <div class="ui-field-contain">
-                <label data-i18n="New Password Confirmation">New Password Confirmation<span></span></label>
+                    <label i18n:domain="ui" i18n:translate="">New Password Confirmation<span></span></label>
                     <div><input name="password_confirm" type="password" value="" required=""></div>
                   </div>
-              <div class="ui-field-contain">
-                <label></label>
-                <div><input type="submit" value="Validate" tal:attributes="name python: '%s:method' % (form_action, )"/></div>
+                  <div class="dialog_button_container">
+                    <input type="submit" value="Reset Password" i18n:attributes="value" i18n:domain="ui" tal:attributes="name python: '%s:method' % (form_action, )"/>
                   </div>
-
                   <input type="hidden" name="came_from" tal:attributes="value python: context.absolute_url()" />
                   <input type="hidden" name="password_key" tal:attributes="value python: request.get('reset_key') or ''" />
+                </div>
+              </div>
             </form>
            </section>
         </article>

bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/login_form.zpt

-<html>
+<html tal:define="form_action string:WebSite_login;
+                  absolute_url context/absolute_url;
+                  portal context/getPortalObject">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title tal:content="python: here.getPortalObject().getTitle()"></title>
+    <title tal:content="portal/getTitle"></title>
     <link rel="stylesheet" href="gadget_erp5_nojqm.css">
   </head>
 
-  <body tal:define="form_action string:WebSite_login;
-                    portal here/getPortalObject">
+  <body>
 
     <div data-gadget-scope='header'>
       <div class="ui-header">
-        <h1><span i18n:domain="ui" i18n:translate="">Connect</span></h1>
+        <h1><span i18n:domain="ui" i18n:translate="">Log in</span></h1>
       </div>
     </div>
 
@@ -26,9 +27,9 @@
       <div class="gadget-content">
         <article>
           <section>
-            <tal:block tal:condition="exists: request/portal_status_message">
-              <span tal:attributes="data-i18n request/portal_status_message"><span tal:content="request/portal_status_message"></span></span>
-            </tal:block>
+            <div class="visible" data-gadget-scope="notification" tal:condition="exists: request/portal_status_message">
+              <button type="submit" class="error" tal:attributes="data-i18n request/portal_status_message"><span tal:content="request/portal_status_message"></span></button>
+            </div>
           </section>
 
           <section tal:condition="not: portal/portal_membership/isAnonymousUser">
@@ -38,8 +39,15 @@
           </section>
 
           <section tal:condition="portal/portal_membership/isAnonymousUser">
-            <form method="post" tal:attributes="action python: '%s/' % context.absolute_url()">
-
+            <section class="ui-content-header-plain">
+                <h3 class="ui-content-title ui-body-c">
+                    <span class="ui-icon ui-icon-custom ui-icon-sign-in"></span>
+                    <tal:block  i18n:domain="ui" i18n:translate="">Log in</tal:block>
+                </h3>
+            </section>
+            <form method="post" tal:attributes="action python: '%s/' % absolute_url" class="field_container">
+              <div>
+                <div>
                   <div class="ui-field-contain">
                     <label i18n:domain="ui" i18n:translate="" >Username</label>
                     <div><input autofocus type="text" name="__ac_name" value="" required=""></div>
@@ -48,19 +56,15 @@
                     <label i18n:domain="ui" i18n:translate="" >Password</label>
                     <div><input type="password" name="__ac_password" value="" required="" autocomplete="off" /></div>
                   </div>
-              <div class="ui-field-contain">
-                <label></label>
-                <div tal:define="absolute_url python:context.absolute_url()">
+                  <div class="dialog_button_container">
+                    <input type="submit" value="Login" i18n:attributes="value" i18n:domain="ui" tal:attributes="name python: '%s:method' % (form_action, )"/>
                     <a i18n:domain="ui" i18n:translate="" tal:attributes="href python: '%s/WebSite_viewRecoverAccount?came_from=%s' % (absolute_url, absolute_url)">I forgot my password!</a>
                   </div>
-              </div><br/>
-              <div class="ui-field-contain">
-                <label></label>
-                <div><input type="submit" value='Login' i18n:attributes="value" i18n:domain="ui"  tal:attributes="name python: '%s:method' % (form_action, )"/></div>
+                </div>
               </div>
 
 
-              <input type="hidden" name="url" tal:attributes="value python: context.absolute_url()" />
+              <input type="hidden" name="url" tal:attributes="value absolute_url" />
               <input tal:condition="exists: request/came_from"
                      type="hidden" name="came_from"
                      tal:attributes="value request/came_from" />

bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_logout_translate_zuite/testPageLogout.zpt

@@ -87,14 +87,14 @@
 
 <tr>
   <td>waitForElementPresent</td>
-  <td>//input[@value="yanzhen"]</td>
+  <td>//input[@value="tëjju barabu këllu jëfandikookat"]</td>
   <td></td>
 </tr>
 
 
 <tr>
   <td>verifyElementPresent</td>
-  <td>//input[@value="yanzhen"]</td>
+  <td>//input[@value="tëjju barabu këllu jëfandikookat"]</td>
   <td></td>
 </tr>
 

bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_logout_zuite/testRenderjsLogout.zpt

@@ -136,7 +136,7 @@
 </tr>
 <tr>
   <td>waitForElementPresent</td>
-  <td>//input[@value='Validate']</td>
+  <td>//input[@value='Recover your Account']</td>
   <td></td>
 </tr>
 <tr>
@@ -154,7 +154,7 @@
 </tr>
 <tr>
   <td>click</td>
-  <td>//input[@value='Validate']</td>
+  <td>//input[@value='Recover your Account']</td>
   <td></td>
 </tr>
 <tr>

bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_recover_password_zuite/testRenderjsRecoverPassword.zpt

@@ -106,7 +106,7 @@
 </tr>
 <tr>
   <td>waitForElementPresent</td>
-  <td>//input[@value='Validate']</td>
+  <td>//input[@value='Recover your Account']</td>
   <td></td>
 </tr>
 <tr>
@@ -121,7 +121,7 @@
 </tr>
 <tr>
   <td>click</td>
-  <td>//input[@value='Validate']</td>
+  <td>//input[@value='Recover your Account']</td>
   <td></td>
 </tr>
 <tr>
@@ -156,7 +156,7 @@
 </tr>
 <tr>
   <td>waitForElementPresent</td>
-  <td>//input[@value='Validate']</td>
+  <td>//input[@value='Reset Password']</td>
   <td></td>
 </tr>
 <tr>
@@ -181,7 +181,7 @@
 </tr>
 <tr>
   <td>click</td>
-  <td>//input[@value='Validate']</td>
+  <td>//input[@value='Reset Password']</td>
   <td></td>
 </tr>
 <tr>

bt5/erp5_web_renderjs_ui_test/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui_test/Base_createBaseLanguage.py

@@ -30,6 +30,7 @@ param_dict = [
   { 'message': 'Logout', 'translation': 'tuichu', 'language': 'wo'},
   { 'message': 'User', 'translation': 'yonghu', 'language': 'wo'},
   { 'message': 'Username', 'translation': u'turu jëfandikookat', 'language': 'wo'},
+  { 'message': 'Recover your Account', 'translation': u'tëjju barabu këllu jëfandikookat', 'language': 'wo'},
   { 'message': 'Sort Editor', 'translation': 'paixubianyiqi', 'language': 'wo'},
   { 'message': 'Home', 'translation': 'zhuye', 'language': 'wo'},
   { 'message': 'State', 'translation': 'zhuangtai', 'language': 'wo'},