From 2d62fcac06cec239605823e3695ab95565f2b215 Mon Sep 17 00:00:00 2001
From: James Cole <james@firefly-iii.org>
Date: Sun, 5 Jun 2022 14:05:02 +0200
Subject: [PATCH] Fix final modals.

---
 resources/views/auth/passwords/email.twig    | 102 +++++++++-------
 resources/views/auth/passwords/reset.twig    | 122 ++++++++++++-------
 resources/views/auth/register.twig           | 116 ++++++++++++------
 resources/views/partials/password-modal.twig |   8 +-
 4 files changed, 221 insertions(+), 127 deletions(-)

diff --git a/resources/views/auth/passwords/email.twig b/resources/views/auth/passwords/email.twig
index cbfdb62597..05638d6316 100644
--- a/resources/views/auth/passwords/email.twig
+++ b/resources/views/auth/passwords/email.twig
@@ -1,53 +1,67 @@
-{% extends "./layout/guest" %}
+{% extends "./layout/v3/session" %}
 
 {% block content %}
+    <div class="login-box">
 
-
-    {% if session.status %}
-        <div class="alert alert-success">
-            {{ session.status }}
+        <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 %}
 
-    {% if errors|length > 0 %}
-        <div class="alert alert-danger">
-            <strong>{{ 'flash_error'|_ }}</strong> {{ 'problems_with_input'|_ }}<br><br>
-            <ul>
-                {% for error in errors.all %}
-                    <li>{{ error }}</li>
-                {% endfor %}
-            </ul>
-        </div>
-    {% endif %}
-    <div class="login-box-body">
-        {% if session('status') %}
-            <p class="login-box-msg text-success">
-                {{ session('status') }}
-            </p>
-        {% else %}
-            <p class="login-box-msg">{{ 'reset_password'|_ }}</p>
-
-            <form role="form" method="POST" action="{{ route('password.email') }}">
-                <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
-
-                <div class="form-group has-feedback">
-                    <input type="email" class="form-control" name="email" placeholder="{{ trans('form.email') }}"/>
-                </div>
-
-                <div class="row">
-                    <div class="col-xs-12">
-                        <button type="submit" class="btn btn-primary btn-flat pull-right">{{ 'reset_button'|_ }}</button>
-                    </div>
-                </div>
-
-            </form>
-
-        {% endif %}
-        <a href="{{ route('login') }}">{{ 'want_to_login'|_ }}</a><br>
-        {% if allowRegistration %}
-            <a href="{{ route('register') }}" class="text-center">{{ 'register_new_account'|_ }}</a><br>
+        {% if session.status %}
+            <div class="alert alert-success">
+                {{ session.status }}
+            </div>
         {% endif %}
 
+        {% if errors|length > 0 %}
+            <div class="alert alert-danger">
+                <strong>{{ 'flash_error'|_ }}</strong> {{ 'problems_with_input'|_ }}<br><br>
+                <ul>
+                    {% for error in errors.all %}
+                        <li>{{ error }}</li>
+                    {% endfor %}
+                </ul>
+            </div>
+        {% endif %}
+
+        <div class="card">
+            <div class="card-body login-card-body">
+                {% if session('status') %}
+                    <p class="login-box-msg text-success">
+                        {{ session('status') }}
+                    </p>
+                {% else %}
+                    <p class="login-box-msg">{{ 'reset_password'|_ }}</p>
+                    <form action="{{ route('password.email') }}" method="post">
+                        <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
+                        <div class="input-group mb-3">
+                            <input type="email" class="form-control" name="email"
+                                   placeholder="{{ trans('form.email') }}"/>
+                            <div class="input-group-append">
+                                <div class="input-group-text">
+                                    <span class="fas fa-envelope"></span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-12">
+                                <button type="submit" class="btn btn-primary btn-block">{{ 'reset_button'|_ }}</button>
+                            </div>
+                            <!-- /.col -->
+                        </div>
+                    </form>
+
+                    <p class="mt-3 mb-1">
+                        <a href="{{ route('login') }}">{{ 'want_to_login'|_ }}</a>
+                    </p>
+                    {% if allowRegistration %}
+                        <p class="mb-0">
+                            <a href="{{ route('register') }}" class="text-center">{{ 'register_new_account'|_ }}</a>
+                        </p>
+                    {% endif %}
+                {% endif %}
+            </div>
+        </div>
     </div>
-
 {% endblock %}
diff --git a/resources/views/auth/passwords/reset.twig b/resources/views/auth/passwords/reset.twig
index 50f3ee56fc..4f944a5dc9 100644
--- a/resources/views/auth/passwords/reset.twig
+++ b/resources/views/auth/passwords/reset.twig
@@ -1,49 +1,89 @@
-{% extends "./layout/guest" %}
-
+{% extends "./layout/v3/session" %}
 {% block content %}
 
