web: drop "is-valid" class use

vladimiry · Mar 19, 2021 · 0dd8a28 · 0dd8a28
1 parent fb60f12
commit 0dd8a28
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 52 deletions.
diff --git a/src/web/browser-window/app/_db-view/db-view-mails-export.component.html b/src/web/browser-window/app/_db-view/db-view-mails-export.component.html
@@ -21,7 +21,7 @@ <h5 class="modal-title">Export email messages to EML files</h5>
             <div class="input-group mb-2">
                 <input
                     (click)="selectExportDir()"
-                    [ngClass]="{'is-invalid': formControls.exportDir.invalid, 'is-valid': formControls.exportDir.valid}"
+                    [ngClass]="{'is-invalid': formControls.exportDir.invalid}"
                     class="form-control form-control-sm"
                     formControlName="exportDir"
                     placeholder="Click to select a file system directory to export data to"

diff --git a/src/web/browser-window/app/_options/account-edit.component.html b/src/web/browser-window/app/_options/account-edit.component.html
@@ -68,7 +68,7 @@
         <div *ngIf="!account" class="form-group required">
             <label>Login</label>
             <input
-                [ngClass]="controls.login.dirty ? {'is-invalid': controls.login.invalid, 'is-valid': controls.login.valid} : {}"
+                [ngClass]="{'is-invalid': controls.login.dirty && controls.login.invalid}"
                 class="form-control"
                 formControlName="login"
                 type="text"
@@ -204,9 +204,9 @@
                         </label>
                     </div>
                     <input
-                        [ngClass]="controls.externalContentProxyUrlPattern.dirty
-                               ? {'is-invalid': controls.externalContentProxyUrlPattern.invalid, 'is-valid': controls.externalContentProxyUrlPattern.valid}
-                               : {}" class="form-control" formControlName="externalContentProxyUrlPattern"
+                        [ngClass]="{'is-invalid': controls.externalContentProxyUrlPattern.dirty && controls.externalContentProxyUrlPattern.invalid}"
+                        class="form-control"
+                        formControlName="externalContentProxyUrlPattern"
                         type="text"
                     >
                     <div
@@ -238,9 +238,9 @@
                         </label>
                     </div>
                     <input
-                        [ngClass]="controls.loginDelaySecondsRange.dirty
-                               ? {'is-invalid': controls.loginDelaySecondsRange.invalid, 'is-valid': controls.loginDelaySecondsRange.valid}
-                               : {}" class="form-control" formControlName="loginDelaySecondsRange"
+                        [ngClass]="{'is-invalid': controls.loginDelaySecondsRange.dirty && controls.loginDelaySecondsRange.invalid}"
+                        class="form-control"
+                        formControlName="loginDelaySecondsRange"
                         type="text"
                     >
                     <div
@@ -278,7 +278,7 @@
                 <div class="form-group">
                     <label>Password</label>
                     <input
-                        [ngClass]="controls.password.dirty ? {'is-invalid': controls.password.invalid, 'is-valid': controls.password.valid} : {}"
+                        [ngClass]="{'is-invalid': controls.password.dirty && controls.password.invalid}"
                         class="form-control"
                         formControlName="password"
                         type="password"
@@ -297,7 +297,7 @@
                     </label>
                     <a class="d-block pull-right" href="{{ PACKAGE_GITHUB_PROJECT_URL }}/issues/10">#10</a>
                     <input
-                        [ngClass]="controls.twoFactorCode.dirty ? {'is-invalid': controls.twoFactorCode.invalid, 'is-valid': controls.twoFactorCode.valid} : {}"
+                        [ngClass]="{'is-invalid': controls.twoFactorCode.dirty && controls.twoFactorCode.invalid}"
                         class="form-control"
                         formControlName="twoFactorCode"
                         type="password"
@@ -319,7 +319,7 @@
                         <a href="{{ PACKAGE_GITHUB_PROJECT_URL }}/issues/138">#138</a>
                     </div>
                     <input
-                        [ngClass]="controls.mailPassword.dirty ? {'is-invalid': controls.mailPassword.invalid, 'is-valid': controls.mailPassword.valid} : {}"
+                        [ngClass]="{'is-invalid': controls.mailPassword.dirty && controls.mailPassword.invalid}"
                         class="form-control"
                         formControlName="mailPassword"
                         type="password"

diff --git a/src/web/browser-window/app/_options/login.component.html b/src/web/browser-window/app/_options/login.component.html
@@ -5,7 +5,7 @@ <h2>Log in</h2>
             <div class="form-group">
                 <input
                     #passwordRef
-                    [ngClass]="password.dirty ? {'is-invalid': password.invalid, 'is-valid': password.valid} : {}"
+                    [ngClass]="{'is-invalid': password.dirty && password.invalid}"
                     autocapitalize="off"
                     autocorrect="off"
                     class="form-control form-control-lg"

