1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-11-22 08:42:32 -05:00
forgejo/templates/user/settings/account.tmpl
Hester Gong 476a043a5f
Refactor delete_modal_actions template and use it for project column related actions (#24097)
Co-Author: @wxiaoguang 

This PR is to fix
https://github.com/go-gitea/gitea/issues/23318#issuecomment-1506275446 .
The way to fix this in this PR is to use `delete_modal_actions.tmpl`
here both to fix this issue and keep ui consistency (as suggested by
[TODO
here](4299c3b7db/templates/projects/view.tmpl (L161)))

And this PR also refactors `delete_modal_actions.tmpl` and its related
styles, and use the template for more modal actions:

1. Added template attributes:
* locale
* ModalButtonStyle: "yes" (default) or "confirm"
* ModalButtonCancelText
* ModalButtonOkText

2. Rename `delete_modal_actions.tmpl` template to
`modal_actions_confirm.tmpl` because it is not only used for action
modals deletion now.

3. Refactored css related to modals into `web_src/css/modules/modal.css`
and improved the styles.

4. Also use the template for PR deletion modal and remove issue
dependency modal.

5. Some modals should also use the template, but not sure how to open
them, so mark these modal actions by `{{/* TODO: Convert to
base/modal_actions_confirm */}}`

After (Also tested on arc green):

Hovering on the left buttons

<img width="711" alt="Screen Shot 2023-04-23 at 15 17 12"
src="https://user-images.githubusercontent.com/17645053/233825650-76307e65-9255-44bb-80e8-7062f58ead1b.png">

<img width="786" alt="Screen Shot 2023-04-23 at 15 17 21"
src="https://user-images.githubusercontent.com/17645053/233825652-4dc6f7d1-a180-49fb-a468-d60950eaee0d.png">

Test for functionalities:

https://user-images.githubusercontent.com/17645053/233826857-76376fda-022c-42d0-b0f3-339c17ca4e59.mov

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2023-04-23 17:24:19 +08:00

186 lines
7.8 KiB
Handlebars

{{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content user settings account">
{{template "user/settings/navbar" .}}
<div class="ui container">
{{template "base/alert" .}}
<h4 class="ui top attached header">
{{.locale.Tr "settings.password"}}
</h4>
<div class="ui attached segment">
{{if or (.SignedUser.IsLocal) (.SignedUser.IsOAuth2)}}
<form class="ui form ignore-dirty" action="{{AppSubUrl}}/user/settings/account" method="post">
{{template "base/disable_form_autofill"}}
{{.CsrfTokenHtml}}
{{if .SignedUser.IsPasswordSet}}
<div class="required field {{if .Err_OldPassword}}error{{end}}">
<label for="old_password">{{.locale.Tr "settings.old_password"}}</label>
<input id="old_password" name="old_password" type="password" autocomplete="current-password" autofocus required>
</div>
{{end}}
<div class="required field {{if .Err_Password}}error{{end}}">
<label for="password">{{.locale.Tr "settings.new_password"}}</label>
<input id="password" name="password" type="password" autocomplete="new-password" required>
</div>
<div class="required field {{if .Err_Password}}error{{end}}">
<label for="retype">{{.locale.Tr "settings.retype_new_password"}}</label>
<input id="retype" name="retype" type="password" autocomplete="new-password" required>
</div>
<div class="field">
<button class="ui green button">{{$.locale.Tr "settings.change_password"}}</button>
<a href="{{AppSubUrl}}/user/forgot_password?email={{.Email}}">{{.locale.Tr "auth.forgot_password"}}</a>
</div>
</form>
{{else}}
<div class="ui info message">
<p class="text left">{{$.locale.Tr "settings.password_change_disabled"}}</p>
</div>
{{end}}
</div>
<h4 class="ui top attached header">
{{.locale.Tr "settings.manage_emails"}}
</h4>
<div class="ui attached segment">
<div class="ui email list">
{{if $.EnableNotifyMail}}
<div class="item">
<form action="{{AppSubUrl}}/user/settings/account/email" class="ui form" method="post">
{{.locale.Tr "settings.email_desc"}}
<div class="right floated content">
<div class="field">
<button class="ui green button">{{$.locale.Tr "settings.email_notifications.submit"}}</button>
</div>
</div>
<div class="right floated content">
{{$.CsrfTokenHtml}}
<input name="_method" type="hidden" value="NOTIFICATION">
<div class="field">
<div class="ui selection dropdown" tabindex="0">
<input name="preference" type="hidden" value="{{.EmailNotificationsPreference}}">
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="text"></div>
<div class="menu">
<div data-value="enabled" class="{{if eq .EmailNotificationsPreference "enabled"}}active selected {{end}}item">{{$.locale.Tr "settings.email_notifications.enable"}}</div>
<div data-value="andyourown" class="{{if eq .EmailNotificationsPreference "andyourown"}}active selected {{end}}item">{{$.locale.Tr "settings.email_notifications.andyourown"}}</div>
<div data-value="onmention" class="{{if eq .EmailNotificationsPreference "onmention"}}active selected {{end}}item">{{$.locale.Tr "settings.email_notifications.onmention"}}</div>
<div data-value="disabled" class="{{if eq .EmailNotificationsPreference "disabled"}}active selected {{end}}item">{{$.locale.Tr "settings.email_notifications.disable"}}</div>
</div>
</div>
</div>
</div>
</form>
</div>
{{end}}
{{range .Emails}}
<div class="item">
{{if not .IsPrimary}}
<div class="right floated content">
<button class="ui red tiny button delete-button" data-modal-id="delete-email" data-url="{{AppSubUrl}}/user/settings/account/email/delete" data-id="{{.ID}}">
{{$.locale.Tr "settings.delete_email"}}
</button>
</div>
{{if .CanBePrimary}}
<div class="right floated content">
<form action="{{AppSubUrl}}/user/settings/account/email" method="post">
{{$.CsrfTokenHtml}}
<input name="_method" type="hidden" value="PRIMARY">
<input name="id" type="hidden" value="{{.ID}}">
<button class="ui primary tiny button">{{$.locale.Tr "settings.primary_email"}}</button>
</form>
</div>
{{end}}
{{end}}
{{if not .IsActivated}}
<div class="right floated content">
<form action="{{AppSubUrl}}/user/settings/account/email" method="post">
{{$.CsrfTokenHtml}}
<input name="_method" type="hidden" value="SENDACTIVATION">
<input name="id" type="hidden" value="{{.ID}}">
{{if $.ActivationsPending}}
<button disabled class="ui primary tiny button">{{$.locale.Tr "settings.activations_pending"}}</button>
{{else}}
<button class="ui primary tiny button">{{$.locale.Tr "settings.activate_email"}}</button>
{{end}}
</form>
</div>
{{end}}
<div class="content">
<strong>{{.Email}}</strong>
{{if .IsPrimary}}
<div class="ui primary label">{{$.locale.Tr "settings.primary"}}</div>
{{end}}
{{if .IsActivated}}
<div class="ui green label">{{$.locale.Tr "settings.activated"}}</div>
{{else}}
<div class="ui label">{{$.locale.Tr "settings.requires_activation"}}</div>
{{end}}
</div>
</div>
{{end}}
</div>
</div>
<div class="ui attached bottom segment">
<form class="ui form" action="{{AppSubUrl}}/user/settings/account/email" method="post">
{{.CsrfTokenHtml}}
<div class="required field {{if .Err_Email}}error{{end}}">
<label for="email">{{.locale.Tr "settings.add_new_email"}}</label>
<input id="email" name="email" type="email" required {{if not .CanAddEmails}}disabled{{end}}>
</div>
<button class="ui green button" {{if not .CanAddEmails}}disabled{{end}}>
{{.locale.Tr "settings.add_email"}}
</button>
</form>
</div>
<h4 class="ui top attached error header">
{{.locale.Tr "settings.delete_account"}}
</h4>
<div class="ui attached error segment">
<div class="ui red message">
<p class="text left">{{svg "octicon-alert"}} {{.locale.Tr "settings.delete_prompt" | Str2html}}</p>
{{if .UserDeleteWithComments}}
<p class="text left" style="font-weight: bold;">{{.locale.Tr "settings.delete_with_all_comments" .UserDeleteWithCommentsMaxTime | Str2html}}</p>
{{end}}
</div>
<form class="ui form ignore-dirty" id="delete-form" action="{{AppSubUrl}}/user/settings/account/delete" method="post">
{{template "base/disable_form_autofill"}}
{{.CsrfTokenHtml}}
<div class="required field {{if .Err_Password}}error{{end}}">
<label for="password-confirmation">{{.locale.Tr "password"}}</label>
<input id="password-confirmation" name="password" type="password" autocomplete="off" required>
</div>
<div class="field">
<button class="ui red button delete-button" data-modal-id="delete-account" data-type="form" data-form="#delete-form">
{{.locale.Tr "settings.confirm_delete_account"}}
</button>
<a href="{{AppSubUrl}}/user/forgot_password?email={{.Email}}">{{.locale.Tr "auth.forgot_password"}}</a>
</div>
</form>
</div>
</div>
</div>
<div class="ui gitea-confirm-modal delete modal" id="delete-email">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "settings.email_deletion"}}
</div>
<div class="content">
<p>{{.locale.Tr "settings.email_deletion_desc"}}</p>
</div>
{{template "base/modal_actions_confirm" .}}
</div>
<div class="ui gitea-confirm-modal delete modal" id="delete-account">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "settings.delete_account_title"}}
</div>
<div class="content">
<p>{{.locale.Tr "settings.delete_account_desc"}}</p>
</div>
{{template "base/modal_actions_confirm" .}}
</div>
{{template "base/footer" .}}