Page MenuHomePhabricator
Differential D3838

[web] Add `accountPasswordInputRef` back to `ThreadSettingsDeleteTab`
ClosedPublic
Actions

Authored by atul on Apr 25 2022, 11:10 AM.
Tags
None
Referenced Files
Unknown Object (File)
Mon, Mar 31, 7:40 PM
Unknown Object (File)
Mon, Mar 31, 1:22 PM
Unknown Object (File)
Mon, Mar 31, 9:46 AM
Unknown Object (File)
Mon, Mar 31, 6:06 AM
Unknown Object (File)
Sun, Mar 30, 8:19 PM
Unknown Object (File)
Sun, Mar 30, 10:45 AM
Unknown Object (File)
Sat, Mar 29, 7:20 PM
Unknown Object (File)
Sat, Mar 29, 3:38 AM
View All Files
Subscribers
• abosh
• adrian
ashoat
• karol

Details

Reviewers
• jacek
tomek
Commits
rCOMMc52992f6c39c: [web] Add `accountPasswordInputRef` back to `ThreadSettingsDeleteTab`
Summary

Bring back accountPasswordInputRef to ThreadSettingsDeleteTab using the React.useRef() hook.

We clear the input and focus() it on exception in deleteThreadAction.

Depends on D3837

Test Plan
  1. Open ThreadSettingsModal
  2. Navigate to Delete tab
  3. Enter gibberish for password
  4. Ensure that things continue to look/work as expected

Diff Detail

Repository
rCOMM Comm
Branch
arcpatch-D3838 (branched from master)
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

atul created this revision.Apr 25 2022, 11:10 AM
Herald added subscribers: • abosh, • karol, • adrian, ashoat. · View Herald TranscriptApr 25 2022, 11:10 AM
atul added a comment.Apr 25 2022, 11:12 AM

(All the ThreadSettingsModal refactor-related TODOs have been resolved at this point)

atul published this revision for review.Apr 25 2022, 11:13 AM
Harbormaster completed remote builds in B8525: Diff 11884.Apr 25 2022, 11:15 AM
atul edited the summary of this revision. (Show Details)Apr 25 2022, 11:18 AM
atul added a parent revision: D3837: [web] Push "Delete thread" functionality down to `ThreadSettingsDeleteTab`.
atul removed a parent revision: D3832: [web] Add `nameInputRef` back to `ThreadSettingsGeneralTab`.
atul added a child revision: D3840: [web] Push `accountPassword` state and related functionality down to `ThreadSettingsDeleteTab`.Apr 25 2022, 11:38 AM
tomek accepted this revision.Apr 26 2022, 8:48 AM
This revision is now accepted and ready to land.Apr 26 2022, 8:48 AM
atul updated this revision to Diff 11953.Apr 26 2022, 10:45 AM

rebase

Harbormaster completed remote builds in B8574: Diff 11953.Apr 26 2022, 10:53 AM
atul updated this revision to Diff 12083.Apr 28 2022, 2:25 PM

rebase before landing

Harbormaster completed remote builds in B8677: Diff 12083.Apr 28 2022, 2:30 PM
Closed by commit rCOMMc52992f6c39c: [web] Add `accountPasswordInputRef` back to `ThreadSettingsDeleteTab` (authored by atul). · Explain WhyApr 28 2022, 2:31 PM
This revision was automatically updated to reflect the committed changes.
atul added a commit: rCOMMc52992f6c39c: [web] Add `accountPasswordInputRef` back to `ThreadSettingsDeleteTab`.

Revision Contents
Changeset List

PathSize
web/
modals/
threads/
6 lines

Diff 12083

View Options

web/modals/threads/thread-settings-delete-tab.react.js

Show All 36 Lines const {
threadInfo, threadInfo,
setErrorMessage, setErrorMessage,
} = props; } = props;
const modalContext = useModalContext(); const modalContext = useModalContext();
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
const callDeleteThread = useServerCall(deleteThread); const callDeleteThread = useServerCall(deleteThread);
const accountPasswordInputRef = React.useRef();
const deleteThreadAction = React.useCallback(async () => { const deleteThreadAction = React.useCallback(async () => {
try { try {
const response = await callDeleteThread(threadInfo.id, accountPassword); const response = await callDeleteThread(threadInfo.id, accountPassword);
modalContext.clearModal(); modalContext.clearModal();
return response; return response;
} catch (e) { } catch (e) {
setErrorMessage( setErrorMessage(
e.message === 'invalid_credentials' ? 'wrong password' : 'unkown error', e.message === 'invalid_credentials' ? 'wrong password' : 'unkown error',
); );
setAccountPassword(''); setAccountPassword('');
// TODO: accountPasswordInput.focus() accountPasswordInputRef.current?.focus();
// (once ref is moved up to functional component)
throw e; throw e;
} }
}, [ }, [
accountPassword, accountPassword,
callDeleteThread, callDeleteThread,
modalContext, modalContext,
setAccountPassword, setAccountPassword,
setErrorMessage, setErrorMessage,
Show All 23 Lines <>
<div className={css.form_title}>Account password</div> <div className={css.form_title}>Account password</div>
<div className={css.form_content}> <div className={css.form_content}>
<input <input
type="password" type="password"
placeholder="Personal account password" placeholder="Personal account password"
value={accountPassword} value={accountPassword}
onChange={onChangeAccountPassword} onChange={onChangeAccountPassword}
disabled={inputDisabled} disabled={inputDisabled}
ref={accountPasswordInputRef}
/> />
</div> </div>
</div> </div>
<Button onClick={onDelete} variant="danger" disabled={inputDisabled}> <Button onClick={onDelete} variant="danger" disabled={inputDisabled}>
Delete Delete
</Button> </Button>
</> </>
); );
} }
export default ThreadSettingsDeleteTab; export default ThreadSettingsDeleteTab;