Update to use Bootstrap 3 instead of Bootstrap 4. Fixes #3562

web/pgadmin/templates/security/change_password.html

@@ -8,7 +8,7 @@
         {{ render_field_with_errors(change_password_form.password, "password") }}
         {{ render_field_with_errors(change_password_form.new_password, "password") }}
         {{ render_field_with_errors(change_password_form.new_password_confirm, "password") }}
-        <input class="btn btn-lg btn-success btn-block" type="submit" value="{{ _('Change Password') }}"
+        <input class="btn btn-lg btn-primary btn-block" type="submit" value="{{ _('Change Password') }}"
                title="{{ _('Change Password') }}">
     </fieldset>
 </form>

web/pgadmin/templates/security/fields.html

@@ -1,11 +1,11 @@
 {% macro render_field_with_errors(field, type) %}
-<div class="form-group{% if field.errors %} has-error{% endif %}">
+<div class="form-group mb-3 {% if field.errors %} has-error{% endif %}">
     <input class="form-control" placeholder="{{ field.label.text }}" name="{{ field.name }}"
            type="{% if type %}{{ type }}{% else %}{{ field.type }}{% endif %}" autofocus>
+    {% if field.errors %}
+    {% for error in field.errors %}
+    <span class="form-text text-danger">{{ error }}</span>
+    {% endfor %}
+    {% endif %}
 </div>
-{% if field.errors %}
-{% for error in field.errors %}
-<span class="help-block">{{ error }}</span>
-{% endfor %}
-{% endif %}
 {% endmacro %}

web/pgadmin/templates/security/forgot_password.html

@@ -7,7 +7,7 @@
     {{ forgot_password_form.hidden_tag() }}
     <fieldset>
         {{ render_field_with_errors(forgot_password_form.email, "text") }}
-        <input class="btn btn-lg btn-success btn-block" type="submit" value="{{ _('Recover Password') }}"
+        <input class="btn btn-lg btn-primary btn-block" type="submit" value="{{ _('Recover Password') }}"
                title="{{ _('Recover Password') }}">
     </fieldset>
 </form>

web/pgadmin/templates/security/login_user.html

@@ -5,23 +5,22 @@
 <form action="{{ url_for_security('login') }}" method="POST" name="login_user_form">
     {{ login_user_form.hidden_tag() }}
     {% set user_language = request.cookies.get('PGADMIN_LANGUAGE') or 'en' %}
-    <fieldset>
-        {{ render_field_with_errors(login_user_form.email, "text") }}
-        {{ render_field_with_errors(login_user_form.password, "password") }}
-        <input class="btn btn-lg btn-success btn-block" type="submit" value="{{ _('Login') }}"
-               title="{{ _('Login') }}">
-        <div class="pgadmin-control-group form-group pg-el-xs-12 user-language">
-            <label class="help-block pg-el-sm-3">{{ _("Language") }}</label>
-            <div class="pgadmin-controls pg-el-sm-9">
-                <select class="form-control" name="language" value="{{user_language}}">
-                    {% for key, lang in config.LANGUAGES.items() %}
-                    <option value="{{key}}" {% if user_language == key %}selected{% endif %}>{{lang}}</option>
-                    {% endfor %}
-                 </select>
-            </div>
+    {{ render_field_with_errors(login_user_form.email, "text") }}
+    {{ render_field_with_errors(login_user_form.password, "password") }}
+    <button class="btn btn-lg btn-primary btn-block" type="submit" value="{{ _('Login') }}">{{ _('Login') }}</button>
+    <div class="form-group row mb-3 c user-language">
+        <label class="help-block col-sm-3">{{ _("Language") }}</label>
+        <div class="col-sm-9">
+            <select class="form-control" name="language" value="{{user_language}}">
+                {% for key, lang in config.LANGUAGES.items() %}
+                <option value="{{key}}" {% if user_language == key %}selected{% endif %}>{{lang}}</option>
+                {% endfor %}
+             </select>
         </div>
-    </fieldset>
+    </div>
 </form>
-<span class="help-block">{{ _('Forgotten your <a href="%(url)s">password</a>?', url=url_for('browser.forgot_password')) }}</span>
+<div>
+    <span class="help-block">{{ _('Forgotten your <a href="%(url)s">password</a>?', url=url_for('browser.forgot_password')) }}</span>
+</div>
 {% endif %}
 {% endblock %}

web/pgadmin/templates/security/messages.html

@@ -2,10 +2,10 @@
 {% if messages %}
 <div style="position: fixed; top: 20px; right: 20px; width: 400px; z-index: 9999">
     {% for category, message in messages %}
-    <div class="alert alert-{{ category }} alert-dismissible" role="alert">
+    <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
+        {{ message }}
         <button type="button" class="close" data-dismiss="alert" aria-label="{{ _('Close') }}"><span
                 aria-hidden="true">&times;</span></button>
-        {{ message }}
     </div>
     {% endfor %}
 </div>

web/pgadmin/templates/security/panel.html

@@ -1,20 +1,22 @@
 {% extends "base.html" %}
 {% from "security/fields.html" import render_field_with_errors %}
 {% block body %}
-<div class="container" style="position:relative;z-index:1;">
+<div class="container-fluid" style="position:relative;z-index:1;">
     {% include "security/messages.html" %}
     <div class="row">
-        <div class="col-md-4 col-md-offset-4">
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <h3 class="panel-title">{% block panel_title %}{% endblock %}</h3>
+        <div class="col-md-4"></div>
+        <div class="col-md-4">
+            <div class="card">
+                <div class="card-header bg-primary text-white">
+                    <span class="panel-title h5">{% block panel_title %}{% endblock %}</span>
                 </div>
-                <div class="panel-body">
+                <div class="card-body">
                     {% block panel_body %}
                     {% endblock %}
                 </div>
             </div>
         </div>
+        <div class="col-md-4"></div>
     </div>
 </div>
 {% include 'security/watermark.html' %}