Merge pull request #801 from sammyskills/feat-improve-ux

feat: improve user experience in forms

src/Language/ar/Auth.php

@@ -30,6 +30,7 @@
     'password'        => 'كلمة المرور',
     'passwordConfirm' => 'كلمة المرور (مرة اخرى)',
     'haveAccount'     => 'هل لديك حساب بالفعل؟',
+    'token'           => '(To be translated) Token',
 
     // Buttons
     'confirm' => 'تاكيد',

src/Language/bg/Auth.php

@@ -30,6 +30,7 @@
     'password'        => 'Парола',
     'passwordConfirm' => 'Парола (отново)',
     'haveAccount'     => 'Вече имате акаунт?',
+    'token'           => '(To be translated) Token',
 
     // Бутони
     'confirm' => 'Потвърди',

src/Language/de/Auth.php

@@ -30,6 +30,7 @@
     'password'        => 'Passwort',
     'passwordConfirm' => 'Passwort (erneut)',
     'haveAccount'     => 'Haben Sie bereits ein Konto?',
+    'token'           => '(To be translated) Token',
 
     // Buttons
     'confirm' => 'Bestätigen',

src/Language/en/Auth.php

@@ -30,6 +30,7 @@
     'password'        => 'Password',
     'passwordConfirm' => 'Password (again)',
     'haveAccount'     => 'Already have an account?',
+    'token'           => 'Token',
 
     // Buttons
     'confirm' => 'Confirm',

src/Language/es/Auth.php

@@ -30,6 +30,7 @@
     'password'        => 'Contraseña',
     'passwordConfirm' => 'Contraseña (otra vez)',
     'haveAccount'     => '¿Ya tienes una cuenta?',
+    'token'           => '(To be translated) Token',
 
     // Botones
     'confirm' => 'Confirmar',

src/Language/fa/Auth.php

@@ -30,6 +30,7 @@
     'password'        => 'رمز عبور',
     'passwordConfirm' => 'رمز عبور (تکرار)',
     'haveAccount'     => 'از قبل حساب کاربری دارید؟',
+    'token'           => 'توکن',
 
     // Buttons
     'confirm' => 'تایید',

src/Language/fr/Auth.php

@@ -30,6 +30,7 @@
     'password'        => 'Mot de passe',
     'passwordConfirm' => 'Mot de passe (répéter)',
     'haveAccount'     => 'Vous avez déjà un compte ?',
+    'token'           => '(To be translated) Token',
 
     // Buttons
     'confirm' => 'Confirmer',

src/Language/id/Auth.php

@@ -30,6 +30,7 @@
     'password'        => 'Kata Sandi',
     'passwordConfirm' => 'Kata Sandi (lagi)',
     'haveAccount'     => 'Sudah punya akun?',
+    'token'           => '(To be translated) Token',
 
     // Buttons
     'confirm' => 'Konfirmasi',

src/Language/it/Auth.php

@@ -30,6 +30,7 @@
     'password'        => 'Password',
     'passwordConfirm' => 'Password (ancora)',
     'haveAccount'     => 'Hai già un account?',
+    'token'           => '(To be translated) Token',
 
     // Buttons
     'confirm' => 'Conferma',

src/Language/ja/Auth.php

@@ -30,6 +30,7 @@
     'password'        => 'パスワード', // 'Password'
     'passwordConfirm' => 'パスワード（再）', // 'Password (again)'
     'haveAccount'     => 'すでにアカウントをお持ちの方', // 'Already have an account?'
+    'token'           => 'トークン', // 'Token'
 
     // Buttons
     'confirm' => '確認する', // 'Confirm'

src/Language/lt/Auth.php

@@ -30,6 +30,7 @@
     'password'        => 'Slaptažodis',
     'passwordConfirm' => 'Slaptažodis (pakartoti)',
     'haveAccount'     => 'Jau turite paskyrą?',
