Move key forms before list and add cancel button (#17432)

* Move GPG form before list and add cancel button
* Move SSH form before list and add cancel button

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

diff --git a/templates/repo/settings/deploy_keys.tmpl b/templates/repo/settings/deploy_keys.tmpl
index 68ab36b593b355b00b63055c6e9dc9608fc1f4e7..019a62b5f12f60271858a9eb35ed12950d2ced27 100644 (file)
--- a/templates/repo/settings/deploy_keys.tmpl
+++ b/templates/repo/settings/deploy_keys.tmpl
@@ -4,16 +4,18 @@
        {{template "repo/settings/navbar" .}}
        <div class="ui container">
                {{template "base/alert" .}}
-               <div {{if not .HasError}}class="hide"{{end}} id="add-deploy-key-panel">
-                       <h4 class="ui top attached header">
-                               {{.i18n.Tr "repo.settings.add_deploy_key"}}
-                               <div class="ui right">
-                                       <button class="ui red tiny hide-panel button" data-panel="#add-deploy-key-panel">
-                                               {{.i18n.Tr "cancel"}}
-                                       </button>
-                               </div>
-                       </h4>
-                       <div class="ui attached segment">
+               <h4 class="ui top attached header">
+                       {{.i18n.Tr "repo.settings.deploy_keys"}}
+                       <div class="ui right">
+                       {{if not .DisableSSH}}
+                               <div class="ui blue tiny show-panel button" data-panel="#add-deploy-key-panel">{{.i18n.Tr "repo.settings.add_deploy_key"}}</div>
+                       {{else}}
+                               <div class="ui blue tiny button disabled">{{.i18n.Tr "settings.ssh_disabled"}}</div>
+                       {{end}}
+                       </div>
+               </h4>
+               <div class="ui attached segment">
+                       <div class="{{if not .HasError}}hide{{end}} mb-4" id="add-deploy-key-panel">
                                <form class="ui form" action="{{.Link}}" method="post">
                                        {{.CsrfTokenHtml}}
                                        <div class="field">
@@ -39,21 +41,11 @@
                                        <button class="ui green button">
                                                {{.i18n.Tr "repo.settings.add_deploy_key"}}
                                        </button>
+                                       <button class="ui hide-panel button" data-panel="#add-deploy-key-panel">
+                                               {{.i18n.Tr "cancel"}}
+                                       </button>
                                </form>
                        </div>
-                       <br>
-               </div>
-               <h4 class="ui top attached header">
-                       {{.i18n.Tr "repo.settings.deploy_keys"}}
-                       <div class="ui right">
-                       {{if not .DisableSSH}}
-                               <div class="ui blue tiny show-panel button" data-panel="#add-deploy-key-panel">{{.i18n.Tr "repo.settings.add_deploy_key"}}</div>
-                       {{else}}
-                               <div class="ui blue tiny button disabled">{{.i18n.Tr "settings.ssh_disabled"}}</div>
-                       {{end}}
-                       </div>
-               </h4>
-               <div class="ui attached segment">
                        {{if .Deploykeys}}
                                <div class="ui key list">
                                        {{range .Deploykeys}}

diff --git a/templates/user/settings/keys_gpg.tmpl b/templates/user/settings/keys_gpg.tmpl
index c840801e5acb61e9b3f1ea4327b37ad8bc0e2712..20ccea9f006637d7efa51df053016717d0158d9a 100644 (file)
--- a/templates/user/settings/keys_gpg.tmpl
+++ b/templates/user/settings/keys_gpg.tmpl
@@ -5,7 +5,41 @@
        </div>
 </h4>
 <div class="ui attached segment">
-       <div class="ui key list">
+       <div class="{{if not .HasGPGError}}hide{{end}} mb-4" id="add-gpg-key-panel">
+               <form class="ui form{{if .HasGPGError}} error{{end}}" action="{{.Link}}" method="post">
+                       {{.CsrfTokenHtml}}
+                       <input type="hidden" name="title" value="none">
+                       <div class="field {{if .Err_Content}}error{{end}}">
+                               <label for="content">{{.i18n.Tr "settings.key_content"}}</label>
+                               <textarea id="gpg-key-content" name="content" placeholder="{{.i18n.Tr "settings.key_content_gpg_placeholder"}}" required>{{.content}}</textarea>
+                       </div>
+                       {{if .Err_Signature}}
+                               <div class="ui error message">
+                                       <p>{{.i18n.Tr "settings.gpg_token_required"}}</p>
+                               </div>
+                               <div class="field">
+                                       <label for="token">{{.i18n.Tr "setting.gpg_token"}}
+                                       <input readonly="" value="{{.TokenToSign}}">
+                                       <div class="help">
+                                               <p>{{.i18n.Tr "settings.gpg_token_help"}}</p>
+                                               <p><code>{{$.i18n.Tr "settings.gpg_token_code" .TokenToSign .KeyID}}</code></p>
+                                       </div>
+                               </div>
+                               <div class="field">
+                                       <label for="signature">{{.i18n.Tr "settings.gpg_token_signature"}}</label>
+                                       <textarea id="gpg-key-signature" name="signature" placeholder="{{.i18n.Tr "settings.key_signature_gpg_placeholder"}}" required>{{.signature}}</textarea>
+                               </div>
+                       {{end}}
+                       <input name="type" type="hidden" value="gpg">
+                       <button class="ui green button">
+                               {{.i18n.Tr "settings.add_key"}}
+                       </button>
+                       <button class="ui hide-panel button" data-panel="#add-gpg-key-panel">
+                               {{.i18n.Tr "cancel"}}
+                       </button>
+               </form>
+       </div>
+       <div class="ui key list mt-0">
                <div class="item">
                        {{.i18n.Tr "settings.gpg_desc"}}
                </div>
@@ -76,42 +110,6 @@
 </div>
 <br>
 <p>{{.i18n.Tr "settings.gpg_helper" "https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/about-commit-signature-verification#gpg-commit-signature-verification" | Str2html}}</p>
-<div {{if not .HasGPGError}}class="hide"{{end}} id="add-gpg-key-panel">
-       <h4 class="ui top attached header">
-               {{.i18n.Tr "settings.add_new_gpg_key"}}
-       </h4>
-       <div class="ui attached segment">
-               <form class="ui form{{if .HasGPGError}} error{{end}}" action="{{.Link}}" method="post">
-                       {{.CsrfTokenHtml}}
-                       <input type="hidden" name="title" value="none">
-                       <div class="field {{if .Err_Content}}error{{end}}">
-                               <label for="content">{{.i18n.Tr "settings.key_content"}}</label>
-                               <textarea id="gpg-key-content" name="content" placeholder="{{.i18n.Tr "settings.key_content_gpg_placeholder"}}" required>{{.content}}</textarea>
-                       </div>
-                       {{if .Err_Signature}}
-                               <div class="ui error message">
-                                       <p>{{.i18n.Tr "settings.gpg_token_required"}}</p>
-                               </div>
-                               <div class="field">
-                                       <label for="token">{{.i18n.Tr "setting.gpg_token"}}
-                                       <input readonly="" value="{{.TokenToSign}}">
-                                       <div class="help">
-                                               <p>{{.i18n.Tr "settings.gpg_token_help"}}</p>
-                                               <p><code>{{$.i18n.Tr "settings.gpg_token_code" .TokenToSign .KeyID}}</code></p>
-                                       </div>
-                               </div>
-                               <div class="field">
-                                       <label for="signature">{{.i18n.Tr "settings.gpg_token_signature"}}</label>
-                                       <textarea id="gpg-key-signature" name="signature" placeholder="{{.i18n.Tr "settings.key_signature_gpg_placeholder"}}" required>{{.signature}}</textarea>
-                               </div>
-                       {{end}}
-                       <input name="type" type="hidden" value="gpg">
-                       <button class="ui green button">
-                               {{.i18n.Tr "settings.add_key"}}
-                       </button>
-               </form>
-       </div>
-</div>
 
 <div class="ui small basic delete modal" id="delete-gpg">
        <div class="ui icon header">

diff --git a/templates/user/settings/keys_ssh.tmpl b/templates/user/settings/keys_ssh.tmpl
index 3d05578666c3a91b8b77ba14c4f821d57de9b858..b87318c789de0a17215f4ae20744dfa43e5af730 100644 (file)
--- a/templates/user/settings/keys_ssh.tmpl
+++ b/templates/user/settings/keys_ssh.tmpl
@@ -1,15 +1,37 @@
 <h4 class="ui top attached header">
        {{.i18n.Tr "settings.manage_ssh_keys"}}
        <div class="ui right">
-       {{if not .DisableSSH }}
-               <div class="ui blue tiny show-panel button" data-panel="#add-ssh-key-panel">{{.i18n.Tr "settings.add_key"}}</div>
-       {{else}}
-               <div class="ui blue tiny button disabled">{{.i18n.Tr "settings.ssh_disabled"}}</div>
-       {{end}}
+               {{if not .DisableSSH }}
+                       <div id="add-ssh-button" class="ui blue tiny show-panel button" data-panel="#add-ssh-key-panel">
+                               {{.i18n.Tr "settings.add_key"}}
+                       </div>
+               {{else}}
+                       <div class="ui blue tiny button disabled">{{.i18n.Tr "settings.ssh_disabled"}}</div>
+               {{end}}
        </div>
 </h4>
 <div class="ui attached segment">
-       <div class="ui key list">
+       <div class="{{if not .HasSSHError}}hide{{end}} mb-4" id="add-ssh-key-panel">
+               <form class="ui form" action="{{.Link}}" method="post">
+                       {{.CsrfTokenHtml}}
+                       <div class="field {{if .Err_Title}}error{{end}}">
+                               <label for="title">{{.i18n.Tr "settings.key_name"}}</label>
+                               <input id="ssh-key-title" name="title" value="{{.title}}" autofocus required>
+                       </div>
+                       <div class="field {{if .Err_Content}}error{{end}}">
+                               <label for="content">{{.i18n.Tr "settings.key_content"}}</label>
+                               <textarea id="ssh-key-content" name="content" placeholder="{{.i18n.Tr "settings.key_content_ssh_placeholder"}}" required>{{.content}}</textarea>
+                       </div>
+                       <input name="type" type="hidden" value="ssh">
+                       <button class="ui green button">
+                               {{.i18n.Tr "settings.add_key"}}
+                       </button>
+                       <button id="cancel-ssh-button" class="ui hide-panel button" data-panel="#add-ssh-key-panel">
+                               {{.i18n.Tr "cancel"}}
+                       </button>
+               </form>
+       </div>
+       <div class="ui key list mt-0">
                <div class="item">
                        {{.i18n.Tr "settings.ssh_desc"}}
                </div>
@@ -38,28 +60,6 @@
 </div>
 <br>
 <p>{{.i18n.Tr "settings.ssh_helper" "https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/connecting-to-github-with-ssh" "https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/troubleshooting-ssh" | Str2html}}</p>
-<div {{if not .HasSSHError}}class="hide"{{end}} id="add-ssh-key-panel">
-       <h4 class="ui top attached header">
-               {{.i18n.Tr "settings.add_new_key"}}
-       </h4>
-       <div class="ui attached segment">
-               <form class="ui form" action="{{.Link}}" method="post">
-                       {{.CsrfTokenHtml}}
-                       <div class="field {{if .Err_Title}}error{{end}}">
-                               <label for="title">{{.i18n.Tr "settings.key_name"}}</label>
-                               <input id="ssh-key-title" name="title" value="{{.title}}" autofocus required>
-                       </div>
-                       <div class="field {{if .Err_Content}}error{{end}}">
-                               <label for="content">{{.i18n.Tr "settings.key_content"}}</label>
-                               <textarea id="ssh-key-content" name="content" placeholder="{{.i18n.Tr "settings.key_content_ssh_placeholder"}}" required>{{.content}}</textarea>
-                       </div>
-                       <input name="type" type="hidden" value="ssh">
-                       <button class="ui green button">
-                               {{.i18n.Tr "settings.add_key"}}
-                       </button>
-               </form>
-       </div>
-</div>
 
 <div class="ui small basic delete modal" id="delete-ssh">
        <div class="ui icon header">

diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index b345afd4cf76fbb961357d3b3ed11f436b12ea71..04d44d8142abbbe78e8d4457891a245728ab15f9 100644 (file)
--- a/web_src/js/features/common-global.js
+++ b/web_src/js/features/common-global.js
@@ -288,8 +288,9 @@ export function initGlobalButtons() {
     $($(this).data('panel')).show();
   });
 
-  $('.hide-panel.button').on('click', function () {
+  $('.hide-panel.button').on('click', function (event) {
     $($(this).data('panel')).hide();
+    event.preventDefault();
   });
 
   $('.show-modal.button').on('click', function () {