Move user account deletion to confirmation modal
This mimics the admin UI for deleting a user account. Ref T319
This commit is contained in:
parent
1d8facfe1c
commit
a6c93c37da
|
@ -3,6 +3,9 @@
|
||||||
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
.option { margin: 2em 0em; }
|
.option { margin: 2em 0em; }
|
||||||
|
h2 {
|
||||||
|
margin-top: 2.5em;
|
||||||
|
}
|
||||||
h3 { font-weight: normal; }
|
h3 { font-weight: normal; }
|
||||||
.section p, .section label {
|
.section p, .section label {
|
||||||
font-size: 0.86em;
|
font-size: 0.86em;
|
||||||
|
@ -11,8 +14,13 @@ h3 { font-weight: normal; }
|
||||||
max-height: 2.75em;
|
max-height: 2.75em;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
.modal {
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<div class="content-container snug">
|
<div class="content-container snug">
|
||||||
|
<div id="overlay"></div>
|
||||||
|
|
||||||
{{if .Silenced}}
|
{{if .Silenced}}
|
||||||
{{template "user-silenced"}}
|
{{template "user-silenced"}}
|
||||||
{{end}}
|
{{end}}
|
||||||
|
@ -76,8 +84,6 @@ h3 { font-weight: normal; }
|
||||||
{{end}}
|
{{end}}
|
||||||
|
|
||||||
{{ if .OauthSection }}
|
{{ if .OauthSection }}
|
||||||
<hr />
|
|
||||||
|
|
||||||
{{ if .OauthAccounts }}
|
{{ if .OauthAccounts }}
|
||||||
<div class="option">
|
<div class="option">
|
||||||
<h2>Linked Accounts</h2>
|
<h2>Linked Accounts</h2>
|
||||||
|
@ -153,18 +159,38 @@ h3 { font-weight: normal; }
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ if not .IsAdmin }}
|
{{ if not .IsAdmin }}
|
||||||
<hr/>
|
<h2>Incinerator</h2>
|
||||||
<h2>Delete Account</h2>
|
<div class="alert danger">
|
||||||
<h3><strong>Danger Zone - This cannot be undone</strong></h3>
|
<div class="row">
|
||||||
<p>This will delete your account and all your blogs and posts. Before continuing make sure to <a href="/me/export">export your data</a>.</p>
|
<div>
|
||||||
<form action="/me/delete" method="post">
|
<h3>Delete your account</h3>
|
||||||
<p>Type your username to confirm deletion.<p>
|
<p>Permanently erase all your data, with no way to recover it.</p>
|
||||||
<input name="confirm-username" type="text" title="confirm username to delete" placeholder="confirm username">
|
</div>
|
||||||
<input class="danger" type="submit" value="DELETE">
|
<button class="cta danger" onclick="prepareDeleteUser()">Delete your account...</button>
|
||||||
</form>
|
</div>
|
||||||
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="modal-delete-user" class="modal">
|
||||||
|
<h2>Are you sure?</h2>
|
||||||
|
<div class="body">
|
||||||
|
<p style="text-align:left">This action <strong>cannot</strong> be undone. It will immediately and permanently erase your account, including your blogs and posts. Before continuing, you might want to <a href="/me/export">export your data</a>.</p>
|
||||||
|
<p>If you're sure, please type <strong>{{.Username}}</strong> to confirm.</p>
|
||||||
|
|
||||||
|
<ul id="delete-errors" class="errors"></ul>
|
||||||
|
|
||||||
|
<form action="/me/delete" method="post" onsubmit="confirmDeletion()">
|
||||||
|
<input id="confirm-text" placeholder="{{.Username}}" type="text" class="confirm boxy" name="confirm-username" style="margin-top: 0.5em;" />
|
||||||
|
<div style="text-align:right; margin-top: 1em;">
|
||||||
|
<a id="cancel-delete" style="margin-right:2em" href="#">Cancel</a>
|
||||||
|
<input class="danger" type="submit" id="confirm-delete" value="Delete your account" disabled />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="/js/h.js"></script>
|
||||||
|
<script src="/js/modals.js"></script>
|
||||||
<script>
|
<script>
|
||||||
var showChecks = document.querySelectorAll('input.show');
|
var showChecks = document.querySelectorAll('input.show');
|
||||||
for (var i=0; i<showChecks.length; i++) {
|
for (var i=0; i<showChecks.length; i++) {
|
||||||
|
@ -177,6 +203,27 @@ for (var i=0; i<showChecks.length; i++) {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
{{ if not .IsAdmin }}
|
||||||
|
H.getEl('cancel-delete').on('click', closeModals);
|
||||||
|
|
||||||
|
let $confirmDelBtn = document.getElementById('confirm-delete');
|
||||||
|
let $confirmText = document.getElementById('confirm-text')
|
||||||
|
$confirmText.addEventListener('input', function() {
|
||||||
|
$confirmDelBtn.disabled = this.value !== '{{.Username}}'
|
||||||
|
});
|
||||||
|
|
||||||
|
function prepareDeleteUser() {
|
||||||
|
$confirmText.value = ''
|
||||||
|
showModal('delete-user')
|
||||||
|
$confirmText.focus()
|
||||||
|
}
|
||||||
|
|
||||||
|
function confirmDeletion() {
|
||||||
|
$confirmDelBtn.disabled = true
|
||||||
|
$confirmDelBtn.value = 'Deleting...'
|
||||||
|
}
|
||||||
|
{{ end }}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{{template "footer" .}}
|
{{template "footer" .}}
|
||||||
|
|
Loading…
Reference in New Issue