Alerting: Store sensitive settings encrypted for Threema notifier (#27160)

* encrypt API secret

* update docs

docs/sources/administration/provisioning.md

@@ -528,11 +528,11 @@ The following sections detail the supported settings and secure settings for eac
 
 #### Alert notification `threema`
 
-| Name         |
-| ------------ |
-| gateway_id   |
-| recipient_id |
-| api_secret   |
+| Name         | Secure setting |
+| ------------ | - |
+| gateway_id   | |
+| recipient_id | |
+| api_secret   | yes |
 
 #### Alert notification `webhook`
 

pkg/services/alerting/notifiers/threema.go

@@ -25,48 +25,54 @@ func init() {
 			"The Threema Gateway ID can be set up at https://gateway.threema.ch/.",
 		Factory: NewThreemaNotifier,
 		OptionsTemplate: `
-      <h3 class="page-heading">Threema Gateway settings</h3>
-      <p>
-        Notifications can be configured for any Threema Gateway ID of type
-        "Basic". End-to-End IDs are not currently supported.
-      </p>
-      <p>
-        The Threema Gateway ID can be set up at
-        <a href="https://gateway.threema.ch/" target="_blank" rel="noopener noreferrer">https://gateway.threema.ch/</a>.
-      </p>
-      <div class="gf-form">
-        <span class="gf-form-label width-14">Gateway ID</span>
-        <input type="text" required maxlength="8" pattern="\*[0-9A-Z]{7}"
-          class="gf-form-input max-width-14"
-          ng-model="ctrl.model.settings.gateway_id"
-          placeholder="*3MAGWID">
-        </input>
-        <info-popover mode="right-normal">
-          Your 8 character Threema Gateway ID (starting with a *)
-        </info-popover>
-      </div>
-      <div class="gf-form">
-        <span class="gf-form-label width-14">Recipient ID</span>
-        <input type="text" required maxlength="8" pattern="[0-9A-Z]{8}"
-          class="gf-form-input max-width-14"
-          ng-model="ctrl.model.settings.recipient_id"
-          placeholder="YOUR3MID">
-        </input>
-        <info-popover mode="right-normal">
-          The 8 character Threema ID that should receive the alerts
-        </info-popover>
-      </div>
-      <div class="gf-form">
-        <span class="gf-form-label width-14">API Secret</span>
-        <input type="text" required
-          class="gf-form-input max-width-24"
-          ng-model="ctrl.model.settings.api_secret">
-        </input>
-        <info-popover mode="right-normal">
-          Your Threema Gateway API secret
-        </info-popover>
-      </div>
-    `,
+		<h3 class="page-heading">Threema Gateway settings</h3>
+		<p>
+			Notifications can be configured for any Threema Gateway ID of type
+			"Basic". End-to-End IDs are not currently supported.
+		</p>
+		<p>
+			The Threema Gateway ID can be set up at
+			<a href="https://gateway.threema.ch/" target="_blank" rel="noopener noreferrer">https://gateway.threema.ch/</a>.
+		</p>
+		<div class="gf-form max-width-30">
+			<span class="gf-form-label width-8">Gateway ID</span>
+			<input type="text" required maxlength="8" pattern="\*[0-9A-Z]{7}"
+				class="gf-form-input max-width-30"
+				ng-model="ctrl.model.settings.gateway_id"
+				placeholder="*3MAGWID">
+			</input>
+			<info-popover mode="right-absolute">
+  				Your 8 character Threema Gateway ID (starting with a *)
+			</info-popover>
+		</div>
+		<div class="gf-form max-width-30">
+			<span class="gf-form-label width-8">Recipient ID</span>
+			<input type="text" required maxlength="8" pattern="[0-9A-Z]{8}"
+				class="gf-form-input max-width-30"
+				ng-model="ctrl.model.settings.recipient_id"
+				placeholder="YOUR3MID">
+			</input>
+			<info-popover mode="right-absolute">
+				The 8 character Threema ID that should receive the alerts
+			</info-popover>
+		</div>
+		<div class="gf-form max-width-30">
+			<label class="gf-form-label width-8">API Secret</label>
+			<div class="gf-form gf-form--grow" ng-if="!ctrl.model.secureFields.api_secret">
+				<input type="text"
+					required
+					class="gf-form-input max-width-30"
+					ng-init="ctrl.model.secureSettings.api_secret = ctrl.model.settings.api_secret || null; ctrl.model.settings.api_secret = null;"
+					ng-model="ctrl.model.secureSettings.api_secret"
+					data-placement="right">
+				</input>
+			</div>
+			<div class="gf-form" ng-if="ctrl.model.secureFields.api_secret">
+			  <input type="text" class="gf-form-input max-width-18" disabled="disabled" value="configured" />
+			  <a class="btn btn-secondary gf-form-btn" href="#" ng-click="ctrl.model.secureFields.api_secret = false">reset</a>
+			</div>
+		</div>
+		`,
 		Options: []alerting.NotifierOption{
 			{
 				Label:          "Gateway ID",
@@ -118,7 +124,7 @@ func NewThreemaNotifier(model *models.AlertNotification) (alerting.Notifier, err
 
 	gatewayID := model.Settings.Get("gateway_id").MustString()
 	recipientID := model.Settings.Get("recipient_id").MustString()
-	apiSecret := model.Settings.Get("api_secret").MustString()
+	apiSecret := model.DecryptedValue("api_secret", model.Settings.Get("api_secret").MustString())
 
 	// Validation
 	if gatewayID == "" {