- styled "Configured PAS" add dialog for the Zope 4 ZMI (fixes #38)

zopefoundation · Apr 13, 2019 · e48f433 · e48f433
1 parent 6adb23c
commit e48f433
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 35 deletions.
diff --git a/CHANGES.rst b/CHANGES.rst
@@ -3,6 +3,9 @@ Change Log
 
 2.0 (unreleased)
 ----------------
+- styled "Configured PAS" add dialog for the Zope 4 ZMI
+  (`#38 <https://github.com/zopefoundation/Products.PluggableAuthService/issues/38>`_)
+
 - prevent the ZMI add dialog showing in the Zope 4 ZMI
   (`#37 <https://github.com/zopefoundation/Products.PluggableAuthService/issues/37>`_)
 

diff --git a/Products/PluggableAuthService/www/pasAddForm.zpt b/Products/PluggableAuthService/www/pasAddForm.zpt
@@ -2,44 +2,47 @@
 <h2 tal:define="form_title string:Add Pluggable Auth Service"
     tal:replace="structure context/manage_form_title">FORM TITLE</h2>
 
+<main class="container-fluid">
+
 <p class="form-help">Please select the configuration for the new user folder</p>
 
 <form action="addConfiguredPAS" method="post">
-<table cellspacing="0" cellpadding="2" border="0">
- <tr valign="top">
-  <td>
-   <div class="form-label">Setup profile</div>
-  </td>
-  <td>
-    <select name="base_profile">
-      <option value="PROFILE_ID"
-              tal:repeat="info options/base_profiles"
-              tal:attributes="value info/id"
-              tal:content="info/title">PROFILE TITLE</option>
-    </select>
-  </td>
- </tr>
- <tr valign="top"
-     tal:condition="options/extension_profiles | nothing">
-  <td>
-   <div class="form-label">Optional extensions</div>
-  </td>
-  <td><tal:span tal:repeat="info options/extension_profiles">
-   <input type="checkbox" name="extension_profiles:list" value="PROFILE_ID"
-          tal:attributes="value info/id" />
-   <tal:span tal:content="info/title">PROFILE TITLE</tal:span><br /></tal:span>
-  </td>
- </tr>
- <tr>
-  <td>
-   &nbsp;
-  </td>
-  <td>
-   <input class="form-element" type="submit" name="submit" value="Add" />
-  </td>
- </tr>
-</table>
+
+  <div class="form-group row">
+    <label for="base_profile" class="form-label col-sm-3 col-md-2">
+      Setup profile
+    </label>
+    <div class="col-sm-9 col-md-10">
+      <select name="base_profile" class="form-control">
+        <option value="PROFILE_ID"
+                tal:repeat="info options/base_profiles"
+                tal:attributes="value info/id"
+                tal:content="info/title">PROFILE TITLE</option>
+      </select>
+    </div>
+  </div>
+
+  <div class="form-group row"
+       tal:condition="options/extension_profiles | nothing">
+    <label for="extension_profiles" class="form-label col-sm-3 col-md-2">
+      Optional extensions
+    </label>
+    <div class="form-check"
+         tal:repeat="info options/extension_profiles">
+      <label for="" class="form-label col-sm-3 col-md-2"
+             tal:attributes="for info/id"
+             tal:content="info/title">PROFILE TITLE</label>
+      <input type="checkbox" name="extension_profiles:list" value="PROFILE_ID"
+             tal:attributes="value info/id" />
+    </div>
+  </div>
+
+  <div class="zmi-controls">
+    <input class="btn btn-primary" type="submit" name="submit" value="Add" />
+  </div>
+
 </form>
 
-<h1 tal:replace="structure context/manage_page_footer">PAGE FOOTER</h1>
+</main>
 
+<h1 tal:replace="structure context/manage_page_footer">PAGE FOOTER</h1>