update base login pages

Sumukh · Jun 9, 2024 · cb98a4f · cb98a4f
1 parent a6d090a
commit cb98a4f
Show file tree

Hide file tree

Showing 12 changed files with 250 additions and 216 deletions.
diff --git a/appname/assets.py b/appname/assets.py
@@ -1,7 +1,7 @@
 from flask_assets import Bundle
 
 common_css = Bundle(
-    'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
+    'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css',
     'css/vendor/helper.css',
     'css/main.css',
     'css/overrides.css',
@@ -10,9 +10,8 @@
 )
 
 common_js = Bundle(
-    'https://code.jquery.com/jquery-3.2.1.slim.min.js',
-    'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js',
-    'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js',
+    'https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js',
+    'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js',
     Bundle(
         'js/main.js',
         filters='jsmin'
@@ -33,19 +32,15 @@
 )
 
 tabler_css = Bundle(
-    'https://rawcdn.githack.com/Sumukh/Ignite/70bf953851a356e785528b56ca105042074a3d5a/appname/static/tabler/css/dashboard.css',
+    'https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/css/tabler.min.css',
+    'https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/tabler-vendors.min.css',
     'css/overrides.css',
     filters='cssmin',
     output='public/css/tabler.css'
 )
 
 tabler_js = Bundle(
-    'tabler/js/vendors/jquery-3.2.1.min.js',
-    'tabler/js/vendors/bootstrap.bundle.min.js',
-    'tabler/js/vendors/circle-progress.min.js',
-    'tabler/js/vendors/selectize.min.js',
-    'tabler/js/vendors/jquery.tablesorter.min.js',
-    'tabler/js/core.js',
+    'https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/js/tabler.min.js',
     output='public/js/tabler.js'
 )
 
@@ -55,14 +50,10 @@
 )
 
 tabler_plugins_js = Bundle(
-    'tabler/js/vendors/chart.bundle.min.js',
-    'tabler/js/vendors/jquery.sparkline.min.js',
-    'tabler/js/vendors/jquery-jvectormap-2.0.3.min.js',
-    'tabler/js/vendors/jquery-jvectormap-de-merc.js',
-    'tabler/js/vendors/jquery-jvectormap-world-mill.js',
-    'tabler/js/plugins/charts-c3/js/d3.v3.min.js',
-    'tabler/js/plugins/charts-c3/js/c3.min.js',
-    'tabler/js/plugins/input-mask/js/jquery.mask.min.js',
+    'https://cdn.jsdelivr.net/npm/apexcharts',
+    'https://cdn.jsdelivr.net/npm/[email protected]/public/assets/scripts/choices.min.js',
+    'https://cdn.jsdelivr.net/npm/litepicker/dist/litepicker.js',
+    'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/tom-select.complete.min.js',
     # Other Plugins as needed.
     output='public/js/tabler-plugins.js'
 )
diff --git a/appname/templates/auth/invite.html b/appname/templates/auth/invite.html
@@ -4,34 +4,36 @@
 {% block title %}appname Signup{% endblock %}
 
 {% block body %}
-<div class="page-single">
-    <div class="container">
-        <div class="row">
-            <div class="col col-login mx-auto">
-                <div class="text-center mb-6">
-                    <img src="{{ url_for('static', filename='public/ignite/[email protected]') }}" class="h-6" alt="Tabler">
-                    <h2> appname </h2>
-                </div>
-                <form role="form" class="card" action="{{ url_for('auth.signup', invite_secret=invite.invite_secret) }}" method="post">
-
-                    <div class="card-body p-6">
-                        <div class="card-title">Join {{ invite.team.name }} on appname </div>
-                        <p>You've been invited to appname. Complete the signup below to join {{ invite.team.name }}.</p>
-                        {{ form.hidden_tag() }}
-                        {{ render_field(form.email, value=invite.invite_email) }}
-                        {{ render_field(form.password) }}
-                        {{ render_field(form.confirm) }}
-                        {{ render_field(form.invite_secret, value=invite.invite_secret, label_hidden=true) }}
+<div class="page page-center">
+    <div class="container container-tight py-4">
+      <div class="text-center mb-4">
+        <a href="." class="navbar-brand navbar-brand-autodark">
+            {{ render_flashes() }}
+            <img src="{{ url_for('static', filename='public/ignite/[email protected]') }}" class="h-6" >
+        </a>
+      </div>
+      <div class="card card-md">
+        <div class="card-body">
+          <h2 class="h2 text-center mb-4">Join {{ invite.team.name }} on appname</h2>
+          <form role="form"  action="{{ url_for('auth.signup', invite_secret=invite.invite_secret) }}" method="post">
+                <p>You've been invited to appname. Complete the signup below to join {{ invite.team.name }}.</p>
 
