improve forms UX by adding proper HTML attributes (#234)

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}

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>

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}

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}
               />

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}

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}
       />

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

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}

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}
         />

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')}

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">

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">

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">