try to improve web client credentials page

I should do the same for the admin page too

dataprovider/dataprovider.go

@@ -1271,12 +1271,18 @@ func validatePublicKeys(user *User) error {
 	if len(user.PublicKeys) == 0 {
 		user.PublicKeys = []string{}
 	}
+	var validatedKeys []string
 	for i, k := range user.PublicKeys {
+		if k == "" {
+			continue
+		}
 		_, _, _, _, err := ssh.ParseAuthorizedKey([]byte(k))
 		if err != nil {
 			return &ValidationError{err: fmt.Sprintf("could not parse key nr. %d: %s", i, err)}
 		}
+		validatedKeys = append(validatedKeys, k)
 	}
+	user.PublicKeys = validatedKeys
 	return nil
 }
 

httpd/webclient.go

@@ -370,9 +370,7 @@ func handleWebClientManageKeysPost(w http.ResponseWriter, r *http.Request) {
 		renderCredentialsPage(w, r, "", err.Error())
 		return
 	}
-	publicKeysFormValue := r.Form.Get("public_keys")
-	publicKeys := getSliceFromDelimitedValues(publicKeysFormValue, "\n")
-	user.PublicKeys = publicKeys
+	user.PublicKeys = r.Form["public_keys"]
 	err = dataprovider.UpdateUser(&user)
 	if err != nil {
 		renderCredentialsPage(w, r, "", err.Error())

templates/webclient/credentials.html

@@ -53,22 +53,76 @@
         </div>
         {{end}}
         <form id="key_form" action="{{.ManageKeysURL}}" method="POST">
-
             <div class="form-group row">
-                <label for="idPublicKeys" class="col-sm-2 col-form-label">Keys</label>
-                <div class="col-sm-10">
-                    <textarea class="form-control" id="idPublicKeys" name="public_keys" rows="5"
-                        aria-describedby="pkHelpBlock">{{range .PublicKeys}}{{.}}&#10;{{end}}</textarea>
-                    <small id="pkHelpBlock" class="form-text text-muted">
-                        One public key per line
-                    </small>
+                <div class="col-md-12 form_field_pk_outer">
+                    {{range $idx, $val := .PublicKeys}}
+                    <div class="row form_field_pk_outer_row">
+                        <div class="form-group col-md-11">
+                            <textarea class="form-control" id="idPublicKey{{$idx}}" name="public_keys" rows="4"
+                                placeholder="Paste your public key here">{{$val}}</textarea>
+                        </div>
+                        <div class="form-group col-md-1">
+                            <button class="btn btn-circle btn-danger remove_pk_btn_frm_field" {{if eq $idx 0}}disabled{{end}}>
+                                <i class="fas fa-trash"></i>
+                            </button>
+                        </div>
+                    </div>
+                    {{else}}
+                    <div class="row form_field_pk_outer_row">
+                        <div class="form-group col-md-11">
+                            <textarea class="form-control" id="idPublicKey0" name="public_keys" rows="4"
+                                placeholder="Paste your public key here"></textarea>
+                        </div>
+                        <div class="form-group col-md-1">
+                            <button class="btn btn-circle btn-danger remove_pk_btn_frm_field" disabled>
+                                <i class="fas fa-trash"></i>
+                            </button>
+                        </div>
+                    </div>
+                    {{end}}
                 </div>
             </div>
 
+            <div class="row mx-1">
+                <button type="button" class="btn btn-secondary add_new_pk_field_btn">
+                    <i class="fas fa-plus"></i> Add new public key
+                </button>
+            </div>
+
             <input type="hidden" name="_form_token" value="{{.CSRFToken}}">
             <button type="submit" class="btn btn-primary float-right mt-3 px-5 px-3">Submit</button>
         </form>
     </div>
 </div>
 {{end}}
+{{end}}
+
+{{define "extra_js"}}
+<script type="text/javascript">
+    $(document).ready(function () {
+        $("body").on("click", ".add_new_pk_field_btn", function () {
+            var index = $(".form_field_pk_outer").find(".form_field_pk_outer_row").length;
+            $(".form_field_pk_outer").append(`
+                    <div class="row form_field_pk_outer_row">
+                        <div class="form-group col-md-11">
+                            <textarea class="form-control" id="idPublicKey${index}" name="public_keys" rows="4"
+                                placeholder="Paste your public key here"></textarea>
+                        </div>
+                        <div class="form-group col-md-1">
+                            <button class="btn btn-circle btn-danger remove_pk_btn_frm_field" disabled>
+                                <i class="fas fa-trash"></i>
+                            </button>
+                        </div>
+                    </div>
+        `);
+
+            $(".form_field_pk_outer").find(".remove_pk_btn_frm_field:not(:first)").prop("disabled", false);
+            $(".form_field_pk_outer").find(".remove_pk_btn_frm_field").first().prop("disabled", true);
+        });
+
+        $("body").on("click", ".remove_pk_btn_frm_field", function () {
+            $(this).closest(".form_field_pk_outer_row").remove();
+        });
+    });
+</script>
 {{end}}