Merge pull request 'feature/RVRNEXT-38-use-font-awesome' (!51) from feature/RVRNEXT-38-use-font-awesome into master

Reviewed-on: #51

public/static/css/rvr.css

@@ -404,6 +404,10 @@ header>p>span>a:link, header>p>span>a:visited {
     color: inherit;
 }
 
+header>p>span>a:hover, header>p>span>a:focus {
+    text-decoration: none;
+}
+
 header>p>span:not(:last-child) {
     border-right: solid white 1px;
     padding-right: 6px;

public/static/js/account/account.js

@@ -59,11 +59,10 @@ var Account = {
 };
 
 (function () {
-    document.getElementById('authenticateWithGoogleButton').onclick = function () {
+    var authenticateWithGoogleButton = document.getElementById('authenticateWithGoogleButton');
-        Account.openGoogleAuthenticate();
+    if (authenticateWithGoogleButton) {
-    };
+        authenticateWithGoogleButton.onclick = function () {
-
+            Account.openGoogleAuthenticate();
-    document.getElementsByTagName('form')[0].onreset = function () {
+        };
-        Account.resetGoogleAuthentication();
+    }
-    };
 })();

public/static/js/rvr.js

@@ -97,7 +97,7 @@ var RVR = {
             RVR.showModalWithContent('Confirmation', this.dataset.confirmation, [
                 {
                     type: 'button',
-                    text: self.textContent,
+                    html: this.dataset.confirmationButton ? this.dataset.confirmationButton : this.innerHTML,
                     classNames: ['red'],
                     onclick: function() {
                         var event = new Event('submit', {'bubbles': true, 'cancelable': true});
@@ -147,7 +147,11 @@ var RVR = {
 
             button.classList.add('marginTop');
             button.classList.add('marginRight');
-            button.textContent = extraButton.text;
+            if (typeof extraButton.html !== 'undefined') {
+                button.innerHTML = extraButton.html;
+            } else {
+                button.textContent = extraButton.text;
+            }
 
             if (extraButton.type === 'a') {
                 button.href = extraButton.href;

public/static/package-lock.json

@@ -2,6 +2,11 @@
   "requires": true,
   "lockfileVersion": 1,
   "dependencies": {
+    "@fortawesome/fontawesome-free": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.0.tgz",
+      "integrity": "sha512-0NyytTlPJwB/BF5LtRV8rrABDbe3TdTXqNB3PdZ+UUUZAEIrdOJdmABqKjt4AXwIoJNaRVVZEXxpNrqvE1GAYQ=="
+    },
     "@orchidjs/sifter": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@orchidjs/sifter/-/sifter-1.0.3.tgz",

public/static/package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.4.0",
     "leaflet": "^1.6.0",
     "leaflet.markercluster": "^1.4.1",
     "tom-select": "^2.2.2"

src/Controller/LoginController.php

@@ -281,7 +281,7 @@ class LoginController
         $mail = new Mail();
         $mail->addRecipient($email);
         $mail->setSubject($_ENV['APP_NAME'] . ' - Password reset');
-        $mail->setBodyFromTemplate('password.reset', [
+        $mail->setBodyFromTemplate('password-reset', [
             'EMAIL' => $email,
             'RESET_LINK' => \Container::$request->getBase() .
                 \Container::$routeCollection->getRoute('password.reset')->generateLink(['token' => $token]),

views/account/account.php

@@ -10,7 +10,7 @@
                 <p class="justify small">Please confirm your identity with your password or with Google to modify your account.</p>
                 <div class="inputWithButton">
                     <input type="password" class="text" name="password" autocomplete="current-password" required minlength="6" autofocus><!--
-                 --><button id="authenticateWithGoogleButton" class="yellow" type="button">Google</button>
+                 --><button id="authenticateWithGoogleButton" class="yellow" type="button"><i class="fa-brands fa-google"></i></button>
                 </div>
             <?php elseif ($user['password'] !== null): ?>
                 <p class="justify small">Please confirm your identity with your password to modify your account.</p>
@@ -19,7 +19,7 @@
                 <p class="justify small">Please confirm your identity with Google to modify your account.</p>
                 <div class="inputWithButton">
                     <input type="text" class="text" name="password" placeholder="Authenticate with Google..." disabled><!--
-                 --><button id="authenticateWithGoogleButton" class="yellow" type="button">Google</button>
+                 --><button id="authenticateWithGoogleButton" class="yellow" type="button"><i class="fa-brands fa-google"></i></button>
                 </div>
             <?php endif; ?>
             <hr>
@@ -42,15 +42,15 @@
             <input type="text" class="text big fullWidth" name="id_number" value="<?= $user['id_number'] ?>">
             <p id="accountFormError" class="formError justify marginTop"></p>
             <div class="right marginTop">
-                <button type="submit" name="submit_button" disabled>Save</button>
+                <button type="submit" name="submit_button" disabled><i class="fa-regular fa-floppy-disk"></i> Save</button>
             </div>
             <hr>
             <div class="center">
                 <?php if ($user['google_sub'] === null): ?>
-                    <a class="button yellow" href="<?= Container::$routeCollection->getRoute('account.googleConnect')->generateLink() ?>" title="Connect with Google">Connect with Google</a>
+                    <a class="button yellow" href="<?= Container::$routeCollection->getRoute('account.googleConnect')->generateLink() ?>" title="Connect with Google"><i class="fa-solid fa-link"></i> Connect with Google</a>
                 <?php else: ?>
                     <?php if ($user['password'] !== null): ?>
-                        <a class="button yellow" href="<?= Container::$routeCollection->getRoute('account.googleDisconnect')->generateLink() ?>" title="Disconnect from Google">Disconnect from Google</a>
+                        <a class="button yellow" href="<?= Container::$routeCollection->getRoute('account.googleDisconnect')->generateLink() ?>" title="Disconnect from Google"><i class="fa-solid fa-link-slash"></i> Disconnect from Google</a>
                     <?php else: ?>
                         <p class="bold small">Your account does not have a password. Please set a password if you want to disconnect your account from Google.</p>
                     <?php endif; ?>

views/account/google_connect.php

@@ -13,7 +13,7 @@
                 <input type="password" class="text big fullWidth" name="password" autocomplete="current-password" required minlength="6" autofocus>
                 <p class="formError justify marginTop"></p>
                 <div class="right marginTop">
-                    <button class="marginRight" type="submit" name="submit">Connect</button><!--
+                    <button class="marginRight" type="submit" name="submit"><i class="fa-solid fa-link"></i> Connect</button><!--
                  --><a class="button gray" href="<?= Container::$routeCollection->getRoute('account')->generateLink() ?>" title="Back to account">Cancel</a>
                 </div>
             </form>

views/account/google_disconnect.php

@@ -10,7 +10,7 @@
             <input type="password" class="text big fullWidth" name="password" autocomplete="current-password" required minlength="6" autofocus>
             <p class="formError justify marginTop"></p>
             <div class="right marginTop">
-                <button class="red marginRight" type="submit" name="submit">Disconnect</button><!--
+                <button class="red marginRight" type="submit" name="submit"><i class="fa-solid fa-link-slash"></i> Disconnect</button><!--
              --><a class="button gray" href="<?= Container::$routeCollection->getRoute('account')->generateLink() ?>" title="Back to account">Cancel</a>
             </div>
         </form>

views/communities/community_currencies.php

@@ -26,9 +26,9 @@
                         <input type="number" form="editCurrency_<?= $currency->getId() ?>" class="text fullWidth" name="round_digits" value="<?= $currency->getRoundDigits() ?>" min="0" max="9" required>
                     </td>
                     <td style="text-align: right; font-size: 0;">
-                        <button type="submit" form="editCurrency_<?= $currency->getId() ?>" name="submit_button" class="small" disabled>Save</button>
+                        <button type="submit" form="editCurrency_<?= $currency->getId() ?>" name="submit_button" class="small" disabled><i class="fa-regular fa-floppy-disk"></i></button>
                         <?php if ($currency->getId() !== $community->getMainCurrencyId()): ?>
-                            <button type="submit" form="deleteCurrency_<?= $currency->getId() ?>" name="submit_button" data-confirmation="Are you sure you want to delete this currency?" class="small red marginLeft">Delete</button>
+                            <button type="submit" form="deleteCurrency_<?= $currency->getId() ?>" name="submit_button" data-confirmation="Are you sure you want to delete this currency?" data-confirmation-button='<i class="fa-regular fa-trash-can"></i> Delete' class="small red marginLeft"><i class="fa-regular fa-trash-can"></i></button>
                         <?php endif; ?>
                     </td>
                 </tr>
@@ -42,7 +42,7 @@
                     <input type="number" form="newCurrency" class="text fullWidth" name="round_digits" min="0" max="9" required>
                 </td>
                 <td style="text-align: right;">
-                    <button type="submit" form="newCurrency" name="submit_button" class="small" disabled>Add</button>
+                    <button type="submit" form="newCurrency" name="submit_button" class="small" disabled><i class="fa-regular fa-plus"></i></button>
                 </td>
             </tr>
         </table>

views/communities/community_edit.php

@@ -26,7 +26,7 @@
             <?php endif; ?>
             <p id="communityFormError" class="formError justify marginTop"></p>
             <div class="right marginTop">
-                <button type="submit" name="submit_button"><?= isset($community) ? 'Save' : 'Create' ?></button>
+                <button type="submit" name="submit_button"><?= isset($community) ? '<i class="fa-regular fa-floppy-disk"></i> Save' : '<i class="fa-regular fa-plus"></i> Create' ?></button>
             </div>
         </form>
     </div>

views/communities/community_members.php

@@ -32,8 +32,8 @@
                     </td>
                     <td style="text-align: right;">
                         <?php if ($editable): ?>
-                            <button type="submit" form="editMember_<?= $member->getId() ?>" name="submit_button" class="small marginRight" disabled>Save</button><!--
+                            <button type="submit" form="editMember_<?= $member->getId() ?>" name="submit_button" class="small marginRight" disabled><i class="fa-regular fa-floppy-disk"></i></button><!--
-                         --><button type="submit" form="deleteMember_<?= $member->getId() ?>" name="submit_button" data-confirmation="Are you sure you want to delete this member?" class="small red">Delete</button>
+                         --><button type="submit" form="deleteMember_<?= $member->getId() ?>" name="submit_button" data-confirmation="Are you sure you want to delete this member?" data-confirmation-button='<i class="fa-regular fa-trash-can"></i> Delete' class="small red"><i class="fa-regular fa-trash-can"></i></button>
                         <?php endif; ?>
                     </td>
                 </tr>
@@ -47,7 +47,7 @@
                     <input type="checkbox" form="newMember" name="owner" />
                 </td>
                 <td style="text-align: right;">
-                    <button type="submit" form="newMember" name="submit_button" class="small" disabled>Add</button>
+                    <button type="submit" form="newMember" name="submit_button" class="small" disabled><i class="fa-regular fa-plus"></i></button>
                 </td>
             </tr>
         </table>

views/communities/currency_exchange_rates.php

@@ -32,8 +32,8 @@
                             <input type="datetime-local" form="editExchangeRate_<?= $currencyExchangeRate->getId() ?>" class="text fullWidth" name="valid_from" value="<?= $currencyExchangeRate->getValidFromDate()->format('Y-m-d\TH:i') ?>" required>
                         </td>
                         <td style="text-align: right;">
-                            <button type="submit" form="editExchangeRate_<?= $currencyExchangeRate->getId() ?>" name="submit_button" class="small marginRight" disabled>Save</button><!--
+                            <button type="submit" form="editExchangeRate_<?= $currencyExchangeRate->getId() ?>" name="submit_button" class="small marginRight" disabled><i class="fa-regular fa-floppy-disk"></i></button><!--
-                         --><button type="submit" form="deleteCurrency_<?= $currencyExchangeRate->getId() ?>" name="submit_button" data-confirmation="Are you sure you want to delete this exchange rate?" class="small red">Delete</button>
+                         --><button type="submit" form="deleteCurrency_<?= $currencyExchangeRate->getId() ?>" name="submit_button" data-confirmation="Are you sure you want to delete this exchange rate?" data-confirmation-button='<i class="fa-regular fa-trash-can"></i> Delete' class="small red"><i class="fa-regular fa-trash-can"></i></button>
                         </td>
                     <?php else: ?>
                         <td><?= $currencyExchangeRate->getExchangeRate() ?></td>
@@ -51,7 +51,7 @@
                         <input type="datetime-local" form="newExchangeRate" class="text fullWidth" name="valid_from" required>
                     </td>
                     <td style="text-align: right;">
-                        <button type="submit" form="newExchangeRate" name="submit_button" class="small" disabled>Add</button>
+                        <button type="submit" form="newExchangeRate" name="submit_button" class="small" disabled><i class="fa-regular fa-plus"></i></button>
                     </td>
                 </tr>
             <?php endif; ?>

views/communities/transaction_edit.php

@@ -46,9 +46,9 @@
             <input type="datetime-local" class="text big fullWidth" name="time" value="<?= isset($transaction) ? $transaction->getTimeDate()->format('Y-m-d\TH:i') : (new DateTime())->format('Y-m-d\TH:i') ?>" required>
             <p class="formError justify marginTop"></p>
             <div class="right marginTop" style="font-size: 0;">
-                <button type="submit" name="submit_button"><?= isset($transaction) ? 'Save' : 'Create' ?></button>
+                <button type="submit" name="submit_button"><?= isset($transaction) ? '<i class="fa-regular fa-floppy-disk"></i> Save' : '<i class="fa-regular fa-plus"></i> Create' ?></button>
                 <?php if (isset($transaction)): ?>
-                    <button type="submit" form="deleteTransaction"  name="submit_button" data-confirmation="Are you sure you want to delete this transaction?" class="red marginLeft">Delete</button>
+                    <button type="submit" form="deleteTransaction"  name="submit_button" data-confirmation="Are you sure you want to delete this transaction?" class="red marginLeft"><i class="fa-regular fa-trash-can"></i> Delete</button>
                 <?php endif; ?>
             </div>
         </form>

views/communities/transactions.php

@@ -30,7 +30,7 @@
             <div class="box transaction">
                 <div>
                     <p style="font-weight: bold;"><?= $transaction->getDescription() ?></p>
-                    <p class="small"><?= $transaction->getPayerUser()->getDisplayName() ?> ► <?= $transaction->getPayeeUser() ? $transaction->getPayeeUser()->getDisplayName() : '[common]' ?></p>
+                    <p class="small"><?= $transaction->getPayerUser()->getDisplayName() ?> <i class="fa-solid fa-caret-right"></i> <?= $transaction->getPayeeUser() ? $transaction->getPayeeUser()->getDisplayName() : '[common]' ?></p>
                     <p class="small"><?= $transaction->getTimeDate()->format('Y-m-d H:i') ?></p>
                 </div>
                 <div style="text-align: right;">

views/login/login.php

@@ -10,12 +10,12 @@
             <input type="password" class="text big fullWidth" name="password" autocomplete="current-password" required minlength="6">
             <p id="loginFormError" class="formError justify marginTop"></p>
             <div class="right marginTop">
-                <button type="submit">Login</button>
+                <button type="submit"><i class="fa-solid fa-arrow-right-to-bracket"></i> Login</button>
             </div>
             <p class="center marginTop"><a href="<?= Container::$routeCollection->getRoute('password.requestReset')->generateLink() ?>" title="Request password reset">Forgot your password?</a></p>
             <hr>
             <div class="center">
-                <a class="button yellow" href="<?= Container::$routeCollection->getRoute('login.google')->generateLink() ?>" title="Login with Google">Login with Google</a>
+                <a class="button yellow" href="<?= Container::$routeCollection->getRoute('login.google')->generateLink() ?>" title="Login with Google"><i class="fa-brands fa-google"></i> Login with Google</a>
             </div>
         </form>
     </div>

views/login/password_reset_request.php

@@ -15,7 +15,7 @@
             <?php endif; ?>
             <p id="passwordResetFormError" class="formError justify marginTop"></p>
             <div class="right marginTop">
-                <button type="submit">Continue</button>
+                <button type="submit"><i class="fa-solid fa-key"></i> Reset password</button>
             </div>
         </form>
     </div>

views/login/reset_password.php

@@ -13,7 +13,7 @@
                 <input type="password" class="text big fullWidth" name="password_confirm"  autocomplete="new-password" required minlength="6">
                 <p id="resetPasswordFormError" class="formError justify marginTop"></p>
                 <div class="right">
-                    <button class="marginTop" type="submit">Reset password</button>
+                    <button class="marginTop" type="submit"><i class="fa-solid fa-key"></i> Reset password</button>
                 </div>
             </form>
         <?php else: ?>

views/templates/layout_normal.php

@@ -10,14 +10,12 @@
     </h1>
     <p>
         <?php if (Container::$request->user()) : ?>
-            <span><a href="<?= Container::$routeCollection->getRoute('account')->generateLink() ?>" title="Account">
+            <span><a href="<?= Container::$routeCollection->getRoute('account')->generateLink() ?>" title="Account"><!--
-                <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
+              --><i class="fa-regular fa-user"></i> <?= Container::$request->user()->getDisplayName() ?><!--
-                <svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+         --></a></span><!--
-                    <path fill-rule="evenodd" d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
+         --><span><a href="<?= Container::$routeCollection->getRoute('logout')->generateLink() ?>" title="Logout"><!--
-                </svg><!--
+              --><i class="fa-solid fa-arrow-right-from-bracket"></i> Logout</a><!--
-             --><?= Container::$request->user()->getDisplayName() ?><!--
+         --></span>
-            --></a></span><!--
-            --><span><a href="<?= Container::$routeCollection->getRoute('logout')->generateLink() ?>" title="Logout">Logout</a></span>
         <?php endif; ?>
     </p>
 </header>

views/templates/rvr.php

@@ -18,6 +18,10 @@
     <link href="https://fonts.googleapis.com/css2?family=Oxygen:wght@400;700&amp;display=block" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Oxygen+Mono:wght@400&amp;display=block" rel="stylesheet">
     <link href="<?= $_ENV['STATIC_ROOT'] ?>/css/rvr.css?rev=<?= REVISION ?>" rel="stylesheet">
+    <link href="<?= $_ENV['STATIC_ROOT'] ?>/node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css?rev=<?= REVISION ?>" rel="stylesheet">
+    <link href="<?= $_ENV['STATIC_ROOT'] ?>/node_modules/@fortawesome/fontawesome-free/css/solid.min.css?rev=<?= REVISION ?>" rel="stylesheet">
+    <link href="<?= $_ENV['STATIC_ROOT'] ?>/node_modules/@fortawesome/fontawesome-free/css/regular.min.css?rev=<?= REVISION ?>" rel="stylesheet">
+    <link href="<?= $_ENV['STATIC_ROOT'] ?>/node_modules/@fortawesome/fontawesome-free/css/brands.min.css?rev=<?= REVISION ?>" rel="stylesheet">
     @yields('externalCss')
     @yields('inlineCss')
     <link rel="icon" type="image/png" sizes="192x192" href="<?= $_ENV['STATIC_ROOT'] ?>/img/favicon/192x192.png?rev=<?= REVISION ?>">