diff --git a/web/modals/threads/thread-settings-modal.css b/web/modals/threads/thread-settings-modal.css index fe8074635..496c934c9 100644 --- a/web/modals/threads/thread-settings-modal.css +++ b/web/modals/threads/thread-settings-modal.css @@ -1,141 +1,141 @@ -div.modal-body { +div.modal_body { padding: 6px 6px; width: 100%; box-sizing: border-box; background-color: var(--modal-bg); border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; flex: 1; display: flex; flex-direction: column; } -div.modal-body p { +div.modal_body p { padding: 1px 3px 4px 3px; font-size: 14px; text-align: center; } -div.modal-body textarea { +div.modal_body textarea { margin: 3px; } -div.modal-body textarea { +div.modal_body textarea { font-size: 14px; padding: 1px; width: 175px; } -div.modal-body p.confirm-account-password { +div.modal_body p.confirm_account_password { margin-bottom: 4px; color: var(--fg); } -div.modal-body div.form-footer { +div.modal_body div.form_footer { display: flex; flex-direction: row-reverse; justify-content: space-between; padding-top: 8px; } -div.modal-body div.form-footer div.modal-form-error { +div.modal_body div.form_footer div.modal_form_error { font-size: 12px; color: red; font-style: italic; padding-left: 6px; align-self: center; } -div.modal-body div.form-title { +div.modal_body div.form_title { display: inline-block; text-align: right; padding-right: 5px; padding-top: 5px; font-size: 14px; font-weight: 600; vertical-align: top; width: 110px; color: var(--fg); } -div.modal-body div.form-content { +div.modal_body div.form_content { display: inline-block; font-family: var(--font-stack); color: var(--fg); } -div.modal-body div.form-content input { +div.modal_body div.form_content input { margin-bottom: 4px; } .italic { font-style: italic; color: var(--fg); } -ul.tab-panel { +ul.tab_panel { background-color: var(--modal-bg); padding-left: 10px; padding-top: 5px; } -ul.tab-panel > li { +ul.tab_panel > li { display: inline-block; list-style-type: none; font-size: 13px; font-weight: 600; cursor: pointer; padding: 3px 10px 3px 10px; } -ul.tab-panel > li > a { +ul.tab_panel > li > a { color: #555555; } -div.form-textarea-container { +div.form_textarea_container { margin-top: 1px; } -div.edit-thread-color-container { +div.edit_thread_color_container { margin-top: -5px; } -div.color-title { +div.color_title { margin-top: 4px; } -div.edit-thread-privacy-container { +div.edit_thread_privacy_container { margin-bottom: 6px; } -div.form-enum-selector { +div.form_enum_selector { display: inline-block; padding-bottom: 4px; } -div.form-enum-selector > div.form-enum-container { +div.form_enum_selector > div.form_enum_container { padding-top: 5px; } -div.form-enum-selector > div.form-enum-container > input { +div.form_enum_selector > div.form_enum_container > input { vertical-align: top; margin-top: 4px; } -div.form-enum-selector div.form-enum-option { +div.form_enum_selector div.form_enum_option { display: inline-block; font-size: 15px; font-weight: 600; padding-left: 3px; } -div.form-enum-selector span.form-enum-description { +div.form_enum_selector span.form_enum_description { display: block; font-family: var(--font-stack); font-weight: normal; font-size: 13px; max-width: 260px; color: gray; } -div.form-enum-selector > div.form-enum-container { +div.form_enum_selector > div.form_enum_container { padding-top: 5px; } -div.form-enum-selector > div.form-enum-container > input { +div.form_enum_selector > div.form_enum_container > input { vertical-align: top; margin-top: 4px; } .italic { font-style: italic; } -div.edit-thread-account-password { +div.edit_thread_account_password { border-top: 2px solid #efefef; padding-top: 4px; margin-top: 2px; } diff --git a/web/modals/threads/thread-settings-modal.react.js b/web/modals/threads/thread-settings-modal.react.js index 1f80a84c6..75812c8b8 100644 --- a/web/modals/threads/thread-settings-modal.react.js +++ b/web/modals/threads/thread-settings-modal.react.js @@ -1,599 +1,597 @@ // @flow import classNames from 'classnames'; import invariant from 'invariant'; import _pickBy from 'lodash/fp/pickBy'; import * as React from 'react'; import { deleteThreadActionTypes, deleteThread, changeThreadSettingsActionTypes, changeThreadSettings, } from 'lib/actions/thread-actions'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors'; import { threadInfoSelector } from 'lib/selectors/thread-selectors'; import { threadHasPermission, threadTypeDescriptions, robotextName, } from 'lib/shared/thread-utils'; import { type ThreadInfo, threadTypes, assertThreadType, type ChangeThreadSettingsPayload, type UpdateThreadRequest, type LeaveThreadPayload, threadPermissions, type ThreadChanges, } from 'lib/types/thread-types'; import type { UserInfos } from 'lib/types/user-types'; import { useDispatchActionPromise, useServerCall, type DispatchActionPromise, } from 'lib/utils/action-utils'; import { firstLine } from 'lib/utils/string-utils'; import Button from '../../components/button.react'; import { useModalContext } from '../../modals/modal-provider.react'; import { useSelector } from '../../redux/redux-utils'; import Modal from '../modal.react'; import ColorPicker from './color-picker.react'; import css from './thread-settings-modal.css'; const { COMMUNITY_OPEN_SUBTHREAD, COMMUNITY_SECRET_SUBTHREAD } = threadTypes; type TabType = 'general' | 'privacy' | 'delete'; type TabProps = { +name: string, +tabType: TabType, +selected: boolean, +onClick: (tabType: TabType) => void, }; class Tab extends React.PureComponent { render() { const classNamesForTab = classNames({ [css['current-tab']]: this.props.selected, [css['delete-tab']]: this.props.selected && this.props.tabType === 'delete', }); return (
  • {this.props.name}
  • ); } onClick = () => { return this.props.onClick(this.props.tabType); }; } type BaseProps = { +threadID: string, }; type Props = { ...BaseProps, +threadInfo: ThreadInfo, +changeInProgress: boolean, +viewerID: ?string, +userInfos: UserInfos, +dispatchActionPromise: DispatchActionPromise, +deleteThread: ( threadID: string, currentAccountPassword: string, ) => Promise, +changeThreadSettings: ( update: UpdateThreadRequest, ) => Promise, +onClose: () => void, }; type State = { +queuedChanges: ThreadChanges, +errorMessage: string, +accountPassword: string, +currentTabType: TabType, }; class ThreadSettingsModal extends React.PureComponent { nameInput: ?HTMLInputElement; newThreadPasswordInput: ?HTMLInputElement; accountPasswordInput: ?HTMLInputElement; constructor(props: Props) { super(props); this.state = { queuedChanges: Object.freeze({}), errorMessage: '', accountPassword: '', currentTabType: 'general', }; } componentDidMount() { invariant(this.nameInput, 'nameInput ref unset'); this.nameInput.focus(); } componentDidUpdate(prevProps: Props) { if (this.state.currentTabType !== 'delete') { return; } const permissionForDeleteTab = this.hasPermissionForTab( this.props.threadInfo, 'delete', ); const prevPermissionForDeleteTab = this.hasPermissionForTab( prevProps.threadInfo, 'delete', ); if (!permissionForDeleteTab && prevPermissionForDeleteTab) { this.setTab('general'); } } hasPermissionForTab(threadInfo: ThreadInfo, tab: TabType) { if (tab === 'general') { return threadHasPermission( threadInfo, threadPermissions.EDIT_THREAD_NAME, ); } else if (tab === 'privacy') { return threadHasPermission( threadInfo, threadPermissions.EDIT_PERMISSIONS, ); } else if (tab === 'delete') { return threadHasPermission(threadInfo, threadPermissions.DELETE_THREAD); } invariant(false, `invalid tab ${tab}`); } possiblyChangedValue(key: string) { const valueChanged = this.state.queuedChanges[key] !== null && this.state.queuedChanges[key] !== undefined; return valueChanged ? this.state.queuedChanges[key] : this.props.threadInfo[key]; } namePlaceholder() { return robotextName( this.props.threadInfo, this.props.viewerID, this.props.userInfos, ); } changeQueued() { return ( Object.keys( _pickBy( value => value !== null && value !== undefined, // the lodash/fp libdef coerces the returned object's properties to the // same type, which means it only works for object-as-maps $FlowFixMe )(this.state.queuedChanges), ).length > 0 ); } render() { const { threadInfo } = this.props; const inputDisabled = this.props.changeInProgress || !this.hasPermissionForTab(threadInfo, this.state.currentTabType); let mainContent = null; if (this.state.currentTabType === 'general') { mainContent = (
    -
    Thread name
    -
    +
    Thread name
    +
    -
    -
    Description
    -
    +
    +
    Description
    +
    -
    -
    - Color -
    -
    +
    +
    Color
    +
    ); } else if (this.state.currentTabType === 'privacy') { mainContent = ( -
    +
    -
    Thread type
    -
    -
    +
    Thread type
    +
    +
    -
    +
    -
    +
    -
    +
    ); } else if (this.state.currentTabType === 'delete') { mainContent = ( <>
    -

    +

    Your thread will be permanently deleted. There is no way to reverse this.

    -
    -

    +

    +

    Please enter your account password to confirm your identity

    -
    Account password
    -
    +
    Account password
    +
    ); } let buttons = null; if (this.state.currentTabType === 'delete') { buttons = ( ); } else { buttons = ( ); } const tabs = [ , ]; // This UI needs to be updated to handle sidebars but we haven't gotten // there yet. We'll probably end up ripping it out anyways, so for now we // are just hiding the privacy tab for any thread that was created as a // sidebar const canSeePrivacyTab = this.possiblyChangedValue('parentThreadID') && threadInfo.sourceMessageID && (threadInfo.type === threadTypes.COMMUNITY_OPEN_SUBTHREAD || threadInfo.type === threadTypes.COMMUNITY_SECRET_SUBTHREAD); if (canSeePrivacyTab) { tabs.push( , ); } const canDeleteThread = this.hasPermissionForTab(threadInfo, 'delete'); if (canDeleteThread) { tabs.push( , ); } return ( -
      {tabs}
    -
    +
      {tabs}
    +
    {mainContent} -
    +
    {buttons} -
    +
    {this.state.errorMessage}
    ); } setTab = (tabType: TabType) => { this.setState({ currentTabType: tabType }); }; nameInputRef = (nameInput: ?HTMLInputElement) => { this.nameInput = nameInput; }; newThreadPasswordInputRef = (newThreadPasswordInput: ?HTMLInputElement) => { this.newThreadPasswordInput = newThreadPasswordInput; }; accountPasswordInputRef = (accountPasswordInput: ?HTMLInputElement) => { this.accountPasswordInput = accountPasswordInput; }; onChangeName = (event: SyntheticEvent) => { const target = event.currentTarget; const newValue = target.value !== this.props.threadInfo.name ? target.value : undefined; this.setState((prevState: State) => ({ ...prevState, queuedChanges: { ...prevState.queuedChanges, name: firstLine(newValue), }, })); }; onChangeDescription = (event: SyntheticEvent) => { const target = event.currentTarget; const newValue = target.value !== this.props.threadInfo.description ? target.value : undefined; this.setState((prevState: State) => ({ ...prevState, queuedChanges: { ...prevState.queuedChanges, description: newValue, }, })); }; onChangeColor = (color: string) => { const newValue = color !== this.props.threadInfo.color ? color : undefined; this.setState((prevState: State) => ({ ...prevState, queuedChanges: { ...prevState.queuedChanges, color: newValue, }, })); }; onChangeThreadType = (event: SyntheticEvent) => { const uiValue = assertThreadType(parseInt(event.currentTarget.value, 10)); const newValue = uiValue !== this.props.threadInfo.type ? uiValue : undefined; this.setState((prevState: State) => ({ ...prevState, queuedChanges: { ...prevState.queuedChanges, type: newValue, }, })); }; onChangeAccountPassword = (event: SyntheticEvent) => { const target = event.currentTarget; this.setState({ accountPassword: target.value }); }; onSubmit = (event: SyntheticEvent) => { event.preventDefault(); this.props.dispatchActionPromise( changeThreadSettingsActionTypes, this.changeThreadSettingsAction(), ); }; async changeThreadSettingsAction() { try { const response = await this.props.changeThreadSettings({ threadID: this.props.threadInfo.id, changes: this.state.queuedChanges, }); this.props.onClose(); return response; } catch (e) { this.setState( prevState => ({ ...prevState, queuedChanges: Object.freeze({}), accountPassword: '', errorMessage: 'unknown error', currentTabType: 'general', }), () => { invariant(this.nameInput, 'nameInput ref unset'); this.nameInput.focus(); }, ); throw e; } } onDelete = (event: SyntheticEvent) => { event.preventDefault(); this.props.dispatchActionPromise( deleteThreadActionTypes, this.deleteThreadAction(), ); }; async deleteThreadAction() { try { const response = await this.props.deleteThread( this.props.threadInfo.id, this.state.accountPassword, ); this.props.onClose(); return response; } catch (e) { const errorMessage = e.message === 'invalid_credentials' ? 'wrong password' : 'unknown error'; this.setState( { accountPassword: '', errorMessage: errorMessage, }, () => { invariant( this.accountPasswordInput, 'accountPasswordInput ref unset', ); this.accountPasswordInput.focus(); }, ); throw e; } } } const deleteThreadLoadingStatusSelector = createLoadingStatusSelector( deleteThreadActionTypes, ); const changeThreadSettingsLoadingStatusSelector = createLoadingStatusSelector( changeThreadSettingsActionTypes, ); const ConnectedThreadSettingsModal: React.ComponentType = React.memo( function ConnectedThreadSettingsModal(props) { const changeInProgress = useSelector( state => deleteThreadLoadingStatusSelector(state) === 'loading' || changeThreadSettingsLoadingStatusSelector(state) === 'loading', ); const viewerID = useSelector( state => state.currentUserInfo && state.currentUserInfo.id, ); const userInfos = useSelector(state => state.userStore.userInfos); const callDeleteThread = useServerCall(deleteThread); const callChangeThreadSettings = useServerCall(changeThreadSettings); const dispatchActionPromise = useDispatchActionPromise(); const threadInfo: ?ThreadInfo = useSelector( state => threadInfoSelector(state)[props.threadID], ); const modalContext = useModalContext(); if (!threadInfo) { return ( -
    +

    You no longer have permission to view this thread

    ); } return ( ); }, ); export default ConnectedThreadSettingsModal;