-    {% if errors|length > 0 %}
-        <div class="alert alert-danger">
-            <strong>{{ 'flash_error'|_ }}</strong> {{ 'problems_with_input'|_ }}<br><br>
-            <ul>
-                {% for error in errors.all %}
-                    <li>{{ error }}</li>
-                {% endfor %}
-            </ul>
+    <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 %}
 
-    <div class="register-box-body">
-        <p class="login-box-msg">{{ 'reset_password'|_ }}</p>
-        <form method="POST" action="{{ url('/password/reset') }}">
-            <input type="hidden" name="_token" value="{{ csrf_token() }}">
-            <input type="hidden" name="token" value="{{ token }}">
-
-            <div class="form-group has-feedback">
-                <input type="email" name="email" class="form-control" value="{{ old('email') }}" placeholder="{{ trans('form.email') }}"/>
+        {% if errors|length > 0 %}
+            <div class="alert alert-danger">
+                <strong>{{ 'flash_error'|_ }}</strong> {{ 'problems_with_input'|_ }}<br><br>
+                <ul>
+                    {% for error in errors.all %}
+                        <li>{{ error }}</li>
+                    {% endfor %}
+                </ul>
             </div>
-
-            <div class="form-group has-feedback">
-                <input type="password" class="form-control" placeholder="{{ trans('form.password') }}" name="password"/>
-            </div>
-
-            <div class="form-group has-feedback">
-                <input type="password" class="form-control" placeholder="{{ trans('form.password_confirmation') }}" name="password_confirmation"/>
-            </div>
-
-
-            <div class="row">
-                <div class="col-xs-12">
-                    <button type="submit" class="btn btn-primary pull-right btn-flat">{{ 'button_reset_password'|_ }}</button>
-                </div>
-            </div>
-
-        </form>
-
-        <a href="{{ route('login') }}">{{ 'want_to_login'|_ }}</a><br>
-        {% if allowRegistration %}
-            <a href="{{ route('register') }}" class="text-center">{{ 'register_new_account'|_ }}</a><br>
         {% endif %}
-    </div>
 
+        <div class="card">
+            <div class="card-body login-card-body">
+                <p class="login-box-msg">{{ 'reset_password'|_ }}</p>
+
+                <form action="{{ url('/password/reset') }}" method="post">
+                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
+                    <input type="hidden" name="token" value="{{ token }}">
+
+                    <div class="input-group mb-3">
+                        <input type="email" name="email" class="form-control" value="{{ old('email') }}" placeholder="{{ trans('form.email') }}"/>
+                        <div class="input-group-append">
+                            <div class="input-group-text">
+                                <span class="fas fa-envelope"></span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="input-group mb-3">
+                        <input type="password" class="form-control" placeholder="{{ trans('form.password') }}" name="password"/>
+                        <div class="input-group-append">
+                            <div class="input-group-text">
+                                <span class="fas fa-lock"></span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="input-group mb-3">
+                        <input type="password" class="form-control" placeholder="{{ trans('form.password_confirmation') }}" name="password_confirmation"/>
+                        <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-12">
+                            <div class="icheck-primary">
+                                <input type="checkbox" id="verify_password" checked name="verify_password" value="1">
+                                <label for="verify_password">
+                                    {{ trans('form.verify_password') }}
+                                    <a data-toggle="modal" data-target="#passwordModal" href="#passwordModal"><span
+                                                class="fa fa-fw fa-question-circle"></span></a>
+                                </label>
+
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="row">
+                        <div class="col-6 offset-6">
+                            <button type="submit" class="btn btn-primary btn-block">{{ 'button_reset_password'|_ }}</button>
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                </form>
+
+                <p class="mt-3 mb-1">
+                    <a href="{{ route('login') }}">{{ 'want_to_login'|_ }}</a>
+                </p>
+                {% if allowRegistration %}
+                    <p class="mb-0">
+                        <a href="{{ route('register') }}" class="text-center">{{ 'register_new_account'|_ }}</a>
+                    </p>
+                {% endif %}
+            </div>
+            <!-- /.login-card-body -->
+        </div>
+    </div>
+    <!-- /.login-box -->
+    {% include 'partials.password-modal' %}
 {% endblock %}
diff --git a/resources/views/auth/register.twig b/resources/views/auth/register.twig
index 6c2aa714b3..d5df1269fe 100644
--- a/resources/views/auth/register.twig
+++ b/resources/views/auth/register.twig
@@ -1,49 +1,87 @@
-{% extends "./layout/guest" %}
-
+{% extends "./layout/v3/session" %}
 {% block content %}
