Hide secrets in config panel

src/config.rs

@@ -12,6 +12,8 @@ lazy_static! {
     pub static ref CONFIG_FILE: String = get_env("CONFIG_FILE").unwrap_or_else(|| "data/config.json".into());
 }
 
+pub type Pass = String;
+
 macro_rules! make_config {
     ($(
         $(#[doc = $groupdoc:literal])?
@@ -114,6 +116,7 @@ macro_rules! make_config {
 
                 fn _get_form_type(rust_type: &str) -> &'static str {
                     match rust_type {
+                        "Pass" => "password",
                         "String" => "text",
                         "bool" => "checkbox",
                         _ => "number"
@@ -229,7 +232,7 @@ make_config! {
         show_password_hint:     bool,   true,   def,    true;
 
         /// Admin page token |> The token used to authenticate in this very same page. Changing it here won't deauthorize the current session
-        admin_token:            String, true,   option;
+        admin_token:            Pass,   true,   option;
     },
 
     /// Advanced settings
@@ -255,7 +258,7 @@ make_config! {
         /// Client ID
         yubico_client_id:       String, true,   option;
         /// Secret Key
-        yubico_secret_key:      String, true,   option;
+        yubico_secret_key:      Pass,   true,   option;
         /// Server
         yubico_server:          String, true,   option;
     },
@@ -277,7 +280,7 @@ make_config! {
         /// Username
         smtp_username:          String, true,   option;
         /// Password
-        smtp_password:          String, true,   option;
+        smtp_password:          Pass,   true,   option;
     },
 }
 

src/static/templates/admin/page.hbs

@@ -67,11 +67,19 @@
                         {{#each elements}}
                         {{#if editable}}
                         <div class="form-group row" title="{{doc.description}}">
-                            {{#case type "text" "number"}}
+                            {{#case type "text" "number" "password"}}
                             <label for="input_{{name}}" class="col-sm-3 col-form-label">{{doc.name}}</label>
-                            <div class="col-sm-8">
-                                <input class="form-control conf-{{type}}" id="input_{{name}}" type="{{type}}" name="{{name}}"
-                                    value="{{value}}" {{#if default}} placeholder="Default: {{default}}" {{/if}}>
+                            <div class="col-sm-8 input-group">
+                                <input class="form-control conf-{{type}}" id="input_{{name}}" type="{{type}}"
+                                    name="{{name}}" value="{{value}}" {{#if default}} placeholder="Default: {{default}}"
+                                    {{/if}}>
+
+                                {{#case type "password"}}
+                                <div class="input-group-append">
+                                    <button class="btn btn-outline-secondary" type="button"
+                                        onclick="toggleVis('#input_{{name}}');">Show/hide</button>
+                                </div>
+                                {{/case}}
                             </div>
                             {{/case}}
                             {{#case type "checkbox"}}
@@ -114,6 +122,15 @@
         const data = new Identicon(md5(email), { size: 48, format: 'svg' });
         return "data:image/svg+xml;base64," + data.toString();
     }
+    function toggleVis(input_id) {
+        var type = $(input_id).attr("type");
+        if (type === "text") {
+            $(input_id).attr("type", "password");
+        } else {
+            $(input_id).attr("type", "text");
+        }
+        return false;
+    }
     function _post(url, successMsg, errMsg, data) {
         $.post({
             url: url,
@@ -166,7 +183,7 @@
             data[e.name] = +e.value;
         });
 
-        $(".conf-text").each(function (i, e) {
+        $(".conf-text, .conf-password").each(function (i, e) {
             data[e.name] = e.value || null;
         });
         return data;