From 58fa50535cffa836971ff2a5413c4e95a5b639fc Mon Sep 17 00:00:00 2001
From: Lova Andriarimalala <43842786+Xpirix@users.noreply.github.com>
Date: Fri, 27 Sep 2024 11:54:17 +0300
Subject: [PATCH] Update login page UI

---
 qgis-app/static/style/scss/style.scss      |   6 +-
 qgis-app/templates/registration/login.html | 140 +++++++++++++++++----
 2 files changed, 116 insertions(+), 30 deletions(-)

diff --git a/qgis-app/static/style/scss/style.scss b/qgis-app/static/style/scss/style.scss
index 52ca938d..ca393181 100644
--- a/qgis-app/static/style/scss/style.scss
+++ b/qgis-app/static/style/scss/style.scss
@@ -179,7 +179,7 @@ p {
     &.is-active {
       display: block;
       position: fixed;
-      height: 100dvh;
+      height: 87dvh;
       overflow: auto;
       left: 0;
       animation: slideInFromLeft 0.3s ease-out forwards;
@@ -235,8 +235,8 @@ a.is-active > span {
 }
 
 .login-container {
-  box-shadow: 0 8px 12px 0 rgba(60, 60, 60, 0.75);
-  border-radius: 20px;
+  // box-shadow: 0 8px 12px 0 rgba(60, 60, 60, 0.75);
+  // border-radius: 20px;
   max-width: 500px;
 }
 
diff --git a/qgis-app/templates/registration/login.html b/qgis-app/templates/registration/login.html
index a8344348..d54bc352 100644
--- a/qgis-app/templates/registration/login.html
+++ b/qgis-app/templates/registration/login.html
@@ -1,32 +1,118 @@
-{% extends "base.html" %}{% load i18n %}
-
-{% block content %}
-    <p>{% trans "Login using your OSGEO id." %}</p>
-    <p><b>{% trans "Please note that you do not need a login to download a plugin." %}</b></p>
-    <p>
-       {% trans 'You can create a new OSGEO id on <a href="http://www.osgeo.org/osgeo_userid">OSGEO web portal.</a>' %}
-    </p>
-   {% if form.errors or form.non_field_errors %}
-    <div class="notification is-danger is-light">
-        <button class="delete" data-dismiss="alert">&times;</button>
-        {% for error in form.non_field_errors %}
-            {{ error }} <br/>
-        {% endfor %}
-        {% for error in form.field_errors %}
-          {{ error }} <br/>
-        {% endfor %}
-    </div>
-    {% endif %}
+{% extends "base.html" %}{% load i18n static %}
 
-  <form class="horizontal" action='.' method='post'>{% csrf_token %}
-    <p><label for="username">{% trans "User name" %}:</label>
-    <input type="text" name="username" value="" id="username"></p>
-    <p><label for="password">{% trans "Password" %}:</label>
-    <input type="password" name="password" value="" id="password"></p>
+{% block pagetitle %}
+  <section class="hero is-dark is-medium has-bg-img" style="background: url({% static "images/hegobg1.webp" %});
+  background-position: 50%;
+  background-size: cover;">
+  <div class="hero-body" style="height: 100dvh;">
+    <div class="columns is-vcentered is-centered">
+      <div class="column is-4 p-6 login-container" >
+        <div class="has-text-centered">
+          <h3 class="title">{% trans "Login using your OSGEO id." %}</h3>
+          <hr class="login-hr" />
+          <p class="subtitle">
+            {% trans "Please note that you do not need a login to download a plugin." %}
+          </p>
+          <p class="subtitle">
+            {% trans 'You can create a new OSGEO id on <a class="has-text-success	" href="http://www.osgeo.org/osgeo_userid">OSGEO web portal.</a>' %}
+          </p>
+          
+          <div>
+            <form action='.' method="POST">
+              {% csrf_token %}
+              <div class="field">
+                <div class="control has-icons-left">
+                  <input
+                    class="input is-large"
+                    type="text"
+                    placeholder="Username"
+                    autofocus=""
+                    id="username"
+                    name="username"
+                  />
+                  <span class="icon is-small is-left">
+                    <i class="fas fa-user"></i>
+                  </span>
+                </div>
+              </div>
 
-    <p><input class="button is-success" type="submit" value="login" />
-    <input type="hidden" name="next" value="{{ next }}" /></p>
-  </form>
+              <div class="field">
+                <div class="control has-icons-left">
+                  <input
+                    class="input is-large"
+                    type="password"
+                    placeholder="Password"
+                    id="password"
+                    name="password"
+                  />
+                  <span class="icon is-small is-left">
+                    <i class="fas fa-lock"></i>
+                  </span>
+                </div>
+              </div>
 
+              {% if form.errors or form.non_field_errors %}
+              <div class="notification is-danger is-light">
+                  {% for error in form.non_field_errors %}
+                      {{ error }} <br/>
+                  {% endfor %}
+                  {% for error in form.field_errors %}
+                    {{ error }} <br/>
+                  {% endfor %}
+              </div>
+              {% endif %}
 
+                <div class="field">
+                <div class="control">
+                  <button 
+                  class="button is-success is-large is-fullwidth"
+                  type="submit" 
+                  value="login" 
+                  id="submit-button"
+                  >
+                  <span class="icon">
+                    <i class="fa fa-sign-in" aria-hidden="true"></i>
+                  </span>
+                  <span>
+                    Login
+                  </span>
+                  </button>
+                </div>
+                </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
+  </div>
+  </section>
 {% endblock %}
+
+<!-- Specific JS goes HERE -->
+{% block extrajs %}
+{{ block.super }}
+<script>
+  $(document).ready(function () {
+    // Function to update the button state
+    function updateButtonState() {
+      var usernameIsEmpty = $("#username").val() === "";
+      var passwordIsEmpty = $("#password").val() === "";
+
+      if (usernameIsEmpty || passwordIsEmpty) {
+        $("#submit-button").prop("disabled", true);
+      } else {
+        $("#submit-button").prop("disabled", false);
+      }
+    }
+
+    // Call the function when the page loads
+    updateButtonState();
+
+    // Call the function when the field changes or the form is submitted
+    $("#username").on("input", updateButtonState);
+    $("#password").on("input", updateButtonState);
+    $("form").on("submit", updateButtonState);
+  });
+</script>
+{% endblock %}
\ No newline at end of file