dnnsoftware · mitchelsellers · Jun 22, 2022 · Jun 22, 2022 · Jun 22, 2022
diff --git a/Dnn.AdminExperience/ClientSide/Servers.Web/src/components/Tabs/SmtpServer.jsx b/Dnn.AdminExperience/ClientSide/Servers.Web/src/components/Tabs/SmtpServer.jsx
@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import { GridSystem, Button } from "@dnnsoftware/dnn-react-common";
 import RadioButtonBlock from "../common/RadioButtonBlock";
 import EditBlock from "../common/EditBlock";
+import EditPwdBlock from "../common/EditPwdBlock";
 import SwitchBlock from "../common/SwitchBlock";
 import localization from "../../localization";
 import { connect } from "react-redux";
@@ -159,7 +160,9 @@ class SmtpServer extends Component {
       return (
         <div className="dnn-servers-info-panel-big smtpServerSettingsTab">
           <div className="warningBox">
-            <div className="warningText">{localization.get("NonCoreMailProvider")}</div>
+            <div className="warningText">
+              {localization.get("NonCoreMailProvider")}
+            </div>
           </div>
         </div>
       );
@@ -241,7 +244,7 @@ class SmtpServer extends Component {
               </div>
             )}
             {smtpSettingsVisible && credentialVisible && (
-              <div className="tooltipAdjustment border-bottom">
+              <div className="tooltipAdjustment">
                 <EditBlock
                   label={localization.get("plSMTPUsername")}
                   tooltip={localization.get("plSMTPUsername.Help")}
@@ -251,19 +254,22 @@ class SmtpServer extends Component {
                   error={props.errors["smtpUserName"]}
                 />
 
-                <EditBlock
+                <EditPwdBlock
                   label={localization.get("plSMTPPassword")}
+                  changeButtonText={localization.get("Change")}
                   tooltip={localization.get("plSMTPPassword.Help")}
                   value={selectedSmtpSettings.smtpPassword}
                   isGlobal={areGlobalSettings}
-                  type="password"
                   onChange={this.onChangeField.bind(this, "smtpPassword")}
+                  onClear={() =>
+                    props.onChangeSmtpConfigurationValue("smtpPassword", "")
+                  }
                   error={props.errors["smtpPassword"]}
                 />
               </div>
             )}
             {smtpSettingsVisible && (
-              <div className="tooltipAdjustment border-bottom">
+              <div className="tooltipAdjustment border-bottom" style={{paddingBottom: "22px"}}>
                 <SwitchBlock
                   label={localization.get("plSMTPEnableSSL")}
                   onText={localization.get("SwitchOn")}

diff --git a/Dnn.AdminExperience/ClientSide/Servers.Web/src/components/common/EditBlock.jsx b/Dnn.AdminExperience/ClientSide/Servers.Web/src/components/common/EditBlock.jsx
@@ -1,38 +1,47 @@
-import React, {Component } from "react";
+import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { Label, InputGroup, SingleLineInputWithError } from "@dnnsoftware/dnn-react-common";
+import {
+  Label,
+  InputGroup,
+  SingleLineInputWithError,
+} from "@dnnsoftware/dnn-react-common";
 import GlobalIcon from "./GlobalIcon";
 
 export default class EditBlock extends Component {
-
-    render() {
-        const {props} = this;
+  render() {
+    const { props } = this;
 
-        return <InputGroup>
-            <Label className="title"
-                tooltipMessage={props.tooltip}
-                label={props.label} style={{width: "auto"}} />
-            {props.isGlobal && <GlobalIcon /> }
-            <SingleLineInputWithError 
-                value={props.value} 
-                type={props.type} 
-                onChange={props.onChange}
-                error={!!props.error} 
-                errorMessage={props.error} />
-        </InputGroup>;
-    }
+    return (
+      <InputGroup>
+        <Label
+          className="title"
+          tooltipMessage={props.tooltip}
+          label={props.label}
+          style={{ width: "auto" }}
+        />
+        {props.isGlobal && <GlobalIcon />}
+        <SingleLineInputWithError
+          value={props.value}
+          type={props.type}
+          onChange={props.onChange}
+          error={!!props.error}
+          errorMessage={props.error}
+        />
+      </InputGroup>
+    );
+  }
 }
 
 EditBlock.propTypes = {
-    label: PropTypes.string,
-    tooltip: PropTypes.string,
-    value: PropTypes.string,
-    isGlobal: PropTypes.bool.isRequired,
-    type: PropTypes.string,
-    onChange: PropTypes.func,
-    error: PropTypes.string
+  label: PropTypes.string,
+  tooltip: PropTypes.string,
+  value: PropTypes.string,
+  isGlobal: PropTypes.bool.isRequired,
+  type: PropTypes.string,
+  onChange: PropTypes.func,
+  error: PropTypes.string,
 };
 
 EditBlock.defaultProps = {
-    isGlobal: false
-};
+  isGlobal: false,
+};
diff --git a/Dnn.AdminExperience/ClientSide/Servers.Web/src/components/common/EditPwdBlock.jsx b/Dnn.AdminExperience/ClientSide/Servers.Web/src/components/common/EditPwdBlock.jsx
@@ -0,0 +1,72 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import {
+  Label,
+  InputGroup,
+  SingleLineInputWithError,
+} from "@dnnsoftware/dnn-react-common";
+import GlobalIcon from "./GlobalIcon";
+
+export default class EditPwdBlock extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      canChange: props.value === "",
+    };
+  }
+  render() {
+    const { props, state } = this;
+    console.log(state);
+
+    return (
+      <InputGroup>
+        <Label
+          className="title"
+          tooltipMessage={props.tooltip}
+          label={props.label}
+          style={{ width: "auto" }}
+        />
+        {props.isGlobal && <GlobalIcon />}
+        {state.canChange ? (
+          <SingleLineInputWithError
+            value={props.value}
+            type="password"
+            onChange={props.onChange}
+            error={!!props.error}
+            errorMessage={props.error}
+          />
+        ) : (
+          <div className="edit-pwd-button">
+            <div>
+              <a
+                href="#"
+                onClick={(e) => {
+                  e.preventDefault();
+                  props.onClear();
+                  this.setState({ canChange: true });
+                }}
+              >
+                [ {props.changeButtonText} ]
+              </a>
+            </div>
+          </div>
+        )}
+      </InputGroup>
+    );
+  }
+}
+
+EditPwdBlock.propTypes = {
+  label: PropTypes.string,
+  changeButtonText: PropTypes.string,
+  tooltip: PropTypes.string,
+  value: PropTypes.string,
+  isGlobal: PropTypes.bool.isRequired,
+  onChange: PropTypes.func,
+  onClear: PropTypes.func,
+  error: PropTypes.string,
+};
+
+EditPwdBlock.defaultProps = {
+  isGlobal: false,
+};
diff --git a/Dnn.AdminExperience/ClientSide/Servers.Web/src/components/common/style.less b/Dnn.AdminExperience/ClientSide/Servers.Web/src/components/common/style.less
@@ -1,29 +1,43 @@
 .dnn-servers-info-panel-big .serversTabWarningInfo {
+  color: red;
+  margin-bottom: 32px;
+
+  .title label {
+    text-transform: none;
+  }
+
+  .dnn-label {
+    width: 95%;
+    padding: 5px;
+    padding-bottom: 20px;
     color: red;
-    margin-bottom: 32px;
-
-    .title label {
-        text-transform: none;
+    font-weight: bold;
+  }
+
+  div {
+    float: left;
+    svg {
+      width: 20px;
+      height: 20px;
+      fill: red;
+      margin-top: 4px;
+      :hover {
+        fill: red;
+      }
     }
-
-    .dnn-label {
-        width: 95%;
-        padding: 5px;
-        padding-bottom: 20px;
-        color: red;
-        font-weight: bold;
-    }
-
-    div {
-        float: left;
-        svg {
-            width: 20px;
-            height: 20px;
-            fill: red;
-            margin-top:4px;
-            :hover {
-                fill: red;
-            }
-        }
-    }
-}
+  }
+}
+
+.dnn-ui-common-input-group div a {
+  color: #00a0e9;
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+.dnn-ui-common-input-group .edit-pwd-button {
+  display: block;
+  width: 100%;
+  float: left;
+  height: 62px;
+  padding-top: 4px;
+}
diff --git a/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/Services/ServerSettingsSmtpAdminController.cs b/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/Services/ServerSettingsSmtpAdminController.cs
@@ -28,6 +28,7 @@ namespace Dnn.PersonaBar.Servers.Services
     [MenuPermission(Scope = ServiceScope.Admin)]
     public class ServerSettingsSmtpAdminController : PersonaBarApiController
     {
+        private const string ObfuscateString = "*****";
         private static readonly ILog Logger = LoggerSource.Instance.GetLogger(typeof(ServerSettingsSmtpHostController));
 
         [HttpGet]
@@ -49,7 +50,7 @@ public HttpResponseMessage GetSmtpSettings()
                         smtpAuthentication = PortalController.GetPortalSetting("SMTPAuthentication", portalId, "0"),
                         enableSmtpSsl = PortalController.GetPortalSetting("SMTPEnableSSL", portalId, string.Empty) == "Y",
                         smtpUserName = PortalController.GetPortalSetting("SMTPUsername", portalId, string.Empty),
-                        smtpPassword = PortalController.GetEncryptedString("SMTPPassword", portalId, Config.GetDecryptionkey()),
+                        smtpPassword = GetSmtpPassword(portalId, true),
                     },
                     portalName = PortalSettings.Current.PortalName,
                     hideCoreSettings = ProviderConfiguration.GetProviderConfiguration("mail").GetDefaultProvider().Attributes.GetValueOrDefault("hideCoreSettings", false),
@@ -72,6 +73,11 @@ public HttpResponseMessage UpdateSmtpSettings(UpdateSmtpSettingsRequest request)
                 var portalId = PortalSettings.Current.PortalId;
                 PortalController.UpdatePortalSetting(portalId, "SMTPmode", request.SmtpServerMode, false);
 
+                if (request.SmtpPassword == ObfuscateString)
+                {
+                    request.SmtpPassword = GetSmtpPassword(portalId, false);
+                }
+
                 // admins can only change site settings
                 PortalController.UpdatePortalSetting(portalId, "SMTPServer", request.SmtpServer, false);
                 PortalController.UpdatePortalSetting(portalId, "SMTPConnectionLimit", request.SmtpConnectionLimit, false);
@@ -111,14 +117,14 @@ public HttpResponseMessage SendTestEmail(SendTestEmailRequest request)
 
                 var errMessage = Mail.SendMail(mailFrom,
                     mailTo,
-                    "",
-                    "",
+                    string.Empty,
+                    string.Empty,
                     MailPriority.Normal,
                     Localization.GetSystemMessage(this.PortalSettings, "EMAIL_SMTP_TEST_SUBJECT"),
                     MailFormat.Text,
                     Encoding.UTF8,
-                    "",
-                    "",
+                    string.Empty,
+                    string.Empty,
                     smtpHostMode ? HostController.Instance.GetString("SMTPServer") : request.SmtpServer,
                     smtpHostMode ? HostController.Instance.GetString("SMTPAuthentication") : request.SmtpAuthentication.ToString(),
                     smtpHostMode ? HostController.Instance.GetString("SMTPUsername") : request.SmtpUsername,
@@ -145,5 +151,17 @@ public HttpResponseMessage SendTestEmail(SendTestEmailRequest request)
                 return this.Request.CreateErrorResponse(HttpStatusCode.InternalServerError, exc);
             }
         }
+
+        private static string GetSmtpPassword(int portalId, bool obfuscate)
+        {
+            var pwd = PortalController.GetEncryptedString("SMTPPassword", portalId, Config.GetDecryptionkey());
+
+            if (obfuscate && !string.IsNullOrEmpty(pwd))
+            {
+                return ObfuscateString;
+            }
+
+            return pwd;
+        }
     }
 }