feat: 🔥 [EXL-76] account settings page ready

README.md

@@ -130,7 +130,7 @@ Then, you can browse to `http://localhost:3000/api` (replace the port if you use
 ## Cli backend OpenAPI
 
 When you want look at the cli backend OpenAPI (Swagger), you need to run the application in development mode.
-Then, you can browse to `http://localhost:5000/api` (replace the port if you use other port)
+Then, you can browse to `http://localhost:4000/api` (replace the port if you use other port)
 
 ## Improvements
 

apps/backend/envs/.env.development

@@ -5,8 +5,8 @@ REFRESH_TOKEN_JWT_KEY="REFRESH"
 GOOGLE_OAUTH_CLIENT_ID="DUMMY"
 GOOGLE_OAUTH_CLIENT_SECRET="DUMMY"
 GOOGLE_OAUTH_REDIRECT_URI="http://localhost:3000/user/auth/google-redirect"
-GITHUB_OAUTH_CLIENT_ID="DUMMY"
-GITHUB_OAUTH_CLIENT_SECRET="DUMMY"
+GITHUB_OAUTH_CLIENT_ID="d711464776c7e65f53f4"
+GITHUB_OAUTH_CLIENT_SECRET="b8f173a3e0dc6941b37fd7d930afd69b4dfa7462"
 GITHUB_OAUTH_REDIRECT_URI="http://localhost:3000/user/auth/github-redirect"
 MIXPANEL_TOKEN="XOMBILLAH"
 FRONTEND_URL="http://localhost:8080"

apps/backend/src/modules/user/modules/auth/auto-auth.controller.ts

@@ -73,6 +73,7 @@ export class AutoAuthController {
 		return {
 			accessToken,
 			...loggedUser,
+			createdAt: loggedUser.createdAt.getTime(),
 		};
 	}
 }

apps/backend/src/modules/user/modules/auth/classes/responses.ts

@@ -1,6 +1,6 @@
 import { ApiResponseProperty } from '@nestjs/swagger';
 
