merge(develop): implemented jwt authorization on server and client

.eslintrc.js

@@ -21,7 +21,7 @@ module.exports = configure({
   extend: {
     root: true,
     ignorePatterns: ["**/*"],
-    plugins: ["@nx"],
+    plugins: ["@nx", "prefer-arrow"],
     // My custom config
     extends: ["gearonix"],
     rules: {
@@ -35,7 +35,8 @@ module.exports = configure({
       "react-hooks/exhaustive-deps": "warn",
       "react/no-array-index-key": "warn",
       "@typescript-eslint/no-explicit-any": "warn",
-      "dot-notation": "off"
+      "dot-notation": "off",
+      "prefer-arrow/prefer-arrow-functions": "error"
     }
   }
 })

.nxignore

@@ -0,0 +1,2 @@
+# Added to avoid causing additional problems when serving nestjs applications.
+_schema.gql

_templates/fsd-module/README.md

@@ -6,3 +6,7 @@ This generator creates a module using the
 --- 
 
 - new (General case)
+
+### Run
+
+`hygen fsd-module [method]`

apps/client/src/app/app.tsx

@@ -6,7 +6,7 @@ import { StoreProvider } from './providers/store'
 
 import 'normalize.css'
 
-function App() {
+const App = () => {
   return (
     <StoreProvider>
       <ThemeProvider>

apps/client/src/app/entry.tsx

@@ -4,11 +4,11 @@
 import App from './app'
 
 const updateSW = registerSW({
-  onNeedRefresh() {
+  onNeedRefresh: () => {
     if (confirm('New content available. Reload?')) {
       updateSW(true)
     }
   }
 })
 
 render(<App />, document.querySelector('#root')!)

apps/client/src/app/index.ts

@@ -1 +1,2 @@
 export { default as App } from './app'
+export { RootStore, StoreContext } from './providers/store'

apps/client/src/app/providers/router/config/router.tsx

@@ -1,13 +1,12 @@
-import { Suspense } from 'react'
 import { createBrowserRouter } from 'react-router-dom'
 
 import { About } from '@/pages/about'
+import { EditPage } from '@/pages/edit'
 import { Main } from '@/pages/main'
 import { NotFound } from '@/pages/not-found'
-import { SignInModal } from '@/widgets/sign-in-modal'
+import { ProfilePage } from '@/pages/profile'
 
 import { RoutePaths } from '$/client-shared'
-import { Editor } from '$/editor'
 
 const router = createBrowserRouter([
   {
@@ -16,16 +15,16 @@ const router = createBrowserRouter([
   },
   {
     path: RoutePaths.EDITOR,
-    element: (
-      <Suspense fallback={null}>
-        <Editor SignIn={SignInModal} />
-      </Suspense>
-    )
+    element: <EditPage />
   },
   {
     path: RoutePaths.ABOUT,
     element: <About />
   },
+  {
+    path: `${RoutePaths.PROFILE}/:username`,
+    element: <ProfilePage />
+  },
   {
     path: '*',
     element: <NotFound />

apps/client/src/app/providers/store/config/store.ts

@@ -1,13 +1,17 @@
 import { makeAutoObservable } from 'mobx'
 
+import { AuthStore } from '@/widgets/sign-in-modal'
+
 import { EditorStore } from '$/editor'
 
 class RootStore {
   editor: EditorStore
+  auth: AuthStore
 
   constructor() {
     makeAutoObservable(this)
     this.editor = new EditorStore()
+    this.auth = new AuthStore()
   }
 }
 

apps/client/src/app/providers/store/index.ts

@@ -1 +1,2 @@
-export { default as StoreProvider } from './ui/store-provider'
+export { default as RootStore } from './config/store'
+export { StoreContext, default as StoreProvider } from './ui/store-provider'

apps/client/src/app/styles/app.styles.ts

@@ -18,6 +18,7 @@ export const GlobalStyles = createGlobalStyle`
     margin: 0;
   }
 
+
   ${customScrollbar('body')}
 
   .ant-popconfirm {

apps/client/src/entities/sign-in-modal-template/index.ts

@@ -0,0 +1 @@
+export { SignInModalTemplate } from './ui/sign-in-modal-template'

apps/client/src/entities/sign-in-modal-template/lib/helpers.ts

@@ -0,0 +1 @@
+export const getFormItemRules = () => [{ required: true, min: 6, max: 14 }]

apps/client/src/entities/sign-in-modal-template/ui/sign-in-modal-template.styles.ts

@@ -0,0 +1,25 @@
+import { Form } from 'antd'
+import styled from 'styled-components'
+
+import { wh } from '$/styles'
+
+export const SignInModalStyles = styled(Form)`
+  width: 84%;
+  margin: 0 auto;
+`
+
+export const SubmitButton = styled.button`
+  height: 40px;
+  width: 100%;
+  cursor: pointer;
+  font-size: ${({ theme }) => theme.fz7};
+  margin: 0 auto;
+  margin-top: 80px;
+  display: block;
+`
+
+export const LogoWrapper = styled.img`
+  ${wh('68px', '92px')}
+  margin: 10px auto;
+  display: block;
+`

apps/client/src/entities/sign-in-modal-template/ui/sign-in-modal-template.tsx

@@ -0,0 +1,50 @@
+import { Form, Input } from 'antd'
+
+import { getFormItemRules } from '../lib/helpers'
+
+import {
+  LogoWrapper,
+  SignInModalStyles,
+  SubmitButton
+} from './sign-in-modal-template.styles'
+
+import { Logo } from '$/assets'
+import { ColoredButton, ModalTitle } from '$/client-shared'
+
+interface SignInModalTemplateProps<T> {
+  onSubmit: (data: T) => void
+}
+
+export const SignInModalTemplate = <T,>({
+  onSubmit
+}: SignInModalTemplateProps<T>) => {
+  return (
+    <SignInModalStyles
+      name="sign-in-form"
+      autoComplete="off"
+      onFinish={onSubmit}>
+      <LogoWrapper src={Logo} />
+      <ModalTitle>CodeGear</ModalTitle>
+
+      <Form.Item name="username" rules={getFormItemRules()}>
+        <Input placeholder="Username" size="large" />
+      </Form.Item>
+
+      <Form.Item name="password" rules={getFormItemRules()}>
+        <Input.Password
+          placeholder="Password"
+          size="large"
+          style={{ marginTop: '10px' }}
+        />
+      </Form.Item>
+
+      <SubmitButton
+        override="#38a886"
+        type="primary"
+        htmlType="submit"
+        as={ColoredButton}>
+        Sign In
+      </SubmitButton>
+    </SignInModalStyles>
+  )
+}

apps/client/src/pages/about/ui/about.tsx

@@ -1,5 +1,7 @@
+import { Page } from '@/shared/lib'
+
 const About = () => {
-  return <div>about page</div>
+  return <Page>about page</Page>
 }
 
 export default About

apps/client/src/pages/edit/index.ts

@@ -0,0 +1 @@
+export { default as EditPage } from './ui/edit-page'

apps/client/src/pages/edit/ui/edit-page.tsx

@@ -0,0 +1,18 @@
+import { Suspense } from 'react'
+
+import { Page } from '@/shared/lib'
+import { SignInModal } from '@/widgets/sign-in-modal'
+
+import { Editor } from '$/editor'
+
+const EditPage = () => {
+  return (
+    <Page>
+      <Suspense fallback={null}>
+        <Editor SignIn={SignInModal} />
+      </Suspense>
+    </Page>
+  )
+}
+
+export default EditPage

apps/client/src/pages/main/ui/main.tsx

@@ -1,6 +1,8 @@
 import { Link } from 'react-router-dom'
 
-import { Page, RoutePaths } from '$/client-shared'
+import { Page } from '@/shared/lib'
+
+import { RoutePaths } from '$/client-shared'
 
 const Main = () => {
   return (

apps/client/src/pages/not-found/ui/not-found.tsx

@@ -1,5 +1,7 @@
+import { Page } from '@/shared/lib'
+
 const NotFound = () => {
-  return <div>not found</div>
+  return <Page>not found</Page>
 }
 
 export default NotFound

apps/client/src/pages/profile/index.ts

@@ -0,0 +1 @@
+export { default as ProfilePage } from './ui/profile-page'

apps/client/src/pages/profile/ui/profile-page.tsx

@@ -0,0 +1,7 @@
+import { Page } from '@/shared/lib'
+
+const ProfilePage = () => {
+  return <Page>profile</Page>
+}
+
+export default ProfilePage

apps/client/src/shared/hooks/index.ts

@@ -0,0 +1 @@
+export { useStore } from './useStore'

apps/client/src/shared/hooks/useStore.ts

@@ -0,0 +1,7 @@
+import { useContext } from 'react'
+
+import { RootStore, StoreContext } from '@/app'
+
+export const useStore = <T extends keyof RootStore>(name: T) => {
+  return useContext(StoreContext)[name]
+}

apps/client/src/shared/lib/components/page/auth-guard.tsx

@@ -0,0 +1,42 @@
+import { useEffect } from 'react'
+import { observer } from 'mobx-react-lite'
+import { useLocation, useNavigate } from 'react-router-dom'
+
+import { useStore } from '@/shared/hooks'
+
+import {
+  PrivatePaths,
+  RoutePaths,
+  useAsyncEffect,
+  useBooleanState,
+  WithChildren
+} from '$/client-shared'
+
+const AuthGuard = observer(({ children }: WithChildren) => {
+  const { isAuthorized, services } = useStore('auth')
+  const location = useLocation()
+  const navigate = useNavigate()
+  const loader = useBooleanState()
+
+  useAsyncEffect(async () => {
+    await services.getProfile()
+    loader.on()
+  }, [])
+
+  useEffect(() => {
+    if (!loader.val) {
+      return
+    }
+
+    const currentPath = location.pathname.split('/')[1]
+    const isPrivatePath = PrivatePaths.includes(`/${currentPath}`)
+
+    if (isPrivatePath && !isAuthorized) {
+      navigate(RoutePaths.EDITOR)
+    }
+  }, [location, loader.val])
+
+  return children
+})
+
+export default AuthGuard

apps/client/src/shared/lib/components/page/index.ts

@@ -0,0 +1 @@
+export { default as Page } from './page'

apps/client/src/shared/lib/components/page/page.tsx

@@ -0,0 +1,13 @@
+import AuthGuard from '@/shared/lib/components/page/auth-guard'
+
+import { ErrorBoundary, WithChildren } from '$/client-shared'
+
+const Page = ({ children }: WithChildren) => {
+  return (
+    <ErrorBoundary>
+      <AuthGuard>{children}</AuthGuard>
+    </ErrorBoundary>
+  )
+}
+
+export default Page

apps/client/src/shared/lib/index.ts

@@ -0,0 +1 @@
+export * from './components/page'

apps/client/src/widgets/sign-in-modal/graphql/get-profile.query.ts

@@ -0,0 +1,15 @@
+import { gql } from '@apollo/react-hooks'
+
+import { ApolloOperation } from '$/client-shared'
+
+export const getProfileQuery: ApolloOperation = {
+  gql: gql`
+    query {
+      getProfile {
+        username
+        avatarUrl
+      }
+    }
+  `,
+  method: 'getProfile'
+}

apps/client/src/widgets/sign-in-modal/graphql/sign-in.mutation.ts

@@ -0,0 +1,14 @@
+import { gql } from '@apollo/react-hooks'
+
+import { ApolloOperation } from '$/client-shared'
+
+export const SignInMutation: ApolloOperation = {
+  gql: gql`
+    mutation SignIn($payload: SignIn!) {
+      signIn(_graphql: $payload) {
+        accessToken
+      }
+    }
+  `,
+  method: 'signIn'
+}

apps/client/src/widgets/sign-in-modal/index.ts

@@ -1 +1,2 @@
-export { SignInModal } from './ui/sign-in-modal'
+export { AuthStore } from './store/auth.store'
+export { default as SignInModal } from './ui/sign-in-modal'

apps/client/src/widgets/sign-in-modal/lib/exceptions.ts

@@ -0,0 +1 @@
+export const WrongPassword = 'You entered the wrong password.'