From 27499848f1f2d0a2dd26581eb1b698cbbead1d8d Mon Sep 17 00:00:00 2001
From: Pig Fang <g-plane@hotmail.com>
Date: Thu, 1 Oct 2020 20:37:27 +0800
Subject: [PATCH] improve forms UX by adding proper HTML attributes (#234)

---
 resources/assets/src/components/Modal.tsx                  | 2 ++
 resources/assets/src/components/ModalInput.tsx             | 4 +++-
 .../assets/src/views/admin/PlayersManagement/index.tsx     | 3 ++-
 .../assets/src/views/admin/PluginsManagement/index.tsx     | 1 +
 resources/assets/src/views/admin/UsersManagement/index.tsx | 4 +++-
 resources/assets/src/views/auth/Forgot.tsx                 | 1 +
 resources/assets/src/views/auth/Login.tsx                  | 2 ++
 resources/assets/src/views/auth/Registration.tsx           | 3 +++
 resources/assets/src/views/auth/Reset.tsx                  | 2 ++
 resources/assets/src/views/skinlib/SkinLibrary/index.tsx   | 1 +
 resources/views/user/profile.twig                          | 2 +-
 resources/views/user/widgets/profile/email.twig            | 2 +-
 resources/views/user/widgets/profile/password.twig         | 7 ++++---
 13 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/resources/assets/src/components/Modal.tsx b/resources/assets/src/components/Modal.tsx
index 055d06cd..e2c8246c 100644
--- a/resources/assets/src/components/Modal.tsx
+++ b/resources/assets/src/components/Modal.tsx
@@ -43,6 +43,7 @@ const Modal: React.FC<ModalOptions & Props> = (props) => {
     input = '',
     placeholder = '',
     inputType = 'text',
+    inputMode,
     type = 'default',
     showHeader = true,
     center = false,
@@ -136,6 +137,7 @@ const Modal: React.FC<ModalOptions & Props> = (props) => {
             choices={props.choices}
             onChange={handleInputChange}
             inputType={inputType}
+            inputMode={inputMode}
             placeholder={placeholder}
             invalid={!valid}
             validatorMessage={validatorMessage}
diff --git a/resources/assets/src/components/ModalInput.tsx b/resources/assets/src/components/ModalInput.tsx
index 88cd3505..d155f8c0 100644
--- a/resources/assets/src/components/ModalInput.tsx
+++ b/resources/assets/src/components/ModalInput.tsx
@@ -1,7 +1,8 @@
-import React from 'react'
+import React, { HTMLAttributes } from 'react'
 
 export interface Props {
   inputType?: string
+  inputMode?: HTMLAttributes<HTMLInputElement>['inputMode']
   choices?: { text: string; value: string }[]
   placeholder?: string
 }
@@ -39,6 +40,7 @@ const ModalInput: React.FC<InternalProps & Props> = (props) => (
           value={props.value}
           onChange={props.onChange}
           type={props.inputType}
+          inputMode={props.inputMode}
           className="form-control"
           placeholder={props.placeholder}
         ></input>
diff --git a/resources/assets/src/views/admin/PlayersManagement/index.tsx b/resources/assets/src/views/admin/PlayersManagement/index.tsx
index 462e5374..f50876a1 100644
--- a/resources/assets/src/views/admin/PlayersManagement/index.tsx
+++ b/resources/assets/src/views/admin/PlayersManagement/index.tsx
@@ -101,7 +101,7 @@ const PlayersManagement: React.FC = () => {
         mode: 'prompt',
         text: t('admin.changePlayerOwner'),
         input: player.uid.toString(),
-        inputType: 'number',
+        inputMode: 'numeric',
       })
       uid = Number.parseInt(value)
     } catch {
@@ -168,6 +168,7 @@ const PlayersManagement: React.FC = () => {
         <form className="input-group" onSubmit={handleSubmitQuery}>
           <input
             type="text"
+            inputMode="search"
             className="form-control"
             title={t('vendor.datatable.search')}
             value={query}
diff --git a/resources/assets/src/views/admin/PluginsManagement/index.tsx b/resources/assets/src/views/admin/PluginsManagement/index.tsx
index dc85ba15..429bc66c 100644
--- a/resources/assets/src/views/admin/PluginsManagement/index.tsx
+++ b/resources/assets/src/views/admin/PluginsManagement/index.tsx
@@ -223,6 +223,7 @@ const PluginsManagement: React.FC = () => {
                 type="text"
                 id="zip-url"
                 className="form-control"
+                inputMode="url"
                 value={url}
                 onChange={handleUrlChange}
               />
diff --git a/resources/assets/src/views/admin/UsersManagement/index.tsx b/resources/assets/src/views/admin/UsersManagement/index.tsx
index 5e059e7b..259a30b1 100644
--- a/resources/assets/src/views/admin/UsersManagement/index.tsx
+++ b/resources/assets/src/views/admin/UsersManagement/index.tsx
@@ -73,6 +73,7 @@ const UsersManagement: React.FC = () => {
         mode: 'prompt',
         text: t('admin.newUserEmail'),
         input: user.email,
+        inputMode: 'email',
         validator: (value: string) => {
           if (!value) {
             return t('auth.emptyEmail')
@@ -137,7 +138,7 @@ const UsersManagement: React.FC = () => {
         mode: 'prompt',
         text: t('admin.newScore'),
         input: user.score.toString(),
-        inputType: 'number',
+        inputMode: 'numeric',
       })
       score = Number.parseInt(value)
     } catch {
@@ -259,6 +260,7 @@ const UsersManagement: React.FC = () => {
         <form className="input-group" onSubmit={handleSubmitQuery}>
           <input
             type="text"
+            inputMode="search"
             className="form-control"
             title={t('vendor.datatable.search')}
             value={query}
diff --git a/resources/assets/src/views/auth/Forgot.tsx b/resources/assets/src/views/auth/Forgot.tsx
index 2ef742cb..346b1482 100644
--- a/resources/assets/src/views/auth/Forgot.tsx
+++ b/resources/assets/src/views/auth/Forgot.tsx
@@ -42,6 +42,7 @@ const Forgot: React.FC = () => {
         type="email"
         placeholder={t('auth.email')}
         required
+        autoFocus
         value={email}
         onChange={setEmail}
       />
diff --git a/resources/assets/src/views/auth/Login.tsx b/resources/assets/src/views/auth/Login.tsx
index 725f1753..bd164025 100644
--- a/resources/assets/src/views/auth/Login.tsx
+++ b/resources/assets/src/views/auth/Login.tsx
@@ -98,6 +98,7 @@ const Login: React.FC = () => {
         type="text"
         placeholder={t('auth.identification')}
         required
+        autoFocus
         value={identification}
         onChange={setIdentification}
       />
@@ -106,6 +107,7 @@ const Login: React.FC = () => {
           type="password"
           className="form-control"
           placeholder={t('auth.password')}
+          autoComplete="current-password"
           value={password}
           onChange={handlePasswordChange}
           required
diff --git a/resources/assets/src/views/auth/Registration.tsx b/resources/assets/src/views/auth/Registration.tsx
index 5cbdf167..f18c577a 100644
--- a/resources/assets/src/views/auth/Registration.tsx
+++ b/resources/assets/src/views/auth/Registration.tsx
@@ -79,6 +79,7 @@ const Registration: React.FC = () => {
       <EmailSuggestion
         type="email"
         required
+        autoFocus
         placeholder={t('auth.email')}
         value={email}
         onChange={setEmail}
@@ -91,6 +92,7 @@ const Registration: React.FC = () => {
           maxLength={32}
           className="form-control"
           placeholder={t('auth.password')}
+          autoComplete="new-password"
           value={password}
           onChange={handlePasswordChange}
         />
@@ -108,6 +110,7 @@ const Registration: React.FC = () => {
           maxLength={32}
           className="form-control"
           placeholder={t('auth.repeat-pwd')}
+          autoComplete="new-password"
           ref={confirmationRef}
           value={confirmation}
           onChange={handleConfirmationChange}
diff --git a/resources/assets/src/views/auth/Reset.tsx b/resources/assets/src/views/auth/Reset.tsx
index 888a275d..62a1b174 100644
--- a/resources/assets/src/views/auth/Reset.tsx
+++ b/resources/assets/src/views/auth/Reset.tsx
@@ -55,6 +55,7 @@ const Reset: React.FC = () => {
         <input
           type="password"
           required
+          autoFocus
           minLength={8}
           maxLength={32}
           className="form-control"
@@ -76,6 +77,7 @@ const Reset: React.FC = () => {
           maxLength={32}
           className="form-control"
           placeholder={t('auth.repeat-pwd')}
+          autoComplete="new-password"
           value={confirmation}
           onChange={handleConfirmationChange}
         />
diff --git a/resources/assets/src/views/skinlib/SkinLibrary/index.tsx b/resources/assets/src/views/skinlib/SkinLibrary/index.tsx
index 63926067..e385b595 100644
--- a/resources/assets/src/views/skinlib/SkinLibrary/index.tsx
+++ b/resources/assets/src/views/skinlib/SkinLibrary/index.tsx
@@ -192,6 +192,7 @@ const SkinLibrary: React.FC = () => {
                   </div>
                   <input
                     type="text"
+                    inputMode="search"
                     className="form-control"
                     value={name}
                     placeholder={t('vendor.datatable.search')}
diff --git a/resources/views/user/profile.twig b/resources/views/user/profile.twig
index 736b22cd..07025d7a 100644
--- a/resources/views/user/profile.twig
+++ b/resources/views/user/profile.twig
@@ -20,7 +20,7 @@
           <div>{{ trans('user.profile.delete.modal-notice')|nl2br|raw }}</div>
           <br>
           <input type="password" class="form-control" required name="password"
-            placeholder="{{ trans('user.profile.delete.password') }}">
+            placeholder="{{ trans('user.profile.delete.password') }}" autocomplete="current-password">
         </div>
         <div class="modal-footer d-flex justify-content-between">
           <button type="button" class="btn btn-outline-light" data-dismiss="modal">
diff --git a/resources/views/user/widgets/profile/email.twig b/resources/views/user/widgets/profile/email.twig
index f704ea44..47353441 100644
--- a/resources/views/user/widgets/profile/email.twig
+++ b/resources/views/user/widgets/profile/email.twig
@@ -12,7 +12,7 @@
     </div>
     <div class="form-group">
       <input type="password" class="form-control" name="password" required
-        placeholder="{{ trans('user.profile.email.password') }}">
+        placeholder="{{ trans('user.profile.email.password') }}" autocomplete="current-password">
     </div>
   </div>
   <div class="card-footer">
diff --git a/resources/views/user/widgets/profile/password.twig b/resources/views/user/widgets/profile/password.twig
index 97ac7dc5..55aa59d7 100644
--- a/resources/views/user/widgets/profile/password.twig
+++ b/resources/views/user/widgets/profile/password.twig
@@ -7,19 +7,20 @@
   <div class="card-body">
     <div class="form-group">
       <label>{{ trans('user.profile.password.old') }}</label>
-      <input type="password" class="form-control" name="oldPassword" required>
+      <input type="password" class="form-control" name="oldPassword"
+        required autocomplete="current-password">
     </div>
 
     <div class="form-group">
       <label>{{ trans('user.profile.password.new') }}</label>
       <input type="password" class="form-control" name="newPassword" required
-        minlength="8" maxlength="32">
+        minlength="8" maxlength="32" autocomplete="new-password">
     </div>
 
     <div class="form-group">
       <label>{{ trans('user.profile.password.confirm') }}</label>
       <input type="password" class="form-control" name="confirm" required
-        minlength="8" maxlength="32">
+        minlength="8" maxlength="32" autocomplete="new-password">
     </div>
   </div>
   <div class="card-footer">