+    'token'           => '(To be translated) Token',
 
     // Buttons
     'confirm' => 'Patvirtinti',

src/Language/pt-BR/Auth.php

@@ -30,6 +30,7 @@
     'password'        => 'Senha',
     'passwordConfirm' => 'Senha (novamente)',
     'haveAccount'     => 'Já tem uma conta?',
+    'token'           => '(To be translated) Token',
 
     // Botões
     'confirm' => 'Confirmar',

src/Language/pt/Auth.php

@@ -30,6 +30,7 @@
     'password'        => 'Senha',
     'passwordConfirm' => 'Senha (novamente)',
     'haveAccount'     => 'Já tem uma conta?',
+    'token'           => '(To be translated) Token',
 
     // Botões
     'confirm' => 'Confirmar',

src/Language/sk/Auth.php

@@ -30,6 +30,7 @@
     'password'        => 'Heslo',
     'passwordConfirm' => 'Heslo (znova)',
     'haveAccount'     => 'Máte už účet?',
+    'token'           => '(To be translated) Token',
 
     // Buttons
     'confirm' => 'Potvrdiť',

src/Language/sr/Auth.php

@@ -30,6 +30,7 @@
     'password'        => 'Lozinka',
     'passwordConfirm' => 'Lozinka (ponovo)',
     'haveAccount'     => 'Već imate nalog?',
+    'token'           => '(To be translated) Token',
 
     // Buttons
     'confirm' => 'Potvrdi',

src/Language/sv-SE/Auth.php

@@ -30,6 +30,7 @@
     'password'        => 'Lösenord',
     'passwordConfirm' => 'Lösenord (igen)',
     'haveAccount'     => 'Har du redan ett konto?',
+    'token'           => '(To be translated) Token',
 
     // Buttons
     'confirm' => 'Bekräfta',

src/Language/tr/Auth.php

@@ -30,6 +30,7 @@
     'password'        => 'Şifre',
     'passwordConfirm' => 'Şifre (tekrar)',
     'haveAccount'     => 'Zaten hesabınız var mı?',
+    'token'           => '(To be translated) Token',
 
     // Buttons
     'confirm' => 'Onayla',

src/Language/uk/Auth.php

@@ -30,6 +30,7 @@
     'password'        => 'Пароль',
     'passwordConfirm' => 'Пароль (ще раз)',
     'haveAccount'     => 'Вже є обліковий запис?',
+    'token'           => '(To be translated) Token',
 
     // Buttons
     'confirm' => 'Підтвердити',

src/Views/email_activate_show.php

@@ -19,9 +19,10 @@
                 <?= csrf_field() ?>
 
                 <!-- Code -->
-                <div class="mb-2">
-                    <input type="text" class="form-control" name="token" placeholder="000000" inputmode="numeric"
+                <div class="form-floating mb-2">
+                    <input type="text" class="form-control" id="floatingTokenInput" name="token" placeholder="000000" inputmode="numeric"
                         pattern="[0-9]*" autocomplete="one-time-code" value="<?= old('token') ?>" required />
+                    <label for="floatingTokenInput"><?= lang('Auth.token') ?></label>
                 </div>
 
                 <div class="d-grid col-8 mx-auto m-3">

src/Views/login.php

@@ -32,13 +32,15 @@
                     <?= csrf_field() ?>
 
                     <!-- Email -->
-                    <div class="mb-2">
-                        <input type="email" class="form-control" name="email" inputmode="email" autocomplete="email" placeholder="<?= lang('Auth.email') ?>" value="<?= old('email') ?>" required />
+                    <div class="form-floating mb-3">
+                        <input type="email" class="form-control" id="floatingEmailInput" name="email" inputmode="email" autocomplete="email" placeholder="<?= lang('Auth.email') ?>" value="<?= old('email') ?>" required />
+                        <label for="floatingEmailInput"><?= lang('Auth.email') ?></label>
                     </div>
 
                     <!-- Password -->
