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