LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2025-01-15 14:35:49 +00:00
Code Issues Projects Releases Wiki Activity

Moving totp and delete account settings into their own cards. (#2907)

Browse source 
- Fixes #2896
This commit is contained in:
Dessalines 2025-01-13 20:23:45 -05:00 committed by GitHub
parent 2832f86ace
commit ebb06cdeaf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 92 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

176
src/shared/components/person/settings.tsx
View file

@ -451,7 +451,13 @@ export class Settings extends Component<SettingsRouteProps, SettingsState> {
<div className="card-body">{this.changePasswordHtmlForm()}</div>
</div>
<div className="card border-secondary mb-3">
<div className="card-body">{this.importExport()}</div>
<div className="card-body">{this.totpSection()}</div>
</div>
<div className="card border-secondary mb-3">
<div className="card-body">{this.importExportForm()}</div>
</div>
<div className="card border-secondary mb-3">
<div className="card-body">{this.deleteAccountForm()}</div>
</div>
</div>
</div>
@ -523,10 +529,7 @@ export class Settings extends Component<SettingsRouteProps, SettingsState> {
/>
</div>
<div className="input-group mb-3">
<button
type="submit"
className="btn d-block btn-secondary me-4 w-100"
>
<button type="submit" className="btn btn-secondary">
{this.state.changePasswordRes.state === "loading" ? (
<Spinner />
) : (
@ -672,7 +675,7 @@ export class Settings extends Component<SettingsRouteProps, SettingsState> {
);
}
importExport() {
importExportForm() {
return (
<>
<h2 className="h5">
@ -685,7 +688,7 @@ export class Settings extends Component<SettingsRouteProps, SettingsState> {
) ? (
<>
<button
className="btn btn-secondary w-100 mb-4"
className="btn btn-secondary mb-4"
onClick={linkEvent(this, this.handleExportSettings)}
type="button"
>
@ -700,7 +703,7 @@ export class Settings extends Component<SettingsRouteProps, SettingsState> {
onChange={linkEvent(this, this.handleImportFileChange)}
/>
<button
className="btn btn-secondary w-100 mt-3"
className="btn btn-secondary mt-3"
onClick={linkEvent(this, this.handleImportSettings)}
type="button"
disabled={!this.state.settingsFile}
@ -1152,7 +1155,6 @@ export class Settings extends Component<SettingsRouteProps, SettingsState> {
</label>
</div>
</div>
{this.totpSection()}
<div className="input-group mb-3">
<button type="submit" className="btn d-block btn-secondary me-4">
{this.state.saveRes.state === "loading" ? (
@ -1162,82 +1164,86 @@ export class Settings extends Component<SettingsRouteProps, SettingsState> {
)}
</button>
</div>
<hr />
<form
className="mb-3"
onSubmit={linkEvent(this, this.handleDeleteAccount)}
</form>
</>
);
}
deleteAccountForm() {
return (
<>
<h2 className="h5">{I18NextService.i18n.t("delete_account")}</h2>
<form
className="mb-3"
onSubmit={linkEvent(this, this.handleDeleteAccount)}
>
<button
type="button"
className="btn d-block btn-danger"
onClick={linkEvent(this, this.handleDeleteAccountShowConfirmToggle)}
>
<button
type="button"
className="btn d-block btn-danger"
onClick={linkEvent(
this,
this.handleDeleteAccountShowConfirmToggle,
)}
>
{I18NextService.i18n.t("delete_account")}
</button>
{this.state.deleteAccountShowConfirm && (
<>
<label
className="my-2 alert alert-danger d-block"
role="alert"
htmlFor="password-delete-account"
>
{I18NextService.i18n.t("delete_account_confirm")}
</label>
<PasswordInput
id="password-delete-account"
value={this.state.deleteAccountForm.password}
onInput={linkEvent(
this,
this.handleDeleteAccountPasswordChange,
)}
className="my-2"
/>
<div className="input-group mb-3">
<div className="form-check">
<input
id="delete-account-content"
type="checkbox"
className="form-check-input"
onInput={linkEvent(
this,
this.handleDeleteAccountContentChange,
)}
/>
<label
className="form-check-label"
htmlFor="delete-account-content"
>
{I18NextService.i18n.t("delete_account_content")}
</label>
</div>
{I18NextService.i18n.t("delete_account")}
</button>
{this.state.deleteAccountShowConfirm && (
<>
<label
className="my-2 alert alert-danger d-block"
role="alert"
htmlFor="password-delete-account"
>
{I18NextService.i18n.t("delete_account_confirm")}
</label>
<PasswordInput
id="password-delete-account"
value={this.state.deleteAccountForm.password}
onInput={linkEvent(
this,
this.handleDeleteAccountPasswordChange,
)}
className="my-2"
/>
<div className="input-group mb-3">
<div className="form-check">
<input
id="delete-account-content"
type="checkbox"
className="form-check-input"
onInput={linkEvent(
this,
this.handleDeleteAccountContentChange,
)}
/>
<label
className="form-check-label"
htmlFor="delete-account-content"
>
{I18NextService.i18n.t("delete_account_content")}
</label>
</div>
<button
type="submit"
className="btn btn-danger me-4"
disabled={!this.state.deleteAccountForm.password}
>
{this.state.deleteAccountRes.state === "loading" ? (
<Spinner />
) : (
capitalizeFirstLetter(I18NextService.i18n.t("delete"))
)}
</button>
<button
className="btn btn-secondary"
type="button"
onClick={linkEvent(
this,
this.handleDeleteAccountShowConfirmToggle,
)}
>
{I18NextService.i18n.t("cancel")}
</button>
</>
)}
</form>
</div>
<button
type="submit"
className="btn btn-danger me-4"
disabled={!this.state.deleteAccountForm.password}
>
{this.state.deleteAccountRes.state === "loading" ? (
<Spinner />
) : (
capitalizeFirstLetter(I18NextService.i18n.t("delete"))
)}
</button>
<button
className="btn btn-secondary"
type="button"
onClick={linkEvent(
this,
this.handleDeleteAccountShowConfirmToggle,
)}
>
{I18NextService.i18n.t("cancel")}
</button>
</>
)}
</form>
</>
);
@ -1248,9 +1254,11 @@ export class Settings extends Component<SettingsRouteProps, SettingsState> {
!!UserService.Instance.myUserInfo?.local_user_view.local_user
.totp_2fa_enabled;
const { generateTotpRes } = this.state;
const totpActionStr = totpEnabled ? "disable_totp" : "enable_totp";
return (
<>
<h2 className="h5">{I18NextService.i18n.t(totpActionStr)}</h2>
<button
type="button"
className="btn btn-secondary my-2"
@ -1259,7 +1267,7 @@ export class Settings extends Component<SettingsRouteProps, SettingsState> {
totpEnabled ? handleShowTotpModal : handleGenerateTotp,
)}
>
{I18NextService.i18n.t(totpEnabled ? "disable_totp" : "enable_totp")}
{I18NextService.i18n.t(totpActionStr)}
</button>
{totpEnabled ? (
<TotpModal