diff --git a/src/web/browser-window/app/_options/settings-setup.component.html b/src/web/browser-window/app/_options/settings-setup.component.html
@@ -4,20 +4,18 @@ <h2>Master Password Setup</h2>
         <fieldset [disabled]="(signingIn$ | async) || false">
             <div class="form-row">
                 <div class="form-group col-md-6">
-                    <input type="password" class="form-control form-control-lg" formControlName="password" #passwordRef
-                           placeholder="Password"
-                           [ngClass]="password.dirty ? {
-                               'is-invalid': password.invalid,
-                               'is-valid': password.valid
-                           } : {}">
+                    <input
+                        #passwordRef [ngClass]="{'is-invalid': password.dirty && password.invalid}" class="form-control form-control-lg" formControlName="password"
+                        placeholder="Password"
+                        type="password"
+                    >
                 </div>
                 <div class="form-group col-md-6">
-                    <input type="password" class="form-control form-control-lg" formControlName="passwordConfirm"
-                           placeholder="Password Confirm"
-                           [ngClass]="passwordConfirm.dirty ? {
-                               'is-invalid': passwordConfirm.invalid,
-                               'is-valid': passwordConfirm.valid
-                           } : {}">
+                    <input
+                        [ngClass]="{'is-invalid': passwordConfirm.dirty && passwordConfirm.invalid}" class="form-control form-control-lg" formControlName="passwordConfirm"
+                        placeholder="Password Confirm"
+                        type="password"
+                    >
                     <div class="invalid-feedback" *ngIf="passwordConfirm.invalid && passwordConfirm.errors?.mismatch">
                         Passwords don't match.
                     </div>

diff --git a/src/web/browser-window/app/_options/storage.component.html b/src/web/browser-window/app/_options/storage.component.html
@@ -4,28 +4,29 @@
             <form [formGroup]="form" (ngSubmit)="submit()" novalidate>
                 <div class="form-group required">
                     <label>Current password</label>
-                    <input type="password" class="form-control" formControlName="password"
-                           [ngClass]="password.dirty ? {
-                       'is-invalid': password.invalid,
-                       'is-valid': password.valid
-                   } : {}">
+                    <input
+                        [ngClass]="{'is-invalid': password.dirty && password.invalid}" class="form-control" formControlName="password"
+                        type="password"
+                    >
                 </div>
                 <div class="form-row">
                     <div class="form-group required col-md-6">
                         <label>New password</label>
-                        <input type="password" class="form-control" formControlName="newPassword"
-                               [ngClass]="newPassword.dirty ? {
-                           'is-invalid': newPassword.invalid,
-                           'is-valid': newPassword.valid
-                       } : {}">
+                        <input
+                            [ngClass]="{'is-invalid': newPassword.dirty && newPassword.invalid}"
+                            class="form-control"
+                            formControlName="newPassword"
+                            type="password"
+                        >
                     </div>
                     <div class="form-group required col-md-6">
                         <label>New Password Confirm</label>
-                        <input type="password" class="form-control" formControlName="newPasswordConfirm"
-                               [ngClass]="newPasswordConfirm.dirty ? {
-                           'is-invalid': newPasswordConfirm.invalid,
-                           'is-valid': newPasswordConfirm.valid
-                       } : {}">
+                        <input
+                            [ngClass]="{'is-invalid': newPasswordConfirm.dirty && newPasswordConfirm.invalid}"
+                            class="form-control"
+                            formControlName="newPasswordConfirm"
+                            type="password"
+                        >
                         <div class="invalid-feedback" *ngIf="newPasswordConfirm.invalid && newPasswordConfirm.errors?.mismatch">
                             Passwords don't match.
                         </div>
@@ -43,11 +44,12 @@
             <form [formGroup]="encryptionPresetForm" (ngSubmit)="submitPresets()" novalidate>
                 <div class="form-group required">
                     <label>Current Master Password</label>
-                    <input type="password" class="form-control" formControlName="password"
-                           [ngClass]="encryptionPresetForm.controls.password?.dirty ? {
-                       'is-invalid': encryptionPresetForm.controls.password?.invalid,
-                       'is-valid': encryptionPresetForm.controls.password?.valid
-                   } : {}">
+                    <input
+                        [ngClass]="{'is-invalid': encryptionPresetForm.controls.password?.dirty && encryptionPresetForm.controls.password?.invalid}"
+                        class="form-control"
+                        formControlName="password"
+                        type="password"
+                    >
                 </div>
                 <electron-mail-encryption-presets
                     [formGroup]="encryptionPresetForm"

diff --git a/src/web/browser-window/index.scss b/src/web/browser-window/index.scss
@@ -10,14 +10,6 @@ form .required label::after {
     color: theme-color("danger");
 }
 
-// "bootstrap"
-.form-control {
-    &.is-valid,
-    &.is-invalid {
-        background-position-x: 98%;
-    }
-}
-
 // "bootstrap"
 .dropdown-toggle {
     display: flex;