-import type { IAutoAuthLoggedUser } from '../interfaces/user';
+import type { IAutoAuthLoggedUserResponse } from '../interfaces/user';
 
 export class RefreshTokenResponse {
 	@ApiResponseProperty({
@@ -11,7 +11,7 @@ export class RefreshTokenResponse {
 	public accessToken!: string;
 }
 
-export class AutoLoginResponse implements IAutoAuthLoggedUser {
+export class AutoLoginResponse implements IAutoAuthLoggedUserResponse {
 	@ApiResponseProperty({
 		type: String,
 		example:
@@ -24,4 +24,7 @@ export class AutoLoginResponse implements IAutoAuthLoggedUser {
 
 	@ApiResponseProperty({ type: String, example: 'Yazif' })
 	public name!: string;
+
+	@ApiResponseProperty({ type: Number, example: 43343234223 })
+	public createdAt!: number;
 }

apps/backend/src/modules/user/modules/auth/interfaces/user.ts

@@ -1,5 +1,9 @@
 import type { User } from '@prisma/client';
 
-export interface IAutoAuthLoggedUser extends Pick<User, 'id' | 'name'> {}
+export interface IAutoAuthLoggedUser extends Pick<User, 'id' | 'name' | 'createdAt'> {}
+
+export interface IAutoAuthLoggedUserResponse extends Pick<User, 'id' | 'name'> {
+	readonly createdAt: number;
+}
 
 export interface IExternalLoggedUser extends Pick<User, 'id' | 'authType'> {}

apps/backend/src/modules/user/modules/auth/queries/handlers/auto-auth.handler.ts

@@ -12,6 +12,7 @@ export class AutoLoginHandler implements IQueryHandler<AutoAuthContract> {
 		const userData = await this.dbUserService.findByEmail(contract.email, {
 			id: true,
 			name: true,
+			createdAt: true,
 		});
 
 		return userData;

apps/cli-backend/envs/.env.development

@@ -1,5 +1,5 @@
 NODE_ENV="development"
-PORT="5000"
+PORT="4000"
 FRONTEND_URL="http://localhost:8080"
 CLI_TOKEN_JWT_KEY="JWT"
 REFRESH_TOKEN_JWT_KEY="REFRESH"

apps/frontend/.env.development

@@ -3,5 +3,5 @@ HTTPS=false
 FAST_REFRESH=true
 DISABLE_ESLINT_PLUGIN=true
 REACT_APP_BACKEND_URL="http://localhost:3000"
-REACT_APP_CLI_BACKEND_URL="http://localhost:5000"
+REACT_APP_CLI_BACKEND_URL="http://localhost:4000"
 REACT_APP_NODE_ENV="development"

apps/frontend/src/App.tsx

@@ -11,16 +11,16 @@ import { authActions } from './store/reducers/auth';
 
 import AppView from './App.view';
 
-interface PropsFromState {
+interface IPropsFromState {
 	readonly isAuthenticated: boolean | null;
 }
 
-interface PropsFromDispatch {
+interface IPropsFromDispatch {
 	readonly auth: (loginPayload: IAuthPayload) => PayloadAction<IAuthPayload>;
 	readonly setUnauthenticated: () => PayloadAction;
 }
 
-interface IProps extends PropsFromState, PropsFromDispatch {}
+interface IProps extends IPropsFromState, IPropsFromDispatch {}
 
 const App: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) => {
 	useEffect(() => {
@@ -72,6 +72,7 @@ const App: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) => {
 				props.auth({
 					id: response.data.id,
 					name: response.data.name,
+					createdAt: response.data.createdAt,
 				});
 			})
 			.catch(() => {

apps/frontend/src/App.view.tsx

@@ -1,13 +1,15 @@
 import React, { Suspense } from 'react';
 import { Route, BrowserRouter, Routes, Navigate } from 'react-router-dom';
 
+import EDNotification from '@/ui/EDNotification';
+
 interface IProps {
 	readonly isAuthenticated: boolean | null;
 }
 
 const Auth = React.lazy(() => import('./pages/Auth'));
 const ExternalAuthRedirect = React.lazy(() => import('./pages/ExternalAuthRedirect'));
-const UserSettings = React.lazy(() => import('./pages/UserSettings'));
+const AccountSettings = React.lazy(() => import('./pages/AccountSettings'));
 const CliAuth = React.lazy(() => import('./pages/CliAuth'));
 const CliAuthenticated = React.lazy(() => import('./pages/CliAuthenticated'));
 const NotFound = React.lazy(() => import('./pages/NotFound'));
@@ -17,6 +19,9 @@ const AppView: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) => (
 		<Suspense fallback={null}>
 			<div id="backdrop-root" />
 			<div id="overlay-root" />
+
+			<EDNotification />
+
 			<Routes>
 				{props.isAuthenticated === false && (
 					<>
@@ -25,7 +30,7 @@ const AppView: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) => (
 						<Route path="/external-auth-redirect" element={<ExternalAuthRedirect />} />
 					</>
 				)}
-				{props.isAuthenticated && <Route path="/user-settings" element={<UserSettings />} />}
+				{props.isAuthenticated && <Route path="/account-settings/*" element={<AccountSettings />} />}
 				<Route path="/cli-auth" element={<CliAuth />} />
 				<Route path="/cli-authenticated" element={<CliAuthenticated />} />
 				<Route path="/not-found" element={<NotFound />} />

apps/frontend/src/assets/icons.ts

@@ -27,6 +27,48 @@ const icons = {
 			<path d="M1 20.5L11.1237 11.7568C11.5855 11.358 11.5855 10.642 11.1237 10.2432L0.999999 1.5"/>
 		`,
 	],
+	groupCenterRoute: [
+		'22 24',
+		`
+			<path d="m18.213 13.983-7.18 3.73L3.9 13.928l-2.645 1.474c-.445.246-.765.484-.961.716A1.163 1.163 0 0 0 0 16.91c0 .296.098.56.294.791.196.224.516.46.96.705l8.333 4.639c.279.151.527.263.746.336.226.08.448.119.667.119.219 0 .44-.04.667-.12a4.14 4.14 0 0 0 .746-.335l8.332-4.64c.445-.245.765-.48.961-.704A1.19 1.19 0 0 0 22 16.91c0-.303-.098-.567-.294-.791-.196-.232-.516-.47-.96-.716l-2.533-1.42Zm-2.035-3.717 3.278 1.777c.053.03.08.065.08.109 0 .036-.027.068-.08.097l-7.992 4.38c-.174.086-.328.13-.464.13-.128 0-.279-.044-.452-.13l-7.993-4.38c-.053-.029-.08-.061-.08-.097 0-.044.027-.08.08-.109l3.516-1.918-1.865-1.117-2.951 1.637c-.445.246-.765.484-.961.716a1.163 1.163 0 0 0-.294.79c0 .304.098.568.294.792.196.224.516.462.96.715l8.333 4.64c.279.144.527.256.746.335.226.073.448.109.667.109.219 0 .44-.036.667-.109.226-.08.475-.191.746-.336l8.332-4.639c.445-.253.765-.491.961-.715.196-.224.294-.488.294-.791 0-.304-.098-.567-.294-.791-.196-.232-.516-.47-.96-.716L18.02 9.117l-1.843 1.149ZM11 13.68c.219 0 .44-.036.667-.108.226-.073.475-.185.746-.336l8.332-4.64c.445-.252.765-.49.961-.715.196-.224.294-.487.294-.791 0-.31-.098-.578-.294-.802-.196-.224-.516-.463-.96-.715L12.412.933a3.591 3.591 0 0 0-.746-.325A2.183 2.183 0 0 0 11 .5c-.219 0-.44.036-.667.108a3.968 3.968 0 0 0-.746.326L1.255 5.573c-.445.252-.765.49-.961.715A1.177 1.177 0 0 0 0 7.09c0 .304.098.567.294.791.196.224.516.463.96.716l8.333 4.639c.279.151.527.263.746.336.226.072.448.108.667.108Zm0-1.983c-.128 0-.279-.047-.452-.141l-7.993-4.38c-.053-.021-.08-.05-.08-.086 0-.043.027-.076.08-.098l7.993-4.378c.173-.094.324-.141.452-.141.136 0 .29.047.463.14l7.993 4.38c.053.021.08.054.08.097 0 .036-.027.065-.08.087l-7.992 4.379a.997.997 0 0 1-.464.14Z" />
+		`,
+	],
+	copy: [
+		'17 20',
+		`
+			<path d="M3.852 4.424h1.41V2.59c0-.376.098-.664.291-.863.2-.205.498-.308.897-.308h3.362v3.877c0 .47.119.824.357 1.062.243.233.597.349 1.062.349h3.561v6.6c0 .381-.1.674-.299.879-.194.2-.49.299-.888.299h-1.51v1.411h1.61c.83 0 1.452-.21 1.867-.63.42-.427.631-1.058.631-1.893V7.08c0-.498-.058-.922-.174-1.27a2.58 2.58 0 0 0-.631-.988L11.463.813a2.548 2.548 0 0 0-.962-.622A3.35 3.35 0 0 0 9.33 0H6.34c-.818 0-1.438.213-1.859.64-.42.425-.63 1.053-.63 1.883v1.901Zm7.18.681V2.042l3.395 3.453h-3.005c-.26 0-.39-.13-.39-.39ZM0 17.349c0 .835.21 1.463.63 1.884.421.426 1.044.64 1.869.64H9.86c.825 0 1.447-.214 1.868-.64.42-.42.63-1.049.63-1.884v-6.076c0-.52-.049-.928-.149-1.22-.094-.3-.301-.612-.622-.939L7.305 4.748c-.31-.315-.617-.523-.922-.623-.299-.1-.678-.149-1.137-.149H2.5c-.825 0-1.448.213-1.868.64C.21 5.04 0 5.668 0 6.5v10.849Zm1.42-.067V6.558c0-.371.096-.656.29-.855.2-.205.495-.307.888-.307H5.08v4.407c0 .537.133.935.399 1.195.265.26.66.39 1.187.39h4.283v5.894c0 .382-.1.673-.3.872-.198.205-.494.307-.887.307H2.59c-.393 0-.686-.102-.88-.307-.194-.2-.29-.49-.29-.872Zm5.395-7.163c-.16 0-.277-.036-.349-.108-.072-.072-.108-.188-.108-.349V5.686l4.358 4.433H6.815Z" />
+		`,
+	],
+	key: [
+		'17 18',
+		`
+			<path d="M.128 16.616c.02.25.107.46.259.63a.758.758 0 0 0 .606.254H4.68a.795.795 0 0 0 .62-.254.809.809 0 0 0 .24-.623l.005-1.812h2.653a.78.78 0 0 0 .606-.255.85.85 0 0 0 .252-.623l.013-2.466c1.212.423 2.361.534 3.448.33a5.29 5.29 0 0 0 2.822-1.507c.556-.559.97-1.188 1.244-1.888.282-.699.421-1.42.417-2.161a5.642 5.642 0 0 0-.417-2.162 5.609 5.609 0 0 0-1.25-1.882A5.653 5.653 0 0 0 13.45.926 5.739 5.739 0 0 0 11.311.5a5.73 5.73 0 0 0-2.147.42c-.69.28-1.316.701-1.876 1.265a5.714 5.714 0 0 0-1.225 1.818 5.828 5.828 0 0 0-.46 2.117 5.701 5.701 0 0 0 .384 2.155L.361 13.94c-.1.101-.19.224-.265.368a.97.97 0 0 0-.095.477l.127 1.831Zm1.44-.56-.007-1.315 6.157-6.199a4.276 4.276 0 0 1-.65-1.812 4.422 4.422 0 0 1 .208-1.888c.21-.61.553-1.155 1.029-1.634a4.072 4.072 0 0 1 1.913-1.112 4.287 4.287 0 0 1 2.172 0 4.136 4.136 0 0 1 1.926 1.125 4.16 4.16 0 0 1 1.112 1.933 4.374 4.374 0 0 1 0 2.187 4.113 4.113 0 0 1-1.105 1.926 4.077 4.077 0 0 1-1.63 1.017 4.43 4.43 0 0 1-1.92.19 4.491 4.491 0 0 1-1.906-.711L7.61 11.028l-.006 2.333-2.463-.013-1.035 1.043.006 1.647-2.545.019Zm9.711-9.777c.295.297.65.447 1.067.451.421 0 .781-.15 1.08-.451.295-.297.44-.655.436-1.074 0-.424-.148-.785-.442-1.081a1.482 1.482 0 0 0-1.074-.458c-.412 0-.768.15-1.067.451-.299.301-.448.664-.448 1.088.004.42.153.777.448 1.074Z"/>
+		`,
+	],
+	notificationInfo: [
+		'18 18',
+		`
+			<path d="M3.75 2.5h10V15h-10V2.5z" fill="#F6F8FA"/><path d="M8.75 0a8.75 8.75 0 1 0 0 17.5 8.75 8.75 0 0 0 0-17.5zm0 3.75a.937.937 0 1 1 0 1.875.937.937 0 0 1 0-1.875zm2.5 10.078h-5v-1.406h1.797V8.828H6.875V7.422h2.578v5h1.797v1.406z" fill="#33383E"/>
+		`,
+	],
+	notificationCheckmark: [
+		'18 18',
+		`
+			<path d="M3.75 3.75h10v10h-10v-10z" fill="#F6F8FA"/><path d="M8.75 0a8.75 8.75 0 1 0 0 17.5 8.75 8.75 0 0 0 0-17.5zM7.5 12.244 4.375 9.12l.994-.994 2.131 2.13 4.631-4.63.998.991L7.5 12.244z" fill="#2F7D2D"/>
+		`,
+	],
+	notificationWarning: [
+		'18 18',
+		`
+			<path d="M3.75 2.5h10V15h-10V2.5z" fill="#000"/><path d="M8.75 0C3.937 0 0 3.938 0 8.75c0 4.813 3.938 8.75 8.75 8.75 4.813 0 8.75-3.938 8.75-8.75C17.5 3.937 13.562 0 8.75 0zm-.688 3.75h1.376v6.875H8.062V3.75zm.688 10.625a.961.961 0 0 1-.938-.938c0-.5.438-.937.938-.937.5 0 .938.438.938.938 0 .5-.438.937-.938.937z" fill="#F1C21B"/>
+		`,
+	],
+	notificationError: [
+		'18 18',
+		`
+			<path d="M3.75 3.75h10v10h-10v-10z" fill="#fff"/><path d="M8.75 0A8.696 8.696 0 0 0 0 8.75a8.696 8.696 0 0 0 8.75 8.75 8.695 8.695 0 0 0 8.75-8.75A8.695 8.695 0 0 0 8.75 0zm3.403 13.125L4.375 5.347l.972-.972 7.778 7.778-.972.972z" fill="#B41E1E"/>
+		`,
+	],
 };
 
 export default icons;

apps/frontend/src/components/containers/AccountSettings/Account/Account.module.scss

@@ -0,0 +1,56 @@
+@use 'sass:map';
+
+@import '../../../../styles/variables.scss';
+
+.container {
+	display: flex;
+	flex-direction: column;
+	width: 708px;
+}
+
+.actionSection {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+
+	&:not(:last-child) {
+		margin-bottom: map.get($sizes, spacing-xxl);
+	}
+
+	&__header {
+		font-size: 2.4rem;
+		font-weight: normal;
+		color: map.get($colors, greys-onyx);
+
+		&--delete {
+			color: map.get($colors, reds-persian-plum);
+		}
+	}
+
+	&__divider {
+		width: 100%;
+		height: 2px;
+		margin-block: map.get($sizes, spacing-l);
+		background-color: map.get($colors, greys-platinum);
+	}
+
+	&__subHeader {
+		margin-bottom: map.get($sizes, spacing-m);
+		font-size: 1.5rem;
+		color: map.get($colors, greys-independence-grey);
+	}
+
+	&__button {
+		padding: map.get($sizes, spacing-m) map.get($sizes, spacing-l);
+		font-size: 1.5rem;
+		color: map.get($colors, greys-onyx);
+		background-color: map.get($colors, whites-ghost-white);
+		border: 2px solid map.get($colors, greys-platinum);
+		border-radius: 6px;
+
+		&--delete {
+			font-weight: 500;
+			color: map.get($colors, reds-persian-plum);
+		}
+	}
+}

apps/frontend/src/components/containers/AccountSettings/Account/Account.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import { connect } from 'react-redux';
+import type { PayloadAction } from '@reduxjs/toolkit';
+import { useNavigate } from 'react-router-dom';
+
+import { authActions } from '@/store/reducers/auth';
+
+import AccountView from './Account.view';
+
+interface IPropsFromDispatch {
+	readonly setUnauthenticated: () => PayloadAction;
+}
+
+interface IProps extends IPropsFromDispatch {}
+
+const Account: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) => {
+	const navigate = useNavigate();
+
+	const [isDeleteAccountModalOnViewState, setIsDeleteAccountModalOnViewState] = useState<boolean>(false);
+
+	const onSignOutClick = () => {
+		props.setUnauthenticated();
+
+		navigate('/auth');
+	};
+
+	const onOpenDeleteAccountModal = () => setIsDeleteAccountModalOnViewState(() => true);
+	const onCloseDeleteAccountModal = () => setIsDeleteAccountModalOnViewState(() => false);
+
+	return (
+		<AccountView
+			isDeleteAccountModalOnView={isDeleteAccountModalOnViewState}
+			onSignOutClick={onSignOutClick}
+			onOpenDeleteAccountModal={onOpenDeleteAccountModal}
+			onCloseDeleteAccountModal={onCloseDeleteAccountModal}
+		/>
+	);
+};
+
+Account.displayName = 'Account';
+Account.defaultProps = {};
+
+export default connect(null, {
+	setUnauthenticated: authActions.setUnauthenticated,
+})(React.memo(Account));

apps/frontend/src/components/containers/AccountSettings/Account/Account.view.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { concatClasses } from '@/utils/component';
+
+import DeleteAccountModal from './DeleteAccountModal';
+
+import classes from './Account.module.scss';
+
+interface IProps {
+	readonly isDeleteAccountModalOnView: boolean;
+	readonly onSignOutClick: VoidFunction;
+	readonly onOpenDeleteAccountModal: VoidFunction;
+	readonly onCloseDeleteAccountModal: VoidFunction;
+}
+
+const AccountView: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) => {
+	const { t } = useTranslation();
+
+	return (
+		<main className={classes['container']}>
+			<section className={classes['actionSection']}>
+				<h3 className={classes['actionSection__header']}>
+					{t('accountSettings.account.signOutHeader')}
+				</h3>
+				<hr className={classes['actionSection__divider']} />
+				<span className={classes['actionSection__subHeader']}>
+					{t('accountSettings.account.signOutSubHeader')}
+				</span>
+				<button
+					className={classes['actionSection__button']}
+					type="button"
+					onClick={props.onSignOutClick}
+				>
+					{t('accountSettings.account.signOutButton')}
+				</button>
+			</section>
+
+			<section className={classes['actionSection']}>
+				<h3
+					className={concatClasses(
+						classes,
+						'actionSection__header',
+						'actionSection__header--delete',
+					)}
+				>
+					{t('accountSettings.account.deleteAccountHeader')}
+				</h3>
+				<hr className={classes['actionSection__divider']} />
+				<span className={classes['actionSection__subHeader']}>
+					{t('accountSettings.account.deleteAccountSubHeader')}
+				</span>
+				<button
+					className={concatClasses(
+						classes,
+						'actionSection__button',
+						'actionSection__button--delete',
+					)}
+					type="button"
+					onClick={props.onOpenDeleteAccountModal}
+				>
+					{t('accountSettings.account.deleteAccountButton')}
+				</button>
+				{props.isDeleteAccountModalOnView && (
+					<DeleteAccountModal onClose={props.onCloseDeleteAccountModal} />
+				)}
+			</section>
+		</main>
+	);
+};
+
+AccountView.displayName = 'AccountView';
+AccountView.defaultProps = {};
+
+export default React.memo(AccountView);