-                        <div class="form-footer">
-                            <button type="submit" class="btn btn-primary btn-block">Sign Up</button>
-                        </div>
-                    </form>
+                {{ form.hidden_tag() }}
+                {{ render_field(form.email, value=invite.invite_email) }}
+                {{ render_field(form.password) }}
+                {{ render_field(form.confirm) }}
+                {{ render_field(form.invite_secret, value=invite.invite_secret, label_hidden=true) }}
+                <div class="form-footer">
+                    <button type="submit" class="btn btn-primary w-100">Sign up</button>
                 </div>
-            </div>
+            </form>
         </div>
+      </div>
     </div>
+  </div>
 </div>
+
+
 {% include 'tabler/_footer.html' with context %}
 
 {% endblock %}
diff --git a/appname/templates/auth/login.html b/appname/templates/auth/login.html
@@ -5,45 +5,43 @@
 {% block title %}appname Login Example{% endblock %}
 
 {% block body %}
-<div class="page-single">
-    <div class="container">
-        <div class="row">
-            <div class="col col-login mx-auto">
-                <div class="text-center mb-6">
-                    {{ render_flashes() }}
-                    <img src="{{ url_for('static', filename='public/ignite/[email protected]') }}" class="h-6" alt="Tabler">
+<div class="page page-center">
+    <div class="container container-tight py-4">
+      <div class="text-center mb-4">
+        <a href="." class="navbar-brand navbar-brand-autodark">
+            {{ render_flashes() }}
+            <img src="{{ url_for('static', filename='public/ignite/[email protected]') }}" class="h-6" >
+        </a>
+      </div>
+      <div class="card card-md">
+        <div class="card-body">
+          <h2 class="h2 text-center mb-4">Login to your account</h2>
+          <form role="form"  action="{{ url_for('auth.login') }}" method="post">
+                {{ form.hidden_tag() }}
+                {{ render_field(form.email, placeholder='[email protected]') }}
+                {{ render_field(form.password, placeholder='Password') }}
+                <small class="float-right mb-2">
+                    <a href="{{ url_for('auth.request_password_reset') }}"> Help! I forgot my password </a>
+                </small>
+                <div class="form-footer">
+                    <button type="submit" class="btn btn-primary w-100">Sign in</button>
                 </div>
-                <form role="form" class="card" action="{{ url_for('auth.login') }}" method="post">
-
-                    <div class="card-body p-6">
-                        <div class="card-title">Login to your account</div>
-                        {{ form.hidden_tag() }}
-                        {{ render_field(form.email, placeholder='[email protected]') }}
-                        {{ render_field(form.password, placeholder='Password') }}
-                        <small class="float-right mb-2">
-                            <a href="{{ url_for('auth.request_password_reset') }}"> Help! I forgot my password </a>
-                        </small>
-                        <div class="form-footer">
-                            <button type="submit" class="btn btn-primary btn-block">Login</button>
-                        </div>
-                </form>
-                <div class="text-center text-muted">
-                    <hr class="thin" />
-                </div>
-                {% if features.oauth %}
-                    <div class="text-center mt-4 mb-4">
-                        <a href="{{ url_for('google.login') }}" class="btn btn-primary btn-block">
-                            <i class="fa fa-google"></i> Login with Google
-                        </a>
-                    </div>
-                {% endif %}
-                <div class="text-center text-muted mt-3">
-                    Don't have an account yet? <a href="{{ url_for('auth.signup') }}" class="btn btn-primary btn-block">Sign Up</a>
-                </div>
-            </div>
+            </form>
         </div>
+        {% if features.oauth %}
+        <div class="hr-text">or</div>
+        <div class="text-center mt-4 mb-4">
+            <a href="{{ url_for('google.login') }}" class="btn btn-primary btn-block">
+                <i class="fa fa-google"></i> Login with Google
+            </a>
+        </div>
+        {% endif %}
+      </div>
+      <div class="text-center text-secondary mt-3">
+        Don't have an account yet? <a href="{{ url_for('auth.signup') }}">Sign Up</a>
     </div>
-</div>
+    </div>
+  </div>
 </div>
 {% include 'tabler/_footer.html' with context %}
 

diff --git a/appname/templates/auth/oauth_only_login.html b/appname/templates/auth/oauth_only_login.html
@@ -15,25 +15,44 @@
                 </div>
                 <div class="card">
                     <div class="text-center mt-4 mb-4">
-                        {% if features.oauth %}
-                            <a href="{{ url_for('google.login') }}" class="btn btn-primary btn-block">
-                                <i class="fa fa-google"></i> Login with Google
-                            </a>
-                        {% else %}
-                            It is not possible to login to appname right now because OAuth Login has not been configured.
-                        {% endif %}
                     </div>
                 </div>
-                {% if constants.ALLOW_SIGNUPS %}
-                    <div class="text-center text-muted mt-3">
-                        Don't have an account yet? <a href="{{ url_for('auth.signup') }}" class="btn btn-primary btn-block">Sign Up</a>
-                    </div>
-                {% endif %}
 
             </div>
         </div>
     </div>
 </div>
