Merge pull request #452 from topcoder-platform/TCA-845

TCA-845 clean /account page > dev

Author: kkartunov

src-ts/config/environments/environment.default.config.ts

@@ -44,6 +44,7 @@ export const EnvironmentConfigDefault: EnvironmentConfigModel = {
         THRIVE_PAGE: `${COMMUNITY_WEBSITE}/thrive`,
         USER_PROFILE: `${COMMUNITY_WEBSITE}/members`,
         WP_CONTENT: `${COMMUNITY_WEBSITE}/wp-content`,
+        ACCOUNT_SETTINGS: `${COMMUNITY_WEBSITE}/settings/profile`,
     },
     UNIVERSAL_NAV: {
         URL: 'https://uni-nav.topcoder-dev.com/v1/tc-universal-nav.js',

src-ts/config/environments/environment.prod.config.ts

@@ -42,6 +42,7 @@ export const EnvironmentConfigProd: EnvironmentConfigModel = {
         THRIVE_PAGE: `${COMMUNITY_WEBSITE}/thrive`,
         USER_PROFILE: `${COMMUNITY_WEBSITE}/members`,
         WP_CONTENT: `${COMMUNITY_WEBSITE}/wp-content`,
+        ACCOUNT_SETTINGS: `${COMMUNITY_WEBSITE}/settings/profile`,
     },
     UNIVERSAL_NAV: {
         URL: 'https://uni-nav.topcoder.com/v1/tc-universal-nav.js',

src-ts/lib/global-config.model.ts

@@ -37,6 +37,7 @@ export interface GlobalConfig {
         THRIVE_PAGE: string
         USER_PROFILE: string
         WP_CONTENT: string
+        ACCOUNT_SETTINGS: string
     }
     UNIVERSAL_NAV: {
         URL: string

src-ts/utils/settings/Settings.tsx

@@ -1,22 +1,18 @@
 import { FC, useContext } from 'react'
 import { Outlet, Routes } from 'react-router-dom'
 
-import { ContentLayout, profileContext, ProfileContextData, routeContext, RouteContextData } from '../../lib'
+import { ContentLayout, routeContext, RouteContextData } from '../../lib'
 
 export const toolTitle: string = 'Account Settings'
 
+/**
+ * DEPRECATED
+ * TODO: Remove after some time, when clear no one links to here...
+ */
 const Settings: FC<{}> = () => {
 
     const { getChildRoutes }: RouteContextData = useContext(routeContext)
 
-    const profileContextData: ProfileContextData = useContext(profileContext)
-    const { profile }: ProfileContextData = profileContextData
-
-    // if we don't have a profile, don't show the page
-    if (!profile) {
-        return <></>
-    }
-
     return (
         <ContentLayout title={toolTitle}>
             <>

src-ts/utils/settings/account/Account.module.scss

@@ -1,22 +1,15 @@
-@import '../../../lib/styles/includes';
-
-:global(.account-settings-modal) {
-    h2 {
-        margin-bottom: $space-xxl;
-        padding: 0 0 $space-xxl;
-        border-bottom: 1px solid $black-10;
-    }
-
-}
-
+/**
+ * DEPRECATED
+ * TODO: Remove after some time, when no used...
+ */
 .cards {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    column-gap: $space-xxl;
-    margin: $space-xxl 0 0;
-
-    @include ltemd {
-        grid-template-columns: 1fr;
-        row-gap: $space-xxl;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    h3 {
+        margin-bottom: 32px;
     }
 }

src-ts/utils/settings/account/Account.tsx

@@ -1,112 +1,27 @@
-/* eslint-disable jsx-a11y/tabindex-no-positive */
-import { Dispatch, FC, SetStateAction, useCallback, useContext, useState } from 'react'
-import Modal from 'react-responsive-modal'
-
-import {
-    Button,
-    Card,
-    formGetInputFields,
-    FormInputModel,
-    formOnReset,
-    profileContext,
-    ProfileContextData,
-} from '../../../lib'
-
-import { ChangePassword } from './change-password'
-import { EditName, editNameFormDef } from './edit-name'
+import { FC, useEffect } from 'react'
+import { Button } from '../../../lib'
 import styles from './Account.module.scss'
+import { EnvironmentConfig } from '../../../config'
 
+/**
+ * DEPRECTED
+ * TODO: Remove after some time, when clear no one links to here...
+ */
 const Account: FC<{}> = () => {
 
-    const profileContextData: ProfileContextData = useContext(profileContext)
-    const { profile }: ProfileContextData = profileContextData
-
-    const [editProfileOpen, setEditNameOpen]: [boolean, Dispatch<SetStateAction<boolean>>]
-        = useState<boolean>(false)
-    const [changePasswordOpen, setChangePasswordOpen]: [boolean, Dispatch<SetStateAction<boolean>>]
-        = useState<boolean>(false)
-
-    const toggleEditName = useCallback((): void => {
-        const inputs: Array<FormInputModel> = formGetInputFields(editNameFormDef.groups || [])
-        formOnReset(inputs)
-        setEditNameOpen(!editProfileOpen)
-    }, [editProfileOpen])
-
-    const toggleChangePassword = useCallback((): void => {
-        const inputs: Array<FormInputModel> = formGetInputFields(editNameFormDef.groups || [])
-        formOnReset(inputs)
-        setChangePasswordOpen(!changePasswordOpen)
-    }, [changePasswordOpen])
-
-    // if we don't have a profile, don't show the page
-    if (!profile) {
-        return <></>
-    }
+    // setup auto redirect in 5sec.
+    useEffect(() => {
+        setTimeout(() => {
+            window.location.href = EnvironmentConfig.TOPCODER_URLS.ACCOUNT_SETTINGS
+        }, 5000)
+    }, [])
 
     return (
         <div className={styles.cards}>
 
-            <Card title='Account'>
-                <p>
-                    <strong>Email:</strong>
-                    {' '}
-                    {profile.email}
-                </p>
-                <p>
-                    <strong>Username:</strong>
-                    {' '}
-                    {profile.handle}
-                </p>
-            </Card>
-
-            <Card
-                title='Name'
-                onClick={toggleEditName}
-            >
-                <p>
-                    {profile.firstName}
-                    {' '}
-                    {profile.lastName}
-                </p>
-                <Button
-                    label='edit name'
-                    onClick={toggleEditName}
-                    tabIndex={1}
-                    buttonStyle='secondary'
-                />
-            </Card>
-
-            <Modal
-                open={editProfileOpen}
-                onClose={toggleEditName}
-                classNames={{ modal: 'account-settings-modal' }}
-            >
-                <EditName onClose={toggleEditName} />
-            </Modal>
-
-            <Card
-                onClick={toggleChangePassword}
-                title='Password'
-            >
-                <p>
-                    *******************
-                </p>
-                <Button
-                    label='change password'
-                    onClick={toggleChangePassword}
-                    tabIndex={2}
-                    buttonStyle='secondary'
-                />
-            </Card>
-
-            <Modal
-                open={changePasswordOpen}
-                onClose={toggleChangePassword}
-                classNames={{ modal: 'account-settings-modal' }}
-            >
-                <ChangePassword onClose={toggleChangePassword} />
-            </Modal>
-
+            <h3>This page has moved.</h3>
+            <Button label='Navigate to Account Settings' url={`${EnvironmentConfig.TOPCODER_URLS.ACCOUNT_SETTINGS}`} />
+            <p>We will automatically redirect you in 5 seconds...</p>
         </div>
     )
 }