证书内容输入框支持拖动文件上传

internal/web/actions/default/servers/certs/updatePopup.go

@@ -26,18 +26,20 @@ func (this *UpdatePopupAction) RunGet(params struct {
 		this.ErrorPage(err)
 		return
 	}
-	certConfigJSON := certConfigResp.SslCertJSON
+	var certConfigJSON = certConfigResp.SslCertJSON
 	if len(certConfigJSON) == 0 {
 		this.NotFound("cert", params.CertId)
 		return
 	}
 
-	certConfig := &sslconfigs.SSLCertConfig{}
+	var certConfig = &sslconfigs.SSLCertConfig{}
 	err = json.Unmarshal(certConfigJSON, certConfig)
 	if err != nil {
 		this.ErrorPage(err)
 		return
 	}
+	certConfig.CertData = nil // cert & key 不需要在界面上显示
+	certConfig.KeyData = nil
 	this.Data["certConfig"] = certConfig
 
 	this.Show()

web/public/js/components/common/file-textarea.js

@@ -21,6 +21,9 @@ Vue.component("file-textarea", {
 		},
 		setValue: function (value) {
 			this.realValue = value
+		},
+		focus: function () {
+			this.$refs.textarea.focus()
 		}
 	},
 	template: `<textarea @drop.prevent="drop" @dragover.prevent="dragover" ref="textarea" v-model="realValue"></textarea>`

web/views/@default/servers/certs/updatePopup.html

@@ -1,6 +1,6 @@
 {$layout "layout_popup"}
 
-<h3>修改证书</h3>
+<h3>修改证书<span><span v-if="certConfig.dnsNames != null && certConfig.dnsNames.length > 0">&nbsp; （包含{{certConfig.dnsNames[0]}}<var v-if="certConfig.dnsNames.length > 1" style="font-style: normal">等{{certConfig.dnsNames.length}}个</var>域名）</span></span></h3>
 
 <form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
 	<input type="hidden" name="certId" :value="certConfig.id"/>
@@ -26,16 +26,16 @@
 			<td><span v-if="textMode">输入证书内容</span><span v-else>选择证书文件</span></td>
 			<td>
                 <input type="file" name="certFile" accept="application/x-pem-file, application/pkcs10, application/x-pkcs12, application/x-x509-user-cert, application/x-x509-ca-cert, application/pkix-cert" v-if="!textMode"/>
-                <textarea class="wide-code" ref="certTextField" spellcheck="false" name="certText" placeholder="-----BEGIN CERTIFICATE-----" v-if="textMode" style="font-size: 0.7em"></textarea>
+                <file-textarea class="wide-code" ref="certTextField" spellcheck="false" name="certText" placeholder="-----BEGIN CERTIFICATE-----" v-if="textMode" style="font-size: 0.7em"></file-textarea>
-                <p class="comment"><a href="" @click.prevent="switchTextMode">[<span v-if="!textMode">输入内容</span><span v-else>上传文件</span>]</a>。文件内容中通常含有"-----BEGIN CERTIFICATE-----"类似的信息。</p>
+                <p class="comment"><a href="" @click.prevent="switchTextMode">[<span v-if="!textMode">输入内容</span><span v-else>上传文件</span>]</a>。文件内容中通常含有"-----BEGIN CERTIFICATE-----"类似的信息<span v-if="textMode">，可以直接拖动证书文件到输入框，留空表示不修改</span>。</p>
 			</td>
 		</tr>
 		<tr v-show="isCA == 0">
 			<td><span v-if="textMode">输入私钥内容</span><span v-else>选择私钥文件</span></td>
 			<td>
                 <input type="file" name="keyFile" accept="application/pkcs8" v-if="!textMode"/>
-                <textarea class="wide-code" spellcheck="false" name="keyText" placeholder="-----BEGIN RSA PRIVATE KEY-----" v-if="textMode" style="font-size: 0.7em"></textarea>
+                <file-textarea class="wide-code" spellcheck="false" name="keyText" placeholder="-----BEGIN RSA PRIVATE KEY-----" v-if="textMode" style="font-size: 0.7em"></file-textarea>
-                <p class="comment"><a href="" @click.prevent="switchTextMode">[<span v-if="!textMode">输入内容</span><span v-else>上传文件</span>]</a>。文件内容中通常含有"-----BEGIN RSA PRIVATE KEY-----"类似的信息。</p>
+                <p class="comment"><a href="" @click.prevent="switchTextMode">[<span v-if="!textMode">输入内容</span><span v-else>上传文件</span>]</a>。文件内容中通常含有"-----BEGIN RSA PRIVATE KEY-----"类似的信息<span v-if="textMode">，可以直接拖动证书文件到输入框，留空表示不修改</span>。</p>
 			</td>
 		</tr>
 		<tr>
@@ -49,7 +49,7 @@
 				</td>
 			</tr>
 			<tr>
-				<td>是否启用</td>
+				<td>启用当前证书</td>
 				<td>
 					<div class="ui checkbox">
 						<input type="checkbox" name="isOn" value="1" v-model="certConfig.isOn"/>

web/views/@default/servers/certs/uploadPopup.html

@@ -25,16 +25,16 @@
 			<td><span v-if="textMode">输入证书内容</span><span v-else>选择证书文件</span> *</td>
 			<td>
 				<input type="file" name="certFile" accept="application/x-pem-file, application/pkcs10, application/x-pkcs12, application/x-x509-user-cert, application/x-x509-ca-cert, application/pkix-cert" v-if="!textMode"/>
-                <textarea class="wide-code" ref="certTextField" spellcheck="false" name="certText" placeholder="-----BEGIN CERTIFICATE-----" v-if="textMode" style="font-size: 0.7em"></textarea>
+                <file-textarea class="wide-code" ref="certTextField" spellcheck="false" name="certText" placeholder="-----BEGIN CERTIFICATE-----" v-if="textMode" style="font-size: 0.7em"></file-textarea>
-                <p class="comment"><a href="" @click.prevent="switchTextMode">[<span v-if="!textMode">输入内容</span><span v-else>上传文件</span>]</a>。文件内容中通常含有"-----BEGIN CERTIFICATE-----"类似的信息。</p>
+                <p class="comment"><a href="" @click.prevent="switchTextMode">[<span v-if="!textMode">输入内容</span><span v-else>上传文件</span>]</a>。文件内容中通常含有"-----BEGIN CERTIFICATE-----"类似的信息<span v-if="textMode">，可以直接拖动证书文件到输入框</span>。</p>
 			</td>
 		</tr>
 		<tr v-show="isCA == 0">
 			<td><span v-if="textMode">输入私钥内容</span><span v-else>选择私钥文件</span> *</td>
 			<td>
 				<input type="file" name="keyFile" accept="application/pkcs8" v-if="!textMode"/>
-                <textarea class="wide-code" spellcheck="false" name="keyText" placeholder="-----BEGIN RSA PRIVATE KEY-----" v-if="textMode" style="font-size: 0.7em"></textarea>
+                <file-textarea class="wide-code" spellcheck="false" name="keyText" placeholder="-----BEGIN RSA PRIVATE KEY-----" v-if="textMode" style="font-size: 0.7em"></file-textarea>
-				<p class="comment"><a href="" @click.prevent="switchTextMode">[<span v-if="!textMode">输入内容</span><span v-else>上传文件</span>]</a>。文件内容中通常含有"-----BEGIN RSA PRIVATE KEY-----"类似的信息。</p>
+				<p class="comment"><a href="" @click.prevent="switchTextMode">[<span v-if="!textMode">输入内容</span><span v-else>上传文件</span>]</a>。文件内容中通常含有"-----BEGIN RSA PRIVATE KEY-----"类似的信息<span v-if="textMode">，可以直接拖动私钥文件到输入框</span>。</p>
 			</td>
 		</tr>
 		<tr>
@@ -48,7 +48,7 @@
 				</td>
 			</tr>
 			<tr>
-				<td>是否启用</td>
+				<td>启用当前证书</td>
 				<td>
 					<div class="ui checkbox">
 						<input type="checkbox" name="isOn" value="1" checked="checked"/>