From 4cf23a954f2f47a9f8eed4db9ba5efa04dbd6aca Mon Sep 17 00:00:00 2001
From: James Cole <james@firefly-iii.org>
Date: Sun, 5 Jun 2022 11:50:45 +0200
Subject: [PATCH] New view and new login layout

---
 resources/views/auth/login.twig        | 182 +++++++++++++++----------
 resources/views/layout/v3/session.twig |  25 ++++
 2 files changed, 137 insertions(+), 70 deletions(-)
 create mode 100644 resources/views/layout/v3/session.twig

diff --git a/resources/views/auth/login.twig b/resources/views/auth/login.twig
index 9a96d56365..afeb205707 100644
--- a/resources/views/auth/login.twig
+++ b/resources/views/auth/login.twig
@@ -1,87 +1,129 @@
-{% extends "./layout/guest" %}
+{% extends "./layout/v3/session" %}
 {% block content %}
-    {% if IS_DEMO_SITE %}
-        <div class="row">
-            <div class="col-lg-12">
-                <p class="well">
-                    Welcome to the Firefly III demonstration website!<br/>
-                    <br/>
-                    To log in, please use email address <strong>{{ DEMO_USERNAME }}</strong> with password <strong>{{ DEMO_PASSWORD }}</strong>
-                </p>
-            </div>
+    <div class="login-box">
+        <div class="login-logo">
+            <img src="v3-local/logo/logo-session.png" width="68" height="100" alt="Firefly III Logo" title="Firefly III" />
         </div>
-    {% endif %}
 
