Fix MM-57090 (#26589)

webapp/channels/src/components/user_settings/security/__snapshots__/user_settings_security.test.tsx.snap

@@ -547,3 +547,141 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
   </div>
 </div>
 `;
+
+exports[`components/user_settings/display/UserSettingsDisplay should match snapshot, to email 1`] = `
+<div>
+  <SettingMobileHeader
+    closeModal={[MockFunction]}
+    collapseModal={[MockFunction]}
+    text={
+      <Memo(MemoizedFormattedMessage)
+        defaultMessage="Security Settings"
+        id="user.settings.security.title"
+      />
+    }
+  />
+  <div
+    className="user-settings"
+  >
+    <SettingDesktopHeader
+      text={
+        <Memo(MemoizedFormattedMessage)
+          defaultMessage="Security Settings"
+          id="user.settings.security.title"
+        />
+      }
+    />
+    <div
+      className="divider-dark first"
+    />
+    <SettingItem
+      active={false}
+      areAllSectionsInactive={false}
+      max={null}
+      section="password"
+      title={
+        <Memo(MemoizedFormattedMessage)
+          defaultMessage="Password"
+          id="user.settings.security.password"
+        />
+      }
+      updateSection={[Function]}
+    />
+    <div
+      className="divider-light"
+    />
+    <Connect(MfaSection)
+      active={false}
+      areAllSectionsInactive={false}
+      updateSection={[Function]}
+    />
+    <div
+      className="divider-light"
+    />
+    <div
+      className="divider-light"
+    />
+    <Connect(UserAccessTokenSection)
+      active={false}
+      areAllSectionsInactive={false}
+      setRequireConfirm={[MockFunction]}
+      updateSection={[Function]}
+      user={
+        Object {
+          "auth_service": "openid",
+          "id": "user_id",
+        }
+      }
+    />
+    <div
+      className="divider-light"
+    />
+    <SettingItem
+      active={false}
+      areAllSectionsInactive={false}
+      describe={
+        <Memo(MemoizedFormattedMessage)
+          defaultMessage="OpenID"
+          id="user.settings.security.openid"
+        />
+      }
+      max={null}
+      section="signin"
+      title="Sign-in Method"
+      updateSection={[Function]}
+    />
+    <div
+      className="divider-dark"
+    />
+    <br />
+    <ToggleModalButton
+      className="security-links color--link"
+      dialogType={
+        Object {
+          "$$typeof": Symbol(react.memo),
+          "WrappedComponent": Object {
+            "$$typeof": Symbol(react.memo),
+            "compare": null,
+            "type": [Function],
+          },
+          "compare": null,
+          "type": [Function],
+        }
+      }
+      id="viewAccessHistory"
+      modalId="access_history"
+    >
+      <i
+        className="fa fa-clock-o"
+        title="Access History Icon"
+      />
+      <MemoizedFormattedMessage
+        defaultMessage="View Access History"
+        id="user.settings.security.viewHistory"
+      />
+    </ToggleModalButton>
+    <ToggleModalButton
+      className="security-links color--link mt-2"
+      dialogType={
+        Object {
+          "$$typeof": Symbol(react.memo),
+          "WrappedComponent": [Function],
+          "compare": null,
+          "type": [Function],
+        }
+      }
+      id="viewAndLogOutOfActiveSessions"
+      modalId="activity_log"
+    >
+      <i
+        className="fa fa-clock-o"
+        title="Active Sessions Icon"
+      />
+      <MemoizedFormattedMessage
+        defaultMessage="View and Log Out of Active Sessions"
+        id="user.settings.security.logoutActiveSessions"
+      />
+    </ToggleModalButton>
+  </div>
+</div>
+`;

webapp/channels/src/components/user_settings/security/index.ts

@@ -35,7 +35,7 @@ function mapStateToProps(state: GlobalState, ownProps: Props) {
     const userHasTokenRole = UserUtils.hasUserAccessTokenRole(ownProps.user.roles) || UserUtils.isSystemAdmin(ownProps.user.roles);
 
     const enableOAuthServiceProvider = config.EnableOAuthServiceProvider === 'true';
-    const enableSignUpWithEmail = config.EnableSignUpWithEmail === 'true';
+    const allowedToSwitchToEmail = config.EnableSignUpWithEmail === 'true' && (config.EnableSignInWithEmail === 'true' || config.EnableSignInWithUsername === 'true');
     const enableSignUpWithGitLab = config.EnableSignUpWithGitLab === 'true';
     const enableSignUpWithGoogle = config.EnableSignUpWithGoogle === 'true';
     const enableSignUpWithOpenId = config.EnableSignUpWithOpenId === 'true';
@@ -47,7 +47,7 @@ function mapStateToProps(state: GlobalState, ownProps: Props) {
     return {
         canUseAccessTokens: tokensEnabled && userHasTokenRole,
         enableOAuthServiceProvider,
-        enableSignUpWithEmail,
+        allowedToSwitchToEmail,
         enableSignUpWithGitLab,
         enableSignUpWithGoogle,
         enableSignUpWithOpenId,

webapp/channels/src/components/user_settings/security/user_settings_security.test.tsx

@@ -8,6 +8,7 @@ import type {OAuthApp} from '@mattermost/types/integrations';
 import type {UserProfile} from '@mattermost/types/users';
 
 import type {MockIntl} from 'tests/helpers/intl-test-helper';
+import Constants from 'utils/constants';
 import type * as Utils from 'utils/utils';
 
 import {SecurityTab} from './user_settings_security';
@@ -37,7 +38,7 @@ describe('components/user_settings/display/UserSettingsDisplay', () => {
         },
         canUseAccessTokens: true,
         enableOAuthServiceProvider: false,
-        enableSignUpWithEmail: true,
+        allowedToSwitchToEmail: true,
         enableSignUpWithGitLab: false,
         enableSignUpWithGoogle: true,
         enableSignUpWithOpenId: false,
@@ -80,6 +81,18 @@ describe('components/user_settings/display/UserSettingsDisplay', () => {
         expect(wrapper).toMatchSnapshot();
     });
 
+    test('should match snapshot, to email', () => {
+        const user = {
+            id: 'user_id',
+            auth_service: Constants.OPENID_SERVICE,
+        };
+
+        const props = {...requiredProps, user: user as UserProfile};
+
+        const wrapper = shallow<SecurityTab>(<SecurityTab {...props}/>);
+        expect(wrapper).toMatchSnapshot();
+    });
+
     test('componentDidMount() should have called getAuthorizedOAuthApps', () => {
         const props = {...requiredProps, enableOAuthServiceProvider: true};
 

webapp/channels/src/components/user_settings/security/user_settings_security.tsx

@@ -56,7 +56,7 @@ type Props = {
     setRequireConfirm: () => void;
     canUseAccessTokens: boolean;
     enableOAuthServiceProvider: boolean;
-    enableSignUpWithEmail: boolean;
+    allowedToSwitchToEmail: boolean;
     enableSignUpWithGitLab: boolean;
     enableSignUpWithGoogle: boolean;
     enableSignUpWithOpenId: boolean;
@@ -671,7 +671,7 @@ export class SecurityTab extends React.PureComponent<Props, State> {
                         </div>
                     );
                 }
-            } else if (this.props.enableSignUpWithEmail) {
+            } else if (this.props.allowedToSwitchToEmail) {
                 let link;
                 if (user.auth_service === Constants.LDAP_SERVICE) {
                     link =
@@ -966,7 +966,7 @@ export class SecurityTab extends React.PureComponent<Props, State> {
         // If there are other sign-in methods and either email is enabled or the user's account is email, then allow switching
         let signInSection;
         if (
-            (this.props.enableSignUpWithEmail || user.auth_service === '') &&
+            (this.props.allowedToSwitchToEmail || user.auth_service === '') &&
             numMethods > 0 &&
             this.props.experimentalEnableAuthenticationTransfer
         ) {