From d9d047cb3ae07da38714096e9dad12aedcc35f0a Mon Sep 17 00:00:00 2001
From: nati <nati@rospace.com>
Date: Thu, 14 Dec 2023 12:09:47 +0200
Subject: [PATCH] Made login page mobile friendly and made every column in
 admin logins list sortable

---
 public/css/app.css                            |  5 ++
 src/Admin/src/Form/LoginForm.php              |  2 +-
 src/Admin/src/Service/AdminService.php        |  2 +-
 .../templates/admin/list-logins.html.twig     | 34 +++++-----
 src/Admin/templates/admin/login.html.twig     | 64 ++++++++++---------
 src/App/assets/scss/components/forms.scss     |  6 ++
 6 files changed, 64 insertions(+), 49 deletions(-)

diff --git a/public/css/app.css b/public/css/app.css
index a79e818..0ab66bc 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -66783,6 +66783,11 @@ textarea.form-control-lg {
   background-color: #5cb85c;
 }
 
+@media (max-width: 767px) {
+  .login-button {
+    width: 100%;
+  }
+}
 #loader {
   transition: all 0.3s ease-in-out;
   opacity: 1;
diff --git a/src/Admin/src/Form/LoginForm.php b/src/Admin/src/Form/LoginForm.php
index 07825bb..6c8e0d9 100644
--- a/src/Admin/src/Form/LoginForm.php
+++ b/src/Admin/src/Form/LoginForm.php
@@ -62,7 +62,7 @@ public function init(): void
             'attributes' => [
                 'type'  => 'submit',
                 'value' => 'Log in',
-                'class' => 'btn btn-primary btn-block',
+                'class' => 'btn btn-primary btn-block login-button',
             ],
             'type'       => Submit::class,
         ]);