-    {# SUCCESS MESSAGE (ALWAYS SINGULAR) #}
-    {% if Session.has('success') %}
-        <div class="alert alert-success alert-dismissible" role="alert">
-            <button type="button" class="close" data-dismiss="alert">
-                <span>&times;</span><span class="sr-only">{{ 'close'|_ }}</span>
-            </button>
-            <strong>{{ 'flash_success'|_ }}</strong> {{ session('success') }}
-        </div>
-    {% endif %}
-
-
-    {% if errors.count > 0 %}
-        <div class="row">
-            <div class="col-lg-12">
-                <div class="alert alert-danger alert-dismissible" role="alert">
-                    <button type="button" class="close" data-dismiss="alert"><span>&times;</span><span class="sr-only">{{ 'close'|_ }}</span>
-                    </button>
-                    <strong>{{ 'flash_error'|_ }}</strong> {{ errors.first }}
+        {# DEMO site warning #}
+        {% if IS_DEMO_SITE %}
+            <div class="card mb-2">
+                <div class="card-body">
+                    <p>
+                        Welcome to the Firefly III demonstration website!<br/>
+                        <br/>
+                        To log in, please use email address <strong>{{ DEMO_USERNAME }}</strong> with password
+                        <strong>{{ DEMO_PASSWORD }}</strong>.
+                    </p>
                 </div>
             </div>
-        </div>
-    {% endif %}
+        {% endif %}
 
-    {% if session('logoutMessage') %}
-        <div class="row">
-            <div class="col-lg-12">
-                <div class="alert alert-info alert-dismissible" role="alert">
-                    <button type="button" class="close" data-dismiss="alert"><span>&times;</span><span class="sr-only">{{ 'close'|_ }}</span>
-                    </button>
-                    {{ session('logoutMessage') }}
-                </div>
+        {# SUCCESS MESSAGE (ALWAYS SINGULAR) #}
+        {% if Session.has('success') %}
+            <div class="alert alert-success alert-dismissible" role="alert">
+                <button type="button" class="close" data-dismiss="alert">
+                    <span>&times;</span><span class="sr-only">{{ 'close'|_ }}</span>
+                </button>
+                <strong>{{ 'flash_success'|_ }}</strong> {{ session('success') }}
             </div>
-        </div>
-    {% endif %}
+        {% endif %}
 
-    <div class="login-box-body">
-        <p class="login-box-msg">{{ 'sign_in_to_start'|_ }}</p>
-
-        <form action="{{ route('login') }}" method="post">
-            <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
-
-            <div class="form-group has-feedback">
-                {% if config('firefly.authentication_guard') == 'web' %}
-                    <input type="email" autocomplete="email" name="email" value="{% if not IS_DEMO_SITE %}{{ email }}{% else %}{{ DEMO_USERNAME }}{% endif %}" class="form-control" placeholder="{{ trans('form.email') }}"/>
-                {% else %}
-                    <input type="text" autocomplete="username" name="{{ usernameField }}" value="{{ email }}" class="form-control" placeholder="{{ trans('form.login_name') }}"/>
-                {% endif %}
-            </div>
-            <div class="form-group has-feedback">
-                <input type="password" name="password" autocomplete="current-password" {% if IS_DEMO_SITE %}value="{{ DEMO_PASSWORD }}"{% endif%} class="form-control" placeholder="{{ trans('form.password') }}"/>
-            </div>
+        {# ERROR MSG #}
+        {% if errors.count > 0 %}
             <div class="row">
-                <div class="col-xs-6">
-                    <div class="checkbox">
-                        <label>
-                            <input type="checkbox" name="remember" {% if remember %}checked="checked"{% endif %} value="1"> {{ trans('form.remember_me') }}
-                        </label>
+                <div class="col-lg-12">
+                    <div class="alert alert-danger alert-dismissible" role="alert">
+                        <button type="button" class="close" data-dismiss="alert"><span>&times;</span><span
+                                    class="sr-only">{{ 'close'|_ }}</span>
+                        </button>
+                        <strong>{{ 'flash_error'|_ }}</strong> {{ errors.first }}
                     </div>
                 </div>
-                <div class="col-xs-6">
-                    <button type="submit" class="btn btn-primary btn-block btn-flat">{{ 'sign_in'|_ }}</button>
+            </div>
+        {% endif %}
+
+        {# OTHER LOGIN MESSAGES #}
+        {% if session('logoutMessage') %}
+            <div class="row">
+                <div class="col-lg-12">
+                    <div class="alert alert-info alert-dismissible" role="alert">
+                        <button type="button" class="close" data-dismiss="alert"><span>&times;</span><span
+                                    class="sr-only">{{ 'close'|_ }}</span>
+                        </button>
+                        {{ session('logoutMessage') }}
+                    </div>
                 </div>
             </div>
-        </form>
-        {% if allowRegistration %}
-            <a href="{{ route('register') }}" class="text-center">{{ 'register_new_account'|_ }}</a><br>
-        {% endif %}
-        {% if allowReset %}
-            <a href="{{ route('password.reset.request') }}">{{ 'forgot_my_password'|_ }}</a>
         {% endif %}
+
+        <!-- /.login-logo -->
+        <div class="card">
+            <div class="card-body login-card-body">
+                <p class="login-box-msg">{{ 'sign_in_to_start'|_ }}</p>
+
+                <form action="{{ route('login') }}" method="post">
+                    <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
+                    <div class="input-group mb-3">
+
+                        {% if config('firefly.authentication_guard') == 'web' %}
+                            <input type="email" class="form-control" name="email"
+                                   placeholder="{{ trans('form.email') }}"
+                                   value="{% if not IS_DEMO_SITE %}{{ email }}{% else %}{{ DEMO_USERNAME }}{% endif %}">
+                        {% else %}
+                            <input type="text" autocomplete="username" name="{{ usernameField }}" value="{{ email }}"
+                                   class="form-control" placeholder="{{ trans('form.login_name') }}"/>
+                        {% endif %}
+                        <div class="input-group-append">
+                            <div class="input-group-text">
+                                {% if config('firefly.authentication_guard') == 'web' %}
+                                    <span class="fas fa-envelope"></span>
+                                {% else %}
+                                    <span class="fas fa-user"></span>
+                                {% endif %}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="input-group mb-3">
+                        <input type="password" name="password" autocomplete="current-password"
+                               {% if IS_DEMO_SITE %}value="{{ DEMO_PASSWORD }}"{% endif %} class="form-control"
+                               placeholder="{{ trans('form.password') }}"/>
+                        <div class="input-group-append">
+                            <div class="input-group-text">
+                                <span class="fas fa-lock"></span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-8">
+                            <div class="icheck-primary">
+                                <input type="checkbox" name="remember" {% if remember %}checked="checked"{% endif %}
+                                       value="1" id="remember">
+                                <label for="remember">
+                                    {{ trans('form.remember_me') }}
+                                </label>
+                            </div>
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-4">
+                            <button type="submit" class="btn btn-primary btn-block">{{ 'sign_in'|_ }}</button>
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                </form>
+                {% if allowReset %}
+                    <p class="mb-1">
+                        <a href="{{ route('password.reset.request') }}">{{ 'forgot_my_password'|_ }}</a>
+                    </p>
+                {% endif %}
+                {% if allowRegistration %}
+                    <p class="mb-0">
+                        <a href="{{ route('register') }}" class="text-center">{{ 'register_new_account'|_ }}</a><br>
+                    </p>
+                {% endif %}
+            </div>
+            <!-- /.login-card-body -->
+        </div>
     </div>
 {% endblock %}
 
diff --git a/resources/views/layout/v3/session.twig b/resources/views/layout/v3/session.twig
new file mode 100644
index 0000000000..7e723aff1e
--- /dev/null
+++ b/resources/views/layout/v3/session.twig
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <base href="{{ route('index') }}/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>{{ 'login_page_title'|_  }}</title>
+
+    <!-- fonts and styles -->
+    <link rel="stylesheet" href="/v3-local/css/fonts.css">
+    <link rel="stylesheet" href="/v3-local/lib/fontawesome-free/css/all.min.css">
+    <link rel="stylesheet" href="/v3-local/lib/icheck-bootstrap/icheck-bootstrap.min.css">
+    <link rel="stylesheet" href="/v3-local/dist/css/adminlte.min.css">
+</head>
+<body class="hold-transition login-page dark-mode">
+{% block content %}{% endblock %}
+
+<!-- jQuery -->
+<script src="v3-local/lib/jquery/jquery.min.js"></script>
+<!-- Bootstrap 4 -->
+<script src="v3-local/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
+<!-- AdminLTE App -->
+<script src="v3-local/dist/js/adminlte.min.js"></script>
+</body>
+</html>