RVRNEXT-34 remove placeholders, use labels instead

public/static/css/rvr.css

@@ -528,6 +528,11 @@ p.paginateContainer > *:not(:last-child) {
     border-right: solid #869ab9 1px;
 }
 
+p.formLabel {
+    font-weight: 700;
+    font-size: 14px;
+}
+
 @media screen and (max-width: 424px) {
     div.gridContainer {
         grid-template-columns: auto;

public/static/js/communities/community_members.js

@@ -1,7 +1,6 @@
 (function () {
     const element = document.getElementById('newMember').elements['user_id'];
     const select = new TomSelect(element, {
-        placeholder: 'User',
         valueField: 'value',
         labelField: 'label',
         searchField: 'label',

views/account/account.php

@@ -9,12 +9,12 @@
             <?php if ($user['password'] !== null && $user['google_sub'] !== null): ?>
                 <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" placeholder="Current password" autocomplete="current-password" required minlength="6" autofocus><!--
+                    <input type="password" class="text" name="password" autocomplete="current-password" required minlength="6" autofocus><!--
                  --><button id="authenticateWithGoogleButton" class="yellow" type="button">Google</button>
                 </div>
             <?php elseif ($user['password'] !== null): ?>
                 <p class="justify small">Please confirm your identity with your password to modify your account.</p>
-                <input type="password" class="text big fullWidth" name="password" placeholder="Current password" autocomplete="current-password" required minlength="6" autofocus>
+                <input type="password" class="text big fullWidth" name="password" autocomplete="current-password" required minlength="6" autofocus>
             <?php elseif ($user['google_sub'] !== null): ?>
                 <p class="justify small">Please confirm your identity with Google to modify your account.</p>
                 <div class="inputWithButton">
@@ -23,15 +23,23 @@
                 </div>
             <?php endif; ?>
             <hr>
-            <input type="email" class="text big fullWidth" name="email" placeholder="Email address" autocomplete="username" value="<?= $user['email'] ?>">
-            <input type="text" class="text big fullWidth marginTop" name="username" placeholder="Username" value="<?= $user['username'] ?>">
-            <input type="password" class="text big fullWidth marginTop" name="password_new" placeholder="New password" autocomplete="new-password" minlength="6">
-            <input type="password" class="text big fullWidth marginTop" name="password_new_confirm" placeholder="New password confirmation" autocomplete="new-password" minlength="6">
+            <p class="formLabel">Email address</p>
+            <input type="email" class="text big fullWidth" name="email" autocomplete="username" value="<?= $user['email'] ?>">
+            <p class="formLabel marginTop">Username</p>
+            <input type="text" class="text big fullWidth" name="username" value="<?= $user['username'] ?>">
+            <p class="formLabel marginTop">New password</p>
+            <input type="password" class="text big fullWidth" name="password_new" autocomplete="new-password" minlength="6">
+            <p class="formLabel marginTop">New password confirmation</p>
+            <input type="password" class="text big fullWidth" name="password_new_confirm" autocomplete="new-password" minlength="6">
             <hr>
-            <input type="text" class="text big fullWidth marginTop" name="full_name" placeholder="Full name" value="<?= $user['full_name'] ?>" disabled>
-            <input type="text" class="text big fullWidth marginTop" name="nickname" placeholder="Nickname" value="<?= $user['nickname'] ?>">
-            <input type="text" class="text big fullWidth marginTop" name="phone" placeholder="Phone" value="<?= $user['phone'] ?>">
-            <input type="text" class="text big fullWidth marginTop" name="id_number" placeholder="ID number" value="<?= $user['id_number'] ?>">
+            <p class="formLabel marginTop">Full name</p>
+            <input type="text" class="text big fullWidth" name="full_name" value="<?= $user['full_name'] ?>" disabled>
+            <p class="formLabel marginTop marginTop">Nickname</p>
+            <input type="text" class="text big fullWidth" name="nickname" value="<?= $user['nickname'] ?>">
+            <p class="formLabel marginTop marginTop">Phone</p>
+            <input type="text" class="text big fullWidth" name="phone" value="<?= $user['phone'] ?>">
+            <p class="formLabel marginTop marginTop">ID number</p>
+            <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>

views/communities/community_currencies.php

@@ -10,7 +10,7 @@
         <table class="fullWidth">
             <thead>
                 <tr>
-                    <th style="width: calc(100% / 3); text-align: left;">Currency</th>
+                    <th style="width: calc(100% / 3); text-align: left;">Code</th>
                     <th style="width: calc(100% / 3); text-align: left;">Round digits</th>
                     <th style="width: calc(100% / 3);"></th>
                 </tr>
@@ -36,10 +36,10 @@
             <tr>
                 <td>
                     <form id="newCurrency" action="<?= Container::$routeCollection->getRoute('community.currencies.new-action')->generateLink(['communityId' => $community->getId()]) ?>" method="post" data-reload-on-success="true" data-observe-inputs="code,round_digits"></form>
-                    <input type="text" form="newCurrency" class="text fullWidth" name="code" placeholder="Currency" maxlength="3" required>
+                    <input type="text" form="newCurrency" class="text fullWidth" name="code" maxlength="3" required>
                 </td>
                 <td>
-                    <input type="number" form="newCurrency" class="text fullWidth" name="round_digits" placeholder="Round digits" min="0" max="9" required>
+                    <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>

views/communities/community_edit.php

@@ -16,10 +16,13 @@
             Container::$routeCollection->getRoute('community.new-action')->generateLink();
         ?>
         <form id="communityForm" action="<?= $formAction ?>" method="post" data-redirect-on-success="true">
-            <input type="text" class="text big fullWidth" name="name" placeholder="Name" value="<?= isset($community) ? $community->getName() : '' ?>" required>
+            <p class="formLabel">Name</p>
+            <input type="text" class="text big fullWidth" name="name" value="<?= isset($community) ? $community->getName() : '' ?>" required>
             <?php if (!isset($community)): ?>
-                <input type="text" class="text big fullWidth marginTop" name="main_currency_code" placeholder="Main currency" maxlength="3" required>
-                <input type="number" class="text big fullWidth marginTop" name="main_currency_round_digits" placeholder="Main currency round digits" min="0" max="9" required>
+                <p class="formLabel marginTop">Main currency code</p>
+                <input type="text" class="text big fullWidth" name="main_currency_code" maxlength="3" required>
+                <p class="formLabel marginTop">Main currency round digits</p>
+                <input type="number" class="text big fullWidth" name="main_currency_round_digits" min="0" max="9" required>
             <?php endif; ?>
             <p id="communityFormError" class="formError justify marginTop"></p>
             <div class="right marginTop">

views/communities/community_members.php

@@ -14,7 +14,7 @@
         <table class="fullWidth">
             <thead>
                 <tr>
-                    <th style="width: 50%;"></th>
+                    <th style="width: 50%;">User</th>
                     <th style="width: 25%; text-align: center;">Owner</th>
                     <th style="width: 25%;"></th>
                 </tr>

views/communities/currency_exchange_rates.php

@@ -45,10 +45,10 @@
                 <tr>
                     <td>
                         <form id="newExchangeRate" action="<?= Container::$routeCollection->getRoute('community.currencyExchangeRates.new-action')->generateLink(['communityId' => $community->getId(), 'code' => $currency->getCode()]) ?>" method="post" data-reload-on-success="true" data-observe-inputs="exchange_rate,valid_from"></form>
-                        <input type="number" form="newExchangeRate" class="text fullWidth" name="exchange_rate" placeholder="Exchange rate" min="0" step="0.000000001" required>
+                        <input type="number" form="newExchangeRate" class="text fullWidth" name="exchange_rate" min="0" step="0.000000001" required>
                     </td>
                     <td>
-                        <input type="datetime-local" form="newExchangeRate" class="text fullWidth" name="valid_from" placeholder="Valid from" required>
+                        <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>

views/communities/transaction_edit.php

@@ -17,27 +17,33 @@
             Container::$routeCollection->getRoute('community.transactions.new-action')->generateLink(['communityId' => $community->getId()]);
         ?>
         <form id="transactionForm" action="<?= $formAction ?>" method="post" data-redirect-on-success="<?= Container::$routeCollection->getRoute('community.transactions')->generateLink(['communityId' => $community->getId()]) ?>">
+            <p class="formLabel">Payer</p>
             <select class="big fullWidth" name="payer_user_id" required>
-                <option value="" hidden>[Payer]</option>
+                <option value="" hidden></option>
                 <?php foreach ($members as $member): ?>
                     <option value="<?= $member->getUser()->getId() ?>" <?= isset($transaction) && $transaction->getPayerUserId() === $member->getUser()->getId() ? 'selected' : '' ?>><?= $member->getUser()->getDisplayName() ?></option>
                 <?php endforeach; ?>
             </select>
-            <select class="big fullWidth marginTop" name="payee_user_id">
-                <option value="">[Payee]</option>
+            <p class="formLabel marginTop">Payee</p>
+            <select class="big fullWidth" name="payee_user_id">
+                <option value="">[common]</option>
                 <?php foreach ($members as $member): ?>
                     <option value="<?= $member->getUser()->getId() ?>" <?= isset($transaction) && $transaction->getPayeeUserId() === $member->getUser()->getId() ? 'selected' : '' ?>><?= $member->getUser()->getDisplayName() ?></option>
                 <?php endforeach; ?>
             </select>
-            <input type="text" class="text big fullWidth marginTop" name="description" placeholder="Description" value="<?= isset($transaction) ? $transaction->getDescription() : '' ?>" required>
-            <input type="number" class="text big fullWidth marginTop" name="sum" placeholder="Sum" value="<?= isset($transaction) ? $transaction->getSum() : '' ?>" min="0" step="0.000000001" required>
-            <select class="big fullWidth marginTop" name="currency_id" required>
-                <option value="" hidden>[Currency]</option>
+            <p class="formLabel marginTop">Description</p>
+            <input type="text" class="text big fullWidth" name="description" value="<?= isset($transaction) ? $transaction->getDescription() : '' ?>" required>
+            <p class="formLabel marginTop">Sum</p>
+            <input type="number" class="text big fullWidth" name="sum" value="<?= isset($transaction) ? $transaction->getSum() : '' ?>" min="0" step="0.000000001" required>
+            <p class="formLabel marginTop">Currency</p>
+            <select class="big fullWidth" name="currency_id" required>
+                <option value="" hidden></option>
                 <?php foreach ($currencies as $currency): ?>
                     <option value="<?= $currency->getId() ?>" <?= isset($transaction) && $transaction->getCurrencyId() === $currency->getId() ? 'selected' : '' ?>><?= $currency->getCode() ?></option>
                 <?php endforeach; ?>
             </select>
-            <input type="datetime-local" class="text big fullWidth marginTop" name="time" placeholder="Time" value="<?= isset($transaction) ? $transaction->getTimeDate()->format('Y-m-d\TH:i') : (new DateTime())->format('Y-m-d\TH:i') ?>" required>
+            <p class="formLabel marginTop">Time</p>
+            <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;">
                 <?php if (isset($transaction)): ?>

views/login/login.php

@@ -4,8 +4,10 @@
     <h2>Login</h2>
     <div class="box compactBox">
         <form id="loginForm" action="<?= Container::$routeCollection->getRoute('login-action')->generateLink() ?>" method="post" data-redirect-on-success="<?= $redirectUrl ?>">
-            <input type="text" class="text big fullWidth" name="email" placeholder="Email address / Username" autocomplete="username" required autofocus>
-            <input type="password" class="text big fullWidth marginTop" name="password" placeholder="Password" autocomplete="current-password" required minlength="6">
+            <p class="formLabel">Email address / Username</p>
+            <input type="text" class="text big fullWidth" name="email" autocomplete="username" required autofocus>
+            <p class="formLabel marginTop">Password</p>
+            <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>

views/login/password_reset_request.php

@@ -6,7 +6,8 @@
     <h2>Request password reset</h2>
     <div class="box compactBox">
         <form id="passwordResetForm" action="<?= Container::$routeCollection->getRoute('password.requestReset-action')->generateLink() ?>" method="post" data-redirect-on-success="<?= Container::$routeCollection->getRoute('password.requestReset.success')->generateLink() ?>">
-            <input type="email" class="text big fullWidth" name="email" placeholder="Email address" value="<?= isset($email) ? $email : '' ?>" required autofocus>
+            <p class="formLabel">Email address</p>
+            <input type="email" class="text big fullWidth" name="email" value="<?= isset($email) ? $email : '' ?>" required autofocus>
             <?php if (!empty($_ENV['RECAPTCHA_SITEKEY'])): ?>
                 <div class="marginTop">
                     <div class="g-recaptcha" data-sitekey="<?= $_ENV['RECAPTCHA_SITEKEY'] ?>"></div>

views/login/reset_password.php

@@ -5,9 +5,12 @@
     <div class="box compactBox">
         <?php if ($success) : ?>
             <form id="resetPasswordForm" action="<?= Container::$routeCollection->getRoute('password.reset-action')->generateLink(['token' => $token]) ?>"" method="post" data-redirect-on-success="<?= $redirectUrl ?>">
-                <input type="text" class="text big fullWidth" name="email" placeholder="Email address / Username" autocomplete="username" value="<?= $email ?>" disabled>
-                <input type="password" class="text big fullWidth marginTop" name="password" placeholder="Password" autocomplete="new-password" required minlength="6" autofocus>
-                <input type="password" class="text big fullWidth marginTop" name="password_confirm" placeholder="Password confirmation" autocomplete="new-password" required minlength="6">
+                <p class="formLabel">Email address</p>
+                <input type="text" class="text big fullWidth" name="email" autocomplete="username" value="<?= $email ?>" disabled>
+                <p class="formLabel marginTop">Password</p>
+                <input type="password" class="text big fullWidth" name="password" autocomplete="new-password" required minlength="6" autofocus>
+                <p class="formLabel marginTop">Password confirmation</p>
+                <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>