fix(ui): improve form usability (#1563)

* fix(ui): improve form usability

* refactor: remove unnecessary <> and </> tags

* fix(ui): set url inputmode for *arr URL base fields
This commit is contained in:
TheCatLady
2021-05-04 04:42:27 -04:00
committed by GitHub
parent b05b177776
commit 26580eaa21
19 changed files with 598 additions and 634 deletions

View File

@@ -131,7 +131,7 @@ const NotificationsEmail: React.FC = () => {
types: data.types,
emailFrom: data.options.emailFrom,
smtpHost: data.options.smtpHost,
smtpPort: data.options.smtpPort,
smtpPort: data.options.smtpPort ?? 587,
secure: data.options.secure,
authUser: data.options.authUser,
authPass: data.options.authPass,
@@ -266,11 +266,22 @@ const NotificationsEmail: React.FC = () => {
<div className="form-row">
<label htmlFor="enabled" className="checkbox-label">
{intl.formatMessage(messages.agentenabled)}
<span className="label-required">*</span>
</label>
<div className="form-input">
<Field type="checkbox" id="enabled" name="enabled" />
</div>
</div>
<div className="form-row">
<label htmlFor="senderName" className="text-label">
{intl.formatMessage(messages.senderName)}
</label>
<div className="form-input">
<div className="form-input-field">
<Field id="senderName" name="senderName" type="text" />
</div>
</div>
</div>
<div className="form-row">
<label htmlFor="emailFrom" className="text-label">
{intl.formatMessage(messages.emailsender)}
@@ -282,7 +293,7 @@ const NotificationsEmail: React.FC = () => {
id="emailFrom"
name="emailFrom"
type="text"
placeholder="no-reply@example.com"
inputMode="email"
/>
</div>
{errors.emailFrom && touched.emailFrom && (
@@ -290,21 +301,6 @@ const NotificationsEmail: React.FC = () => {
)}
</div>
</div>
<div className="form-row">
<label htmlFor="senderName" className="text-label">
{intl.formatMessage(messages.senderName)}
</label>
<div className="form-input">
<div className="form-input-field">
<Field
id="senderName"
name="senderName"
placeholder="Overseerr"
type="text"
/>
</div>
</div>
</div>
<div className="form-row">
<label htmlFor="smtpHost" className="text-label">
{intl.formatMessage(messages.smtpHost)}
@@ -316,7 +312,7 @@ const NotificationsEmail: React.FC = () => {
id="smtpHost"
name="smtpHost"
type="text"
placeholder="localhost"
inputMode="url"
/>
</div>
{errors.smtpHost && touched.smtpHost && (
@@ -334,7 +330,7 @@ const NotificationsEmail: React.FC = () => {
id="smtpPort"
name="smtpPort"
type="text"
placeholder="465"
inputMode="numeric"
className="short"
/>
{errors.smtpPort && touched.smtpPort && (
@@ -385,8 +381,7 @@ const NotificationsEmail: React.FC = () => {
as="field"
id="authPass"
name="authPass"
type="password"
autoComplete="off"
autoComplete="one-time-code"
/>
</div>
</div>
@@ -441,8 +436,7 @@ const NotificationsEmail: React.FC = () => {
as="field"
id="pgpPassword"
name="pgpPassword"
type="password"
autoComplete="off"
autoComplete="one-time-code"
/>
</div>
{errors.pgpPassword && touched.pgpPassword && (