From: Jeremy Davis <jeremy.davis@sonarsource.com>
Date: Wed, 6 Apr 2022 15:14:47 +0000 (+0200)
Subject: SONAR-16242 Better file structure
X-Git-Tag: 9.5.0.56709~250
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=334782ccc54d5531fb14121c33d598758126f354;p=sonarqube.git

SONAR-16242 Better file structure
---

diff --git a/server/sonar-web/src/main/js/apps/account/Account.tsx b/server/sonar-web/src/main/js/apps/account/Account.tsx
new file mode 100644
index 00000000000..32a51188466
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/account/Account.tsx
@@ -0,0 +1,69 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2022 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import * as React from 'react';
+import { Helmet } from 'react-helmet-async';
+import A11ySkipTarget from '../../app/components/a11y/A11ySkipTarget';
+import withCurrentUserContext from '../../app/components/current-user/withCurrentUserContext';
+import Suggestions from '../../app/components/embed-docs-modal/Suggestions';
+import handleRequiredAuthentication from '../../helpers/handleRequiredAuthentication';
+import { translate } from '../../helpers/l10n';
+import { CurrentUser, LoggedInUser } from '../../types/users';
+import './account.css';
+import Nav from './components/Nav';
+import UserCard from './components/UserCard';
+
+interface Props {
+  currentUser: CurrentUser;
+}
+
+export class Account extends React.PureComponent<Props> {
+  componentDidMount() {
+    if (!this.props.currentUser.isLoggedIn) {
+      handleRequiredAuthentication();
+    }
+  }
+
+  render() {
+    const { currentUser, children } = this.props;
+
+    if (!currentUser.isLoggedIn) {
+      return null;
+    }
+
+    const title = translate('my_account.page');
+    return (
+      <div id="account-page">
+        <Suggestions suggestions="account" />
+        <Helmet defaultTitle={title} defer={false} titleTemplate={`%s - ${title}`} />
+        <A11ySkipTarget anchor="account_main" />
+        <header className="account-header">
+          <div className="account-container clearfix">
+            <UserCard user={currentUser as LoggedInUser} />
+            <Nav />
+          </div>
+        </header>
+
+        {children}
+      </div>
+    );
+  }
+}
+
+export default withCurrentUserContext(Account);
diff --git a/server/sonar-web/src/main/js/apps/account/__tests__/Account-test.tsx b/server/sonar-web/src/main/js/apps/account/__tests__/Account-test.tsx
new file mode 100644
index 00000000000..98e4f984f93
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/account/__tests__/Account-test.tsx
@@ -0,0 +1,41 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2022 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import { shallow } from 'enzyme';
+import * as React from 'react';
+import handleRequiredAuthentication from '../../../helpers/handleRequiredAuthentication';
+import { mockCurrentUser } from '../../../helpers/testMocks';
+import { Account } from '../Account';
+
+jest.mock('../../../helpers/handleRequiredAuthentication', () => jest.fn());
+
+it('should render correctly', () => {
+  const wrapper = shallowRender();
+  expect(wrapper).toMatchSnapshot();
+});
+
+it('should not render for anonymous user', () => {
+  const wrapper = shallowRender({ currentUser: mockCurrentUser({ isLoggedIn: false }) });
+  expect(wrapper.type()).toBeNull();
+  expect(handleRequiredAuthentication).toBeCalled();
+});
+
+function shallowRender(props: Partial<Account['props']> = {}) {
+  return shallow(<Account currentUser={mockCurrentUser({ isLoggedIn: true })} {...props} />);
+}
diff --git a/server/sonar-web/src/main/js/apps/account/__tests__/__snapshots__/Account-test.tsx.snap b/server/sonar-web/src/main/js/apps/account/__tests__/__snapshots__/Account-test.tsx.snap
new file mode 100644
index 00000000000..c346a37e237
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/account/__tests__/__snapshots__/Account-test.tsx.snap
@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<div
+  id="account-page"
+>
+  <Suggestions
+    suggestions="account"
+  />
+  <Helmet
+    defaultTitle="my_account.page"
+    defer={false}
+    encodeSpecialCharacters={true}
+    prioritizeSeoTags={false}
+    titleTemplate="%s - my_account.page"
+  />
+  <A11ySkipTarget
+    anchor="account_main"
+  />
+  <header
+    className="account-header"
+  >
+    <div
+      className="account-container clearfix"
+    >
+      <UserCard
+        user={
+          Object {
+            "isLoggedIn": true,
+          }
+        }
+      />
+      <Nav />
+    </div>
+  </header>
+</div>
+`;
diff --git a/server/sonar-web/src/main/js/apps/account/components/Account.tsx b/server/sonar-web/src/main/js/apps/account/components/Account.tsx
deleted file mode 100644
index 672f3fa3da8..00000000000
--- a/server/sonar-web/src/main/js/apps/account/components/Account.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2022 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import { Helmet } from 'react-helmet-async';
-import A11ySkipTarget from '../../../app/components/a11y/A11ySkipTarget';
-import withCurrentUserContext from '../../../app/components/current-user/withCurrentUserContext';
-import Suggestions from '../../../app/components/embed-docs-modal/Suggestions';
-import handleRequiredAuthentication from '../../../helpers/handleRequiredAuthentication';
-import { translate } from '../../../helpers/l10n';
-import { CurrentUser, LoggedInUser } from '../../../types/users';
-import '../account.css';
-import Nav from './Nav';
-import UserCard from './UserCard';
-
-interface Props {
-  currentUser: CurrentUser;
-}
-
-export class Account extends React.PureComponent<Props> {
-  componentDidMount() {
-    if (!this.props.currentUser.isLoggedIn) {
-      handleRequiredAuthentication();
-    }
-  }
-
-  render() {
-    const { currentUser, children } = this.props;
-
-    if (!currentUser.isLoggedIn) {
-      return null;
-    }
-
-    const title = translate('my_account.page');
-    return (
-      <div id="account-page">
-        <Suggestions suggestions="account" />
-        <Helmet defaultTitle={title} defer={false} titleTemplate={`%s - ${title}`} />
-        <A11ySkipTarget anchor="account_main" />
-        <header className="account-header">
-          <div className="account-container clearfix">
-            <UserCard user={currentUser as LoggedInUser} />
-            <Nav />
-          </div>
-        </header>
-
-        {children}
-      </div>
-    );
-  }
-}
-
-export default withCurrentUserContext(Account);
diff --git a/server/sonar-web/src/main/js/apps/account/components/Security.tsx b/server/sonar-web/src/main/js/apps/account/components/Security.tsx
deleted file mode 100644
index 1cc827ceeea..00000000000
--- a/server/sonar-web/src/main/js/apps/account/components/Security.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2022 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import { Helmet } from 'react-helmet-async';
-import withCurrentUserContext from '../../../app/components/current-user/withCurrentUserContext';
-import ResetPasswordForm from '../../../components/common/ResetPasswordForm';
-import { translate } from '../../../helpers/l10n';
-import { LoggedInUser } from '../../../types/users';
-import Tokens from './Tokens';
-
-export interface SecurityProps {
-  currentUser: LoggedInUser;
-}
-
-export function Security({ currentUser }: SecurityProps) {
-  return (
-    <div className="account-body account-container">
-      <Helmet defer={false} title={translate('my_account.security')} />
-      <Tokens login={currentUser.login} />
-      {currentUser.local && (
-        <section className="boxed-group">
-          <h2 className="spacer-bottom">{translate('my_profile.password.title')}</h2>
-          <ResetPasswordForm className="boxed-group-inner" user={currentUser} />
-        </section>
-      )}
-    </div>
-  );
-}
-
-export default withCurrentUserContext(Security);
diff --git a/server/sonar-web/src/main/js/apps/account/components/Tokens.tsx b/server/sonar-web/src/main/js/apps/account/components/Tokens.tsx
deleted file mode 100644
index 44c67d9f9a0..00000000000
--- a/server/sonar-web/src/main/js/apps/account/components/Tokens.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2022 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import InstanceMessage from '../../../components/common/InstanceMessage';
-import { translate } from '../../../helpers/l10n';
-import TokensForm from '../../users/components/TokensForm';
-
-interface Props {
-  login: string;
-}
-
-export default function Tokens({ login }: Props) {
-  return (
-    <div className="boxed-group">
-      <h2>{translate('users.tokens')}</h2>
-      <div className="boxed-group-inner">
-        <div className="big-spacer-bottom big-spacer-right markdown">
-          <InstanceMessage message={translate('my_account.tokens_description')} />
-        </div>
-
-        <TokensForm deleteConfirmation="modal" login={login} />
-      </div>
-    </div>
-  );
-}
diff --git a/server/sonar-web/src/main/js/apps/account/components/__tests__/Account-test.tsx b/server/sonar-web/src/main/js/apps/account/components/__tests__/Account-test.tsx
deleted file mode 100644
index 4c8e60e2173..00000000000
--- a/server/sonar-web/src/main/js/apps/account/components/__tests__/Account-test.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2022 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import { shallow } from 'enzyme';
-import * as React from 'react';
-import handleRequiredAuthentication from '../../../../helpers/handleRequiredAuthentication';
-import { mockCurrentUser } from '../../../../helpers/testMocks';
-import { Account } from '../Account';
-
-jest.mock('../../../../helpers/handleRequiredAuthentication', () => jest.fn());
-
-it('should render correctly', () => {
-  const wrapper = shallowRender();
-  expect(wrapper).toMatchSnapshot();
-});
-
-it('should not render for anonymous user', () => {
-  const wrapper = shallowRender({ currentUser: mockCurrentUser({ isLoggedIn: false }) });
-  expect(wrapper.type()).toBeNull();
-  expect(handleRequiredAuthentication).toBeCalled();
-});
-
-function shallowRender(props: Partial<Account['props']> = {}) {
-  return shallow(<Account currentUser={mockCurrentUser({ isLoggedIn: true })} {...props} />);
-}
diff --git a/server/sonar-web/src/main/js/apps/account/components/__tests__/Security-test.tsx b/server/sonar-web/src/main/js/apps/account/components/__tests__/Security-test.tsx
deleted file mode 100644
index 30c1668fe1e..00000000000
--- a/server/sonar-web/src/main/js/apps/account/components/__tests__/Security-test.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2022 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import { shallow } from 'enzyme';
-import * as React from 'react';
-import { mockLoggedInUser } from '../../../../helpers/testMocks';
-import { Security, SecurityProps } from '../Security';
-
-it('should render correctly', () => {
-  expect(shallowRender()).toMatchSnapshot('local user');
-  expect(shallowRender({ currentUser: mockLoggedInUser({ local: false }) })).toMatchSnapshot(
-    'non-local user'
-  );
-});
-
-function shallowRender(props: Partial<SecurityProps> = {}) {
-  return shallow(<Security currentUser={mockLoggedInUser({ local: true })} {...props} />);
-}
diff --git a/server/sonar-web/src/main/js/apps/account/components/__tests__/Tokens-test.tsx b/server/sonar-web/src/main/js/apps/account/components/__tests__/Tokens-test.tsx
deleted file mode 100644
index 821b507ebf8..00000000000
--- a/server/sonar-web/src/main/js/apps/account/components/__tests__/Tokens-test.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2022 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import { shallow } from 'enzyme';
-import * as React from 'react';
-import Tokens from '../Tokens';
-
-it('renders', () => {
-  expect(shallow(<Tokens login="user" />)).toMatchSnapshot();
-});
diff --git a/server/sonar-web/src/main/js/apps/account/components/__tests__/__snapshots__/Account-test.tsx.snap b/server/sonar-web/src/main/js/apps/account/components/__tests__/__snapshots__/Account-test.tsx.snap
deleted file mode 100644
index c346a37e237..00000000000
--- a/server/sonar-web/src/main/js/apps/account/components/__tests__/__snapshots__/Account-test.tsx.snap
+++ /dev/null
@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render correctly 1`] = `
-<div
-  id="account-page"
->
-  <Suggestions
-    suggestions="account"
-  />
-  <Helmet
-    defaultTitle="my_account.page"
-    defer={false}
-    encodeSpecialCharacters={true}
-    prioritizeSeoTags={false}
-    titleTemplate="%s - my_account.page"
-  />
-  <A11ySkipTarget
-    anchor="account_main"
-  />
-  <header
-    className="account-header"
-  >
-    <div
-      className="account-container clearfix"
-    >
-      <UserCard
-        user={
-          Object {
-            "isLoggedIn": true,
-          }
-        }
-      />
-      <Nav />
-    </div>
-  </header>
-</div>
-`;
diff --git a/server/sonar-web/src/main/js/apps/account/components/__tests__/__snapshots__/Security-test.tsx.snap b/server/sonar-web/src/main/js/apps/account/components/__tests__/__snapshots__/Security-test.tsx.snap
deleted file mode 100644
index 28b532f9e59..00000000000
--- a/server/sonar-web/src/main/js/apps/account/components/__tests__/__snapshots__/Security-test.tsx.snap
+++ /dev/null
@@ -1,55 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render correctly: local user 1`] = `
-<div
-  className="account-body account-container"
->
-  <Helmet
-    defer={false}
-    encodeSpecialCharacters={true}
-    prioritizeSeoTags={false}
-    title="my_account.security"
-  />
-  <Tokens
-    login="luke"
-  />
-  <section
-    className="boxed-group"
-  >
-    <h2
-      className="spacer-bottom"
-    >
-      my_profile.password.title
-    </h2>
-    <ResetPasswordForm
-      className="boxed-group-inner"
-      user={
-        Object {
-          "groups": Array [],
-          "isLoggedIn": true,
-          "local": true,
-          "login": "luke",
-          "name": "Skywalker",
-          "scmAccounts": Array [],
-        }
-      }
-    />
-  </section>
-</div>
-`;
-
-exports[`should render correctly: non-local user 1`] = `
-<div
-  className="account-body account-container"
->
-  <Helmet
-    defer={false}
-    encodeSpecialCharacters={true}
-    prioritizeSeoTags={false}
-    title="my_account.security"
-  />
-  <Tokens
-    login="luke"
-  />
-</div>
-`;
diff --git a/server/sonar-web/src/main/js/apps/account/components/__tests__/__snapshots__/Tokens-test.tsx.snap b/server/sonar-web/src/main/js/apps/account/components/__tests__/__snapshots__/Tokens-test.tsx.snap
deleted file mode 100644
index 67efe5168da..00000000000
--- a/server/sonar-web/src/main/js/apps/account/components/__tests__/__snapshots__/Tokens-test.tsx.snap
+++ /dev/null
@@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders 1`] = `
-<div
-  className="boxed-group"
->
-  <h2>
-    users.tokens
-  </h2>
-  <div
-    className="boxed-group-inner"
-  >
-    <div
-      className="big-spacer-bottom big-spacer-right markdown"
-    >
-      <InstanceMessage
-        message="my_account.tokens_description"
-      />
-    </div>
-    <TokensForm
-      deleteConfirmation="modal"
-      login="user"
-    />
-  </div>
-</div>
-`;
diff --git a/server/sonar-web/src/main/js/apps/account/routes.ts b/server/sonar-web/src/main/js/apps/account/routes.ts
index 81f047bbb7d..618015e7955 100644
--- a/server/sonar-web/src/main/js/apps/account/routes.ts
+++ b/server/sonar-web/src/main/js/apps/account/routes.ts
@@ -21,14 +21,14 @@ import { lazyLoadComponent } from '../../components/lazyLoadComponent';
 
 const routes = [
   {
-    component: lazyLoadComponent(() => import('./components/Account')),
+    component: lazyLoadComponent(() => import('./Account')),
     childRoutes: [
       {
         indexRoute: { component: lazyLoadComponent(() => import('./profile/Profile')) }
       },
       {
         path: 'security',
-        component: lazyLoadComponent(() => import('./components/Security'))
+        component: lazyLoadComponent(() => import('./security/Security'))
       },
       {
         path: 'projects',
diff --git a/server/sonar-web/src/main/js/apps/account/security/Security.tsx b/server/sonar-web/src/main/js/apps/account/security/Security.tsx
new file mode 100644
index 00000000000..1cc827ceeea
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/account/security/Security.tsx
@@ -0,0 +1,47 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2022 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import * as React from 'react';
+import { Helmet } from 'react-helmet-async';
+import withCurrentUserContext from '../../../app/components/current-user/withCurrentUserContext';
+import ResetPasswordForm from '../../../components/common/ResetPasswordForm';
+import { translate } from '../../../helpers/l10n';
+import { LoggedInUser } from '../../../types/users';
+import Tokens from './Tokens';
+
+export interface SecurityProps {
+  currentUser: LoggedInUser;
+}
+
+export function Security({ currentUser }: SecurityProps) {
+  return (
+    <div className="account-body account-container">
+      <Helmet defer={false} title={translate('my_account.security')} />
+      <Tokens login={currentUser.login} />
+      {currentUser.local && (
+        <section className="boxed-group">
+          <h2 className="spacer-bottom">{translate('my_profile.password.title')}</h2>
+          <ResetPasswordForm className="boxed-group-inner" user={currentUser} />
+        </section>
+      )}
+    </div>
+  );
+}
+
+export default withCurrentUserContext(Security);
diff --git a/server/sonar-web/src/main/js/apps/account/security/Tokens.tsx b/server/sonar-web/src/main/js/apps/account/security/Tokens.tsx
new file mode 100644
index 00000000000..44c67d9f9a0
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/account/security/Tokens.tsx
@@ -0,0 +1,42 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2022 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import * as React from 'react';
+import InstanceMessage from '../../../components/common/InstanceMessage';
+import { translate } from '../../../helpers/l10n';
+import TokensForm from '../../users/components/TokensForm';
+
+interface Props {
+  login: string;
+}
+
+export default function Tokens({ login }: Props) {
+  return (
+    <div className="boxed-group">
+      <h2>{translate('users.tokens')}</h2>
+      <div className="boxed-group-inner">
+        <div className="big-spacer-bottom big-spacer-right markdown">
+          <InstanceMessage message={translate('my_account.tokens_description')} />
+        </div>
+
+        <TokensForm deleteConfirmation="modal" login={login} />
+      </div>
+    </div>
+  );
+}
diff --git a/server/sonar-web/src/main/js/apps/account/security/__tests__/Security-test.tsx b/server/sonar-web/src/main/js/apps/account/security/__tests__/Security-test.tsx
new file mode 100644
index 00000000000..30c1668fe1e
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/account/security/__tests__/Security-test.tsx
@@ -0,0 +1,34 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2022 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import { shallow } from 'enzyme';
+import * as React from 'react';
+import { mockLoggedInUser } from '../../../../helpers/testMocks';
+import { Security, SecurityProps } from '../Security';
+
+it('should render correctly', () => {
+  expect(shallowRender()).toMatchSnapshot('local user');
+  expect(shallowRender({ currentUser: mockLoggedInUser({ local: false }) })).toMatchSnapshot(
+    'non-local user'
+  );
+});
+
+function shallowRender(props: Partial<SecurityProps> = {}) {
+  return shallow(<Security currentUser={mockLoggedInUser({ local: true })} {...props} />);
+}
diff --git a/server/sonar-web/src/main/js/apps/account/security/__tests__/Tokens-test.tsx b/server/sonar-web/src/main/js/apps/account/security/__tests__/Tokens-test.tsx
new file mode 100644
index 00000000000..821b507ebf8
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/account/security/__tests__/Tokens-test.tsx
@@ -0,0 +1,26 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2022 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import { shallow } from 'enzyme';
+import * as React from 'react';
+import Tokens from '../Tokens';
+
+it('renders', () => {
+  expect(shallow(<Tokens login="user" />)).toMatchSnapshot();
+});
diff --git a/server/sonar-web/src/main/js/apps/account/security/__tests__/__snapshots__/Security-test.tsx.snap b/server/sonar-web/src/main/js/apps/account/security/__tests__/__snapshots__/Security-test.tsx.snap
new file mode 100644
index 00000000000..28b532f9e59
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/account/security/__tests__/__snapshots__/Security-test.tsx.snap
@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly: local user 1`] = `
+<div
+  className="account-body account-container"
+>
+  <Helmet
+    defer={false}
+    encodeSpecialCharacters={true}
+    prioritizeSeoTags={false}
+    title="my_account.security"
+  />
+  <Tokens
+    login="luke"
+  />
+  <section
+    className="boxed-group"
+  >
+    <h2
+      className="spacer-bottom"
+    >
+      my_profile.password.title
+    </h2>
+    <ResetPasswordForm
+      className="boxed-group-inner"
+      user={
+        Object {
+          "groups": Array [],
+          "isLoggedIn": true,
+          "local": true,
+          "login": "luke",
+          "name": "Skywalker",
+          "scmAccounts": Array [],
+        }
+      }
+    />
+  </section>
+</div>
+`;
+
+exports[`should render correctly: non-local user 1`] = `
+<div
+  className="account-body account-container"
+>
+  <Helmet
+    defer={false}
+    encodeSpecialCharacters={true}
+    prioritizeSeoTags={false}
+    title="my_account.security"
+  />
+  <Tokens
+    login="luke"
+  />
+</div>
+`;
diff --git a/server/sonar-web/src/main/js/apps/account/security/__tests__/__snapshots__/Tokens-test.tsx.snap b/server/sonar-web/src/main/js/apps/account/security/__tests__/__snapshots__/Tokens-test.tsx.snap
new file mode 100644
index 00000000000..67efe5168da
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/account/security/__tests__/__snapshots__/Tokens-test.tsx.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders 1`] = `
+<div
+  className="boxed-group"
+>
+  <h2>
+    users.tokens
+  </h2>
+  <div
+    className="boxed-group-inner"
+  >
+    <div
+      className="big-spacer-bottom big-spacer-right markdown"
+    >
+      <InstanceMessage
+        message="my_account.tokens_description"
+      />
+    </div>
+    <TokensForm
+      deleteConfirmation="modal"
+      login="user"
+    />
+  </div>
+</div>
+`;