email/phone edit mode opt-out invalid cues

client/res/templates/fields/email/edit.tpl

@@ -4,7 +4,7 @@
     <div class="input-group email-address-block">
         <input
             type="email"
-            class="form-control email-address"
+            class="form-control email-address{{#if optOut}} text-strikethrough{{/if}}{{#if invalid}} text-danger{{/if}}"
             value="{{emailAddress}}" autocomplete="espo-{{../name}}"
             maxlength={{../itemMaxLength}}
         >

client/res/templates/fields/phone/edit.tpl

@@ -10,7 +10,7 @@
         <span class="input-group-item input-group-item-middle">
             <input
                 type="input"
-                class="form-control phone-number no-margin-shifting"
+                class="form-control phone-number no-margin-shifting{{#if optOut}} text-strikethrough{{/if}}{{#if invalid}} text-danger{{/if}}"
                 value="{{phoneNumber}}"
                 autocomplete="espo-{{../name}}"
                 maxlength={{../itemMaxLength}}

client/src/views/fields/email.js

@@ -50,22 +50,43 @@ class EmailFieldView extends VarcharFieldView {
             const $target = $(e.currentTarget);
             const $block = $(e.currentTarget).closest('div.email-address-block');
             const property = $target.data('property-type');
+            const $input = $block.find('input.email-address');
 
             if (property === 'primary') {
                 if (!$target.hasClass('active')) {
-                    if ($block.find('input.email-address').val() !== '') {
+                    if ($input.val() !== '') {
                         this.$el.find('button.email-property[data-property-type="primary"]')
                             .removeClass('active').children().addClass('text-muted');
 
                         $target.addClass('active').children().removeClass('text-muted');
                     }
                 }
+
+                this.trigger('change');
+
+                return;
+            }
+
+            let active = false;
+
+            if ($target.hasClass('active')) {
+                $target.removeClass('active').children().addClass('text-muted');
             } else {
-                if ($target.hasClass('active')) {
-                    $target.removeClass('active').children().addClass('text-muted');
-                } else {
-                    $target.addClass('active').children().removeClass('text-muted');
-                }
+                $target.addClass('active').children().removeClass('text-muted');
+
+                active = true;
+            }
+
+            if (property === 'optOut') {
+                active ?
+                    $input.addClass('text-strikethrough') :
+                    $input.removeClass('text-strikethrough');
+            }
+
+            if (property === 'invalid') {
+                active ?
+                    $input.addClass('text-danger') :
+                    $input.removeClass('text-danger');
             }
 
             this.trigger('change');

client/src/views/fields/phone.js

@@ -50,23 +50,43 @@ class PhoneFieldView extends VarcharFieldView {
             const $target = $(e.currentTarget);
             const $block = $(e.currentTarget).closest('div.phone-number-block');
             const property = $target.data('property-type');
+            const $input = $block.find('input.phone-number');
 
             if (property === 'primary') {
                 if (!$target.hasClass('active')) {
-                    if ($block.find('input.phone-number').val() !== '') {
+                    if ($input.val() !== '') {
                         this.$el.find('button.phone-property[data-property-type="primary"]')
                             .removeClass('active').children().addClass('text-muted');
 
                         $target.addClass('active').children().removeClass('text-muted');
                     }
                 }
+
+                this.trigger('change');
+
+                return;
             }
-            else {
-                if ($target.hasClass('active')) {
-                    $target.removeClass('active').children().addClass('text-muted');
-                } else {
-                    $target.addClass('active').children().removeClass('text-muted');
-                }
+
+            let active = false;
+
+            if ($target.hasClass('active')) {
+                $target.removeClass('active').children().addClass('text-muted');
+            } else {
+                $target.addClass('active').children().removeClass('text-muted');
+
+                active = true;
+            }
+
+            if (property === 'optOut') {
+                active ?
+                    $input.addClass('text-strikethrough') :
+                    $input.removeClass('text-strikethrough');
+            }
+
+            if (property === 'invalid') {
+                active ?
+                    $input.addClass('text-danger') :
+                    $input.removeClass('text-danger');
             }
 
             this.trigger('change');

frontend/less/espo/elements/type.less

@@ -105,6 +105,10 @@ b, strong {
     font-weight: 600;
 }
 
+.text-strikethrough {
+    text-decoration: line-through;
+}
+
 .text-large {
     font-size: 1.4em;
 }