From 14fcedcc5dc71dea18f34ca0c66513c1d898e4fb Mon Sep 17 00:00:00 2001
From: Yang Luo <hsluoyz@qq.com>
Date: Fri, 29 Dec 2023 23:31:50 +0800
Subject: [PATCH] feat: support HTML in Email content

---
 object/provider.go          |  2 +-
 web/src/ProviderEditPage.js | 46 ++++++++++++++++++++++++++++++-------
 2 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/object/provider.go b/object/provider.go
index f5fa86cb..9524fbd7 100644
--- a/object/provider.go
+++ b/object/provider.go
@@ -52,7 +52,7 @@ type Provider struct {
 	Port       int    `json:"port"`
 	DisableSsl bool   `json:"disableSsl"` // If the provider type is WeChat, DisableSsl means EnableQRCode
 	Title      string `xorm:"varchar(100)" json:"title"`
-	Content    string `xorm:"varchar(1000)" json:"content"` // If provider type is WeChat, Content means QRCode string by Base64 encoding
+	Content    string `xorm:"varchar(2000)" json:"content"` // If provider type is WeChat, Content means QRCode string by Base64 encoding
 	Receiver   string `xorm:"varchar(100)" json:"receiver"`
 
 	RegionId     string `xorm:"varchar(100)" json:"regionId"`
diff --git a/web/src/ProviderEditPage.js b/web/src/ProviderEditPage.js
index 65dfa536..2794bd08 100644
--- a/web/src/ProviderEditPage.js
+++ b/web/src/ProviderEditPage.js
@@ -29,6 +29,14 @@ import {CaptchaPreview} from "./common/CaptchaPreview";
 import {CountryCodeSelect} from "./common/select/CountryCodeSelect";
 import * as Web3Auth from "./auth/Web3Auth";
 
+import {Controlled as CodeMirror} from "react-codemirror2";
+import "codemirror/lib/codemirror.css";
+
+require("codemirror/theme/material-darker.css");
+require("codemirror/mode/htmlmixed/htmlmixed");
+require("codemirror/mode/xml/xml");
+require("codemirror/mode/css/css");
+
 const {Option} = Select;
 const {TextArea} = Input;
 
@@ -966,19 +974,41 @@ class ProviderEditPage extends React.Component {
                   {Setting.getLabel(i18next.t("provider:Email content"), i18next.t("provider:Email content - Tooltip"))} :
                 </Col>
                 <Col span={22} >
-                  <TextArea autoSize={{minRows: 3, maxRows: 100}} value={this.state.provider.content} onChange={e => {
-                    this.updateProviderField("content", e.target.value);
-                  }} />
+                  <Row style={{marginTop: "20px"}} >
+                    <Button style={{marginLeft: "10px", marginBottom: "5px"}} type="primary" onClick={() => this.updateProviderField("content", "You have requested a verification code at Casdoor. Here is your code: %s, please enter in 5 minutes.")} >
+                      {i18next.t("provider:Reset to Default")}
+                    </Button>
+                  </Row>
+                  <Row>
+                    <Col span={Setting.isMobile() ? 22 : 11}>
+                      <div style={{height: "300px", margin: "10px"}}>
+                        <CodeMirror
+                          value={this.state.provider.content}
+                          options={{mode: "htmlmixed", theme: "material-darker"}}
+                          onBeforeChange={(editor, data, value) => {
+                            this.updateProviderField("content", value);
+                          }}
+                        />
+                      </div>
+                    </Col>
+                    <Col span={1} />
+                    <Col span={Setting.isMobile() ? 22 : 11}>
+                      <div style={{margin: "10px"}}>
+                        <div dangerouslySetInnerHTML={{__html: this.state.provider.content.replace("%s", "123456")}} />
+                      </div>
+                    </Col>
+                  </Row>
                 </Col>
               </Row>
-              <Row style={{marginTop: "20px"}} >
+              <Row style={{marginTop: "20px"}}>
                 <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
                   {Setting.getLabel(i18next.t("provider:Test Email"), i18next.t("provider:Test Email - Tooltip"))} :
                 </Col>
-                <Col span={4} >
-                  <Input value={this.state.provider.receiver} placeholder = {i18next.t("user:Input your email")} onChange={e => {
-                    this.updateProviderField("receiver", e.target.value);
-                  }} />
+                <Col span={4}>
+                  <Input value={this.state.provider.receiver} placeholder={i18next.t("user:Input your email")}
+                    onChange={e => {
+                      this.updateProviderField("receiver", e.target.value);
+                    }} />
                 </Col>
                 {["Azure ACS"].includes(this.state.provider.type) ? null : (
                   <Button style={{marginLeft: "10px", marginBottom: "5px"}} type="primary" onClick={() => ProviderEditTestEmail.connectSmtpServer(this.state.provider)} >