import { LitElement, html, css } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { formStyles } from '../../styles/form-styles';
import '@shoelace-style/shoelace/dist/components/input/input.js';
import '@shoelace-style/shoelace/dist/components/textarea/textarea.js';
import '@shoelace-style/shoelace/dist/components/button/button.js';
import '@shoelace-style/shoelace/dist/components/alert/alert.js';
import '@shoelace-style/shoelace/dist/components/details/details.js';
import '../../components/logo-component';
@customElement('delete-account-view')
export class DeleteAccountView extends LitElement {
@state() private _email = '';
@state() private _username = '';
@state() private _accountId = '';
@state() private _orgName = '';
@state() private _reason = '';
@state() private _submitting = false;
@state() private _error: string | null = null;
@state() private _success = false;
connectedCallback() {
super.connectedCallback();
// Parse URL parameters
const params = new URLSearchParams(window.location.search);
this._email = params.get('email') || '';
this._username = params.get('username') || '';
this._accountId = params.get('account_id') || '';
this._orgName = params.get('org_name') || '';
}
static styles = [
formStyles,
css`
h2 {
text-align: center;
margin-bottom: 1rem;
}
.subtitle {
text-align: center;
color: var(--sl-color-neutral-600);
margin-bottom: 2rem;
}
sl-input,
sl-textarea {
margin: 1rem 0;
}
sl-button {
width: 100%;
margin-top: 2rem;
}
.info-section {
margin: 2rem 0;
padding: 1.5rem;
background: var(--sl-color-neutral-50);
border-radius: var(--sl-border-radius-medium);
}
.info-section h3 {
margin-top: 0;
font-size: 1rem;
color: var(--sl-color-neutral-700);
}
.info-section ul {
margin: 0.5rem 0;
padding-left: 1.5rem;
}
.info-section li {
margin: 0.5rem 0;
color: var(--sl-color-neutral-600);
}
sl-details {
margin: 1rem 0;
}
sl-details::part(summary) {
font-weight: 600;
}
.warning {
color: var(--sl-color-danger-600);
font-weight: 500;
}
`,
];
private async _handleSubmit(event: Event) {
event.preventDefault();
this._submitting = true;
this._error = null;
this._success = false;
try {
const response = await fetch('/api/v1/account/deletion-request', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: this._email,
username: this._username,
account_id: this._accountId,
org_name: this._orgName,
reason: this._reason,
}),
});
if (!response.ok) {
throw new Error('Network response was not ok');
}
this._submitting = false;
this._success = true;
} catch (e) {
this._submitting = false;
this._error =
'Failed to submit request. Please try again or contact support@preloop.ai';
}
}
render() {
if (this._success) {
return html`
<div class="container">
<sl-alert variant="success" open>
<sl-icon slot="icon" name="check2-circle"></sl-icon>
<strong>Request Received</strong><br />
Your account deletion request has been submitted. We will process
your request within 30 days and send a confirmation to your email
address.
</sl-alert>
</div>
`;
}
return html`
<div class="container">
<div class="logo">
<a href="/">
<logo-component></logo-component>
</a>
</div>
<div class="form-container">
<h2>Delete Your Account</h2>
<p class="subtitle">
Request deletion of your Preloop account and associated data
</p>
<div class="info-section">
<h3>What happens when you delete your account:</h3>
<ul>
<li>Your user profile and authentication credentials</li>
<li>
Your mobile device registrations and push notification settings
</li>
<li>Your approval request history and decisions</li>
<li>
Your organization membership (if sole owner, org data may be
retained for other members)
</li>
</ul>
<sl-details summary="Data retention information">
<p>Upon account deletion:</p>
<ul>
<li>
<strong>Immediately deleted:</strong> Login credentials,
device tokens, personal preferences
</li>
<li>
<strong>Deleted within 30 days:</strong> Approval history,
activity logs
</li>
<li>
<strong>Retained for compliance:</strong> Billing records may
be retained for up to 7 years as required by law
</li>
</ul>
</sl-details>
<p class="warning">
⚠️ This action cannot be undone. You will need to create a new
account if you wish to use Preloop again.
</p>
</div>
<form @submit=${this._handleSubmit}>
<sl-input
label="Email Address"
type="email"
required
help-text="The email address associated with your Preloop account"
.value=${this._email}
@sl-input=${(e: any) => (this._email = e.target.value)}
></sl-input>
<sl-input
label="Username"
required
help-text="Your Preloop username"
.value=${this._username}
@sl-input=${(e: any) => (this._username = e.target.value)}
></sl-input>
${this._orgName
? html`<sl-input
label="Organization"
readonly
.value=${this._orgName}
></sl-input>`
: ''}
<sl-textarea
label="Reason for leaving (optional)"
resize="auto"
help-text="Help us improve by sharing why you're deleting your account"
.value=${this._reason}
@sl-input=${(e: any) => (this._reason = e.target.value)}
></sl-textarea>
${this._error
? html`<sl-alert variant="danger" open>${this._error}</sl-alert>`
: ''}
<sl-button
type="submit"
variant="danger"
?loading=${this._submitting}
>
Request Account Deletion
</sl-button>
</form>
</div>
</div>
`;
}
}