+
+<div class="page page-center">
+    <div class="container container-tight py-4">
+      <div class="text-center mb-4">
+        <a href="." class="navbar-brand navbar-brand-autodark">
+            {{ render_flashes() }}
+            <img src="{{ url_for('static', filename='public/ignite/[email protected]') }}" class="h-6" >
+        </a>
+      </div>
+      <div class="card card-md">
+        <div class="card-body">
+          <h2 class="h2 text-center mb-4">Log in to appname</h2>
+
+          {% if features.oauth %}
+          <a href="{{ url_for('google.login') }}" class="btn btn-primary w-100">
+              <i class="fa fa-google"></i> Login with Google
+          </a>
+            {% else %}
+                It is not possible to login to appname right now because OAuth Login has not been configured.
+            {% endif %}
+            {% if constants.ALLOW_SIGNUPS %}
+            <div class="text-center text-muted mt-3">
+                Don't have an account yet? <a href="{{ url_for('auth.signup') }}" class="btn btn-primary w-100">Sign Up</a>
+            </div>
+            {% endif %}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
 {% include 'tabler/_footer.html' with context %}
 
 {% endblock %}
diff --git a/appname/templates/auth/reauth.html b/appname/templates/auth/reauth.html
@@ -4,17 +4,25 @@
 {% block title %}appname Login Example{% endblock %}
 
 {% block body %}
-<div class="page-single">
-    <div class="container">
-      <div class="row">
-        <div class="col col-login mx-auto">
-          <div class="card-body p-6">
-            <div class="card-title">Confirm your login in order to procceed</div>
-            <form role="form" action="{{ url_for('auth.login') }}" method="post">
-                {{ form.hidden_tag() }} {{ render_field(form.email) }} {{ render_field(form.password) }}
-                <button type="submit" class="btn btn-primary">Submit</button>
-            </form>
-          </div>
+<div class="page page-center">
+  <div class="container container-tight py-4">
+    <div class="text-center mb-4">
+      <a href="." class="navbar-brand navbar-brand-autodark">
+          {{ render_flashes() }}
+          <img src="{{ url_for('static', filename='public/ignite/[email protected]') }}" class="h-6" >
+      </a>
+    </div>
+    <div class="card card-md">
+      <div class="card-body">
+        <h2 class="h2 text-center mb-4">Login to your account</h2>
+        <form role="form"  action="{{ url_for('auth.login') }}" method="post">
+          {{ form.hidden_tag() }}
+          {{ render_field(form.email) }}
+          {{ render_field(form.password) }}
+              <div class="form-footer">
+                  <button type="submit" class="btn btn-primary w-100">Submit</button>
+              </div>
+          </form>
       </div>
     </div>
   </div>

diff --git a/appname/templates/auth/request_password_reset.html b/appname/templates/auth/request_password_reset.html
@@ -1,38 +1,39 @@
 {% extends "tabler/minimal_base.html" %}
 {% from "helpers/_formhelpers.html" import render_field %}
 
-{% block title %}appname Login Example{% endblock %}
+{% block title %}appname Reset Password{% endblock %}
 
 {% block body %}
-<div class="page-single">
-    <div class="container">
-        <div class="row">
-            <div class="col col-login mx-auto">
-                <div class="text-center mb-6">
-                    {{ render_flashes() }}
-                    <img src="{{ url_for('static', filename='public/ignite/[email protected]') }}" class="h-6" alt="Tabler">
-                </div>
-
-                <form role="form" class="card" action="{{ url_for('auth.request_password_reset') }}" method="post">
-
-                    <div class="card-body p-6">
-                        <div class="card-title">Reset your password </div>
-                        {{ form.hidden_tag() }}
-                        {{ render_field(form.email, placeholder='[email protected]') }}
-                        <div class="form-footer">
-                            <button type="submit" class="btn btn-primary btn-block">Send Reset Link</button>
-                        </div>
-                        <small class="float-right mt-2">
-                            <a href="{{ url_for('auth.login') }}"> Actually, I remember my password now </a>
-                        </small>
-
-                    </div>
-                </form>
-
+<div class="page page-center">
+    <div class="container container-tight py-4">
+      <div class="text-center mb-4">
+        <a href="." class="navbar-brand navbar-brand-autodark">
+            {{ render_flashes() }}
+            <img src="{{ url_for('static', filename='public/ignite/[email protected]') }}" class="h-6" >
+        </a>
+      </div>
+      <div class="card card-md">
+        <div class="card-body">
+          <h2 class="h2 text-center mb-4">Reset your password</h2>
+          <form role="form" action="{{ url_for('auth.request_password_reset') }}" method="post">
+
+            {{ form.hidden_tag() }}
+            {{ render_field(form.email, placeholder='[email protected]') }}
+
+            <div class="form-footer mt-2">
+                <button type="submit" class="btn btn-primary w-100">Send Reset Link</button>
             </div>
-        </div>
+        </form>
+      </div>
+
+    </div>
+    <div class="text-center text-secondary mt-3">
+        Actually, I remember my password now? <a href="{{ url_for('auth.login') }}">Log in</a>
     </div>
+  </div>
 </div>
+
+
 {% include 'tabler/_footer.html' with context %}
 
 {% endblock %}