diff --git a/src/Admin/src/Service/AdminService.php b/src/Admin/src/Service/AdminService.php
index 4e598fe..eda1cac 100644
--- a/src/Admin/src/Service/AdminService.php
+++ b/src/Admin/src/Service/AdminService.php
@@ -129,7 +129,7 @@ public function getAdminLogins(
                 'uuid'          => $login->getUuid()->toString(),
                 'identity'      => $login->getIdentity(),
                 'adminIp'       => $login->getAdminIp(),
-                'status'        => $login->getLoginStatus(),
+                'loginStatus'   => $login->getLoginStatus(),
                 'country'       => $login->getCountry(),
                 'continent'     => $login->getContinent(),
                 'organization'  => $login->getOrganization(),
diff --git a/src/Admin/templates/admin/list-logins.html.twig b/src/Admin/templates/admin/list-logins.html.twig
index 8a67d48..05ad022 100644
--- a/src/Admin/templates/admin/list-logins.html.twig
+++ b/src/Admin/templates/admin/list-logins.html.twig
@@ -18,23 +18,23 @@
                         <thead>
 
                         <tr>
-                            <th data-field="identity" data-sortable="false">Identity</th>
-                            <th data-field="adminIp" data-sortable="false">Ip</th>
-                            <th data-field="status" data-sortable="false">Status</th>
-                            <th data-field="country" data-sortable="false">Country</th>
-                            <th data-field="continent" data-sortable="false">Continent</th>
-                            <th data-field="organization" data-sortable="false">Organization</th>
-                            <th data-field="deviceType" data-sortable="false">Device Type</th>
-                            <th data-field="deviceBrand" data-sortable="false">Device Brand</th>
-                            <th data-field="deviceModel" data-sortable="false">Device Model</th>
-                            <th data-field="isMobile" data-sortable="false">Is Mobile</th>
-                            <th data-field="osName" data-sortable="false">Os Name</th>
-                            <th data-field="osVersion" data-sortable="false">Os Version</th>
-                            <th data-field="osPlatform" data-sortable="false">Os Platform</th>
-                            <th data-field="clientType" data-sortable="false">Client Type</th>
-                            <th data-field="clientName" data-sortable="false">Client Name</th>
-                            <th data-field="clientEngine" data-sortable="false">Client Engine</th>
-                            <th data-field="clientVersion" data-sortable="false">Client Version</th>
+                            <th data-field="identity" data-sortable="true">Identity</th>
+                            <th data-field="adminIp" data-sortable="true">Ip</th>
+                            <th data-field="loginStatus" data-sortable="true">Status</th>
+                            <th data-field="country" data-sortable="true">Country</th>
+                            <th data-field="continent" data-sortable="true">Continent</th>
+                            <th data-field="organization" data-sortable="true">Organization</th>
+                            <th data-field="deviceType" data-sortable="true">Device Type</th>
+                            <th data-field="deviceBrand" data-sortable="true">Device Brand</th>
+                            <th data-field="deviceModel" data-sortable="true">Device Model</th>
+                            <th data-field="isMobile" data-sortable="true">Is Mobile</th>
+                            <th data-field="osName" data-sortable="true">Os Name</th>
+                            <th data-field="osVersion" data-sortable="true">Os Version</th>
+                            <th data-field="osPlatform" data-sortable="true">Os Platform</th>
+                            <th data-field="clientType" data-sortable="true">Client Type</th>
+                            <th data-field="clientName" data-sortable="true">Client Name</th>
+                            <th data-field="clientEngine" data-sortable="true">Client Engine</th>
+                            <th data-field="clientVersion" data-sortable="true">Client Version</th>
                             <th data-field="created" data-sortable="true">Created</th>
                         </tr>
 
diff --git a/src/Admin/templates/admin/login.html.twig b/src/Admin/templates/admin/login.html.twig
index 580b625..6565291 100644
--- a/src/Admin/templates/admin/login.html.twig
+++ b/src/Admin/templates/admin/login.html.twig
@@ -54,40 +54,44 @@
 </head>
 <body class="app">
     <div class="peers ai-s fxw-nw h-100vh align-items-center">
-        <div class="col-6 col-md-6 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r">
-            <div class="pos-a centerXY">
-                <div class="bgc-white bdrs-50p w-100">
-                    <a href="{{ path('dashboard') }}">
-                        <img class="pos-a centerXY logo-img" src="{{ asset('images/app/logo.svg') }}" alt="">
-                    </a>
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r">
+                    <div class="pos-a centerXY">
+                        <div class="bgc-white bdrs-50p w-100">
+                            <a href="{{ path('dashboard') }}">
+                                <img class="pos-a centerXY logo-img" src="{{ asset('images/app/logo.svg') }}" alt="">
+                            </a>
+                        </div>
+                    </div>
                 </div>
-            </div>
-        </div>
-        <div class="col-2 col-md-2 mL-10">
-            {% set dummy = form.prepare() %}
-            {{ form().openTag(form) | raw }}
-            <h4 class="fw-300 c-grey-900 mB-20">Login</h4>
-            <div class="mb-3">
-                {% set username = form.get('username') %}
-                {% set elementTranslatePlaceholder = username.getAttribute('placeholder')|trans|raw %}
-                {% set dummy = username.setAttribute('placeholder', elementTranslatePlaceholder) %}
-                {{ formElement(username) }}
-            </div>
-            <div class="mb-3">
-                {% set password = form.get('password') %}
-                {% set elementTranslatePlaceholder = password.getAttribute('placeholder')|trans|raw %}
-                {% set dummy = password.setAttribute('placeholder', elementTranslatePlaceholder) %}
-                {{ formElement(password) }}
-            </div>
-            {% set submit = form.get('submit') %}
-            {% set submitValue = submit.getValue|trans|raw %}
-            {% set dummy = submit.setAttribute('value', submitValue) %}
+                <div class="col-md-4">
+                    {% set dummy = form.prepare() %}
+                    {{ form().openTag(form) | raw }}
+                    <h4 class="fw-300 c-grey-900 mB-20">Login</h4>
+                    <div class="mb-3">
+                        {% set username = form.get('username') %}
+                        {% set elementTranslatePlaceholder = username.getAttribute('placeholder')|trans|raw %}
+                        {% set dummy = username.setAttribute('placeholder', elementTranslatePlaceholder) %}
+                        {{ formElement(username) }}
+                    </div>
+                    <div class="mb-3">
+                        {% set password = form.get('password') %}
+                        {% set elementTranslatePlaceholder = password.getAttribute('placeholder')|trans|raw %}
+                        {% set dummy = password.setAttribute('placeholder', elementTranslatePlaceholder) %}
+                        {{ formElement(password) }}
+                    </div>
+                    {% set submit = form.get('submit') %}
+                    {% set submitValue = submit.getValue|trans|raw %}
+                    {% set dummy = submit.setAttribute('value', submitValue) %}
 
-            {{ messagesPartial('partial::alerts', {}, null, 'user-login') }}
+                    {{ messagesPartial('partial::alerts', {}, null, 'user-login') }}
 
-            {{ formSubmit(submit) }}
+                    {{ formSubmit(submit) }}
 
-            {{ form().closeTag() | raw }}
+                    {{ form().closeTag() | raw }}
+                </div>
+            </div>
         </div>
     </div>
 </body>
diff --git a/src/App/assets/scss/components/forms.scss b/src/App/assets/scss/components/forms.scss
index 3b9f27a..608785c 100644
--- a/src/App/assets/scss/components/forms.scss
+++ b/src/App/assets/scss/components/forms.scss
@@ -255,3 +255,9 @@
 .radio-success input[type="radio"]:checked + label::after {
   background-color: #5cb85c;
 }
+
+@media (max-width: 767px) {
+  .login-button {
+    width: 100%;
+  }
+}
\ No newline at end of file