-                    <div class="mb-2">
-                        <input type="password" class="form-control" name="password" inputmode="text" autocomplete="current-password" placeholder="<?= lang('Auth.password') ?>" required />
+                    <div class="form-floating mb-3">
+                        <input type="password" class="form-control" id="floatingPasswordInput" name="password" inputmode="text" autocomplete="current-password" placeholder="<?= lang('Auth.password') ?>" required />
+                        <label for="floatingPasswordInput"><?= lang('Auth.password') ?></label>
                     </div>
 
                     <!-- Remember me -->

src/Views/magic_link_form.php

@@ -28,9 +28,10 @@
                 <?= csrf_field() ?>
 
                 <!-- Email -->
-                <div class="mb-2">
-                    <input type="email" class="form-control" name="email" autocomplete="email" placeholder="<?= lang('Auth.email') ?>"
+                <div class="form-floating mb-2">
+                    <input type="email" class="form-control" id="floatingEmailInput" name="email" autocomplete="email" placeholder="<?= lang('Auth.email') ?>"
                            value="<?= old('email', auth()->user()->email ?? null) ?>" required />
+                    <label for="floatingEmailInput"><?= lang('Auth.email') ?></label>
                 </div>
 
                 <div class="d-grid col-12 col-md-8 mx-auto m-3">

src/Views/register.php

@@ -28,23 +28,27 @@
                     <?= csrf_field() ?>
 
                     <!-- Email -->
-                    <div class="mb-2">
-                        <input type="email" class="form-control" name="email" inputmode="email" autocomplete="email" placeholder="<?= lang('Auth.email') ?>" value="<?= old('email') ?>" required />
+                    <div class="form-floating mb-2">
+                        <input type="email" class="form-control" id="floatingEmailInput" name="email" inputmode="email" autocomplete="email" placeholder="<?= lang('Auth.email') ?>" value="<?= old('email') ?>" required />
+                        <label for="floatingEmailInput"><?= lang('Auth.email') ?></label>
                     </div>
 
                     <!-- Username -->
-                    <div class="mb-4">
-                        <input type="text" class="form-control" name="username" inputmode="text" autocomplete="username" placeholder="<?= lang('Auth.username') ?>" value="<?= old('username') ?>" required />
+                    <div class="form-floating mb-4">
+                        <input type="text" class="form-control" id="floatingUsernameInput" name="username" inputmode="text" autocomplete="username" placeholder="<?= lang('Auth.username') ?>" value="<?= old('username') ?>" required />
+                        <label for="floatingUsernameInput"><?= lang('Auth.username') ?></label>
                     </div>
 
                     <!-- Password -->
-                    <div class="mb-2">
-                        <input type="password" class="form-control" name="password" inputmode="text" autocomplete="new-password" placeholder="<?= lang('Auth.password') ?>" required />
+                    <div class="form-floating mb-2">
+                        <input type="password" class="form-control" id="floatingPasswordInput" name="password" inputmode="text" autocomplete="new-password" placeholder="<?= lang('Auth.password') ?>" required />
+                        <label for="floatingPasswordInput"><?= lang('Auth.password') ?></label>
                     </div>
 
                     <!-- Password (Again) -->
-                    <div class="mb-5">
-                        <input type="password" class="form-control" name="password_confirm" inputmode="text" autocomplete="new-password" placeholder="<?= lang('Auth.passwordConfirm') ?>" required />
+                    <div class="form-floating mb-5">
+                        <input type="password" class="form-control" id="floatingPasswordConfirmInput" name="password_confirm" inputmode="text" autocomplete="new-password" placeholder="<?= lang('Auth.passwordConfirm') ?>" required />
+                        <label for="floatingPasswordConfirmInput"><?= lang('Auth.passwordConfirm') ?></label>
                     </div>
 
                     <div class="d-grid col-12 col-md-8 mx-auto m-3">