Add account deletion functionality (#4153)
* chore: delete account * Add account deletion functionality --------- Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>pull/4159/head
Arik Chakma
1 year ago
committed by
GitHub
parent
2d3a89bd56
commit
8a5bc21206
8 changed files with 1066 additions and 908 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,16 @@ |
||||
--- |
||||
import DeleteAccountPopup from "./DeleteAccountPopup.astro"; |
||||
--- |
||||
<DeleteAccountPopup /> |
||||
|
||||
<h2 class='text-xl font-bold sm:text-2xl'>Delete Account</h2> |
||||
<p class='mt-2 text-gray-400'> |
||||
Permanently remove your account from the roadmap.sh. This cannot be undone and all your progress and data will be lost. |
||||
</p> |
||||
|
||||
<button |
||||
data-popup='delete-account-popup' |
||||
class="mt-4 w-full rounded-lg bg-red-600 py-2 text-base font-regular text-white outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-1" |
||||
> |
||||
Delete Account |
||||
</button> |
||||
@ -0,0 +1,89 @@ |
||||
import {useEffect, useState} from 'preact/hooks'; |
||||
import { httpDelete } from '../../lib/http'; |
||||
import { logout } from '../Navigation/navigation'; |
||||
|
||||
export function DeleteAccountForm() { |
||||
const [isLoading, setIsLoading] = useState(false); |
||||
const [error, setError] = useState(''); |
||||
const [confirmationText, setConfirmationText] = useState(''); |
||||
|
||||
useEffect(() => { |
||||
setError(''); |
||||
setConfirmationText(''); |
||||
}, []) |
||||
|
||||
const handleSubmit = async (e: Event) => { |
||||
e.preventDefault(); |
||||
setIsLoading(true); |
||||
setError(''); |
||||
|
||||
if (confirmationText.toUpperCase() !== 'DELETE') { |
||||
setError('Verification text does not match'); |
||||
setIsLoading(false); |
||||
return; |
||||
} |
||||
|
||||
const { response, error } = await httpDelete( |
||||
`${import.meta.env.PUBLIC_API_URL}/v1-delete-account` |
||||
); |
||||
|
||||
if (error || !response) { |
||||
setIsLoading(false); |
||||
setError(error?.message || 'Something went wrong'); |
||||
return; |
||||
} |
||||
|
||||
logout(); |
||||
}; |
||||
|
||||
const handleClosePopup = () => { |
||||
setIsLoading(false); |
||||
setError(''); |
||||
setConfirmationText(''); |
||||
|
||||
const deleteAccountPopup = document.getElementById('delete-account-popup'); |
||||
deleteAccountPopup?.classList.add('hidden'); |
||||
deleteAccountPopup?.classList.remove('flex'); |
||||
}; |
||||
|
||||
return ( |
||||
<form onSubmit={handleSubmit}> |
||||
<div className="my-4"> |
||||
<input |
||||
type="text" |
||||
name="delete-account" |
||||
id="delete-account" |
||||
className="mt-2 block w-full rounded-md border border-gray-300 py-2 px-3 outline-none placeholder:text-gray-400 focus:border-gray-400" |
||||
placeholder={'Type "delete" to confirm'} |
||||
required |
||||
autoFocus |
||||
value={confirmationText} |
||||
onInput={(e) => |
||||
setConfirmationText((e.target as HTMLInputElement).value) |
||||
} |
||||
/> |
||||
{error && ( |
||||
<p className="mt-2 rounded-lg bg-red-100 p-2 text-red-700">{error}</p> |
||||
)} |
||||
</div> |
||||
|
||||
<div className="flex items-center gap-2"> |
||||
<button |
||||
type="button" |
||||
disabled={isLoading} |
||||
onClick={handleClosePopup} |
||||
className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center" |
||||
> |
||||
Cancel |
||||
</button> |
||||
<button |
||||
type="submit" |
||||
disabled={isLoading || confirmationText.toUpperCase() !== 'DELETE'} |
||||
className="flex-grow cursor-pointer rounded-lg bg-red-500 py-2 text-white disabled:opacity-40" |
||||
> |
||||
{isLoading ? 'Please wait ..' : 'Confirm'} |
||||
</button> |
||||
</div> |
||||
</form> |
||||
); |
||||
} |
||||
@ -0,0 +1,17 @@ |
||||
--- |
||||
import Popup from '../Popup/Popup.astro'; |
||||
import { DeleteAccountForm } from './DeleteAccountForm'; |
||||
--- |
||||
|
||||
<Popup id='delete-account-popup' title='Delete Account' subtitle=''> |
||||
<div class='-mt-2.5'> |
||||
<p> |
||||
This will permanently delete your account and all your associated data |
||||
including your progress. |
||||
</p> |
||||
|
||||
<p class="text-black font-medium -mb-2 mt-3 text-base">Please type "delete" to confirm.</p> |
||||
|
||||
<DeleteAccountForm client:only /> |
||||
</div> |
||||
</Popup> |
||||
|
After Width: | Height: | Size: 1.2 KiB |
Loading…
Reference in new issue