From 2b786af35bc89989cd93c1a40d4a8b81f222ea80 Mon Sep 17 00:00:00 2001
From: Yuri Kuznetsov <yurikuzn@users.noreply.github.com>
Date: Wed, 21 Feb 2024 12:33:11 +0200
Subject: [PATCH] email/phone edit mode opt-out invalid cues

---
 client/res/templates/fields/email/edit.tpl |  2 +-
 client/res/templates/fields/phone/edit.tpl |  2 +-
 client/src/views/fields/email.js           | 33 +++++++++++++++++----
 client/src/views/fields/phone.js           | 34 +++++++++++++++++-----
 frontend/less/espo/elements/type.less      |  4 +++
 5 files changed, 60 insertions(+), 15 deletions(-)

diff --git a/client/res/templates/fields/email/edit.tpl b/client/res/templates/fields/email/edit.tpl
index 46b005128d..3fa670ee7f 100644
--- a/client/res/templates/fields/email/edit.tpl
+++ b/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}}
         >
diff --git a/client/res/templates/fields/phone/edit.tpl b/client/res/templates/fields/phone/edit.tpl
index ccb11acab2..da3e876ec2 100644
--- a/client/res/templates/fields/phone/edit.tpl
+++ b/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}}
diff --git a/client/src/views/fields/email.js b/client/src/views/fields/email.js
index 36bc3f4c60..cf59c51fad 100644
--- a/client/src/views/fields/email.js
+++ b/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');
diff --git a/client/src/views/fields/phone.js b/client/src/views/fields/phone.js
index c777ccd5eb..159181307d 100644
--- a/client/src/views/fields/phone.js
+++ b/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');
diff --git a/frontend/less/espo/elements/type.less b/frontend/less/espo/elements/type.less
index 1d55ba1225..689b7b7bde 100644
--- a/frontend/less/espo/elements/type.less
+++ b/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;
 }