-
-    {% if errors|length > 0 %}
-        <div class="alert alert-danger">
-            <strong>{{ 'flash_error'|_ }}</strong> {{ 'problems_with_input'|_ }}<br><br>
-            <ul>
-                {% for error in errors.all %}
-                    <li>{{ error }}</li>
-                {% endfor %}
-            </ul>
+    <div class="register-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 %}
-    <div class="register-box-body">
-        <p class="login-box-msg">{{ 'register_new_account'|_ }}</p>
 
-        <form id="register" method="POST" action="{{ route('register') }}">
-            <input type="hidden" name="_token" value="{{ csrf_token() }}">
+        {% if errors|length > 0 %}
+            <div class="alert alert-danger">
+                <strong>{{ 'flash_error'|_ }}</strong> {{ 'problems_with_input'|_ }}<br><br>
+                <ul>
+                    {% for error in errors.all %}
+                        <li>{{ error }}</li>
+                    {% endfor %}
+                </ul>
+            </div>
+        {% endif %}
 
-            <div class="form-group has-feedback">
-                <input type="email" name="email" value="{{ email }}" class="form-control" placeholder="{{ trans('form.email') }}"/>
-            </div>
-            <div class="form-group has-feedback">
-                <input type="password" autocomplete="new-password" class="form-control" placeholder="{{ trans('form.password') }}" name="password"/>
-            </div>
-            <div class="form-group has-feedback">
-                <input type="password" autocomplete="new-password" class="form-control" placeholder="{{ trans('form.password_confirmation') }}" name="password_confirmation"/>
-            </div>
-            <div class="row">
-                <div class="col-xs-8">
-                    <div class="checkbox">
-                        <label>
-                            <input type="checkbox" checked name="verify_password" value="1"> {{ trans('form.verify_password') }} <a data-toggle="modal" data-target="#passwordModal" href="#passwordModal"><span class="fa fa-fw fa-question-circle"></span></a>
-                        </label>
+        <div class="card">
+            <div class="card-body register-card-body">
+                <p class="login-box-msg">{{ 'register_new_account'|_ }}</p>
+
+                <form action="{{ route('register') }}" method="post">
+                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
+                    <div class="input-group mb-3">
+                        <input type="email" name="email" value="{{ email }}" class="form-control"
+                               placeholder="{{ trans('form.email') }}"/>
+                        <div class="input-group-append">
+                            <div class="input-group-text">
+                                <span class="fas fa-envelope"></span>
+                            </div>
+                        </div>
                     </div>
-                </div>
-                <div class="col-xs-4">
-                    <button class="btn btn-primary pull-right btn-flat">{{ 'button_register'|_ }}</button>
-                </div>
-            </div>
-        </form>
+                    <div class="input-group mb-3">
+                        <input type="password" autocomplete="new-password" class="form-control"
+                               placeholder="{{ trans('form.password') }}" name="password"/>
+                        <div class="input-group-append">
+                            <div class="input-group-text">
+                                <span class="fas fa-lock"></span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="input-group mb-3">
+                        <input type="password" autocomplete="new-password" class="form-control"
+                               placeholder="{{ trans('form.password_confirmation') }}" name="password_confirmation"/>
+                        <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-12">
+                            <div class="icheck-primary">
+                                <input type="checkbox" id="verify_password" checked name="verify_password" value="1">
+                                <label for="verify_password">
+                                    {{ trans('form.verify_password') }}
+                                    <a data-toggle="modal" data-target="#passwordModal" href="#passwordModal"><span
+                                                class="fa fa-fw fa-question-circle"></span></a>
+                                </label>
 
-        <a href="{{ route('login') }}">{{ 'want_to_login'|_ }}</a><br>
-        <a href="{{ route('password.reset.request') }}">{{ 'forgot_my_password'|_ }}</a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-4 offset-8">
+                            <button type="submit" class="btn btn-primary btn-block">Register</button>
+                        </div>
+                    </div>
+                </form>
+
+                <p class="mb-1">
+                    <a href="{{ route('login') }}">{{ 'want_to_login'|_ }}</a>
+                </p>
+                <p class="mb-0">
+                    <a href="{{ route('password.reset.request') }}">{{ 'forgot_my_password'|_ }}</a>
+                </p>
+            </div>
+            <!-- /.form-box -->
+        </div><!-- /.card -->
     </div>
+    <!-- /.register-box -->
+
 
     {% include 'partials.password-modal' %}
 
diff --git a/resources/views/partials/password-modal.twig b/resources/views/partials/password-modal.twig
index cdb8c48654..1bda60cdfd 100644
--- a/resources/views/partials/password-modal.twig
+++ b/resources/views/partials/password-modal.twig
@@ -2,10 +2,12 @@
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span></button>
-                <h4 class="modal-title">
+                <h5 class="modal-title">
                     {{ 'secure_pw_title'|_ }}
-                </h4>
+                </h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="{{ 'close'|_ }}">
+                    <span aria-hidden="true">&times;</span>
+                </button>
             </div>
             <div class="modal-body">
                 <p>