Merge pull request #4 from junction-asia-2023/feat/login

feat: Add default login

.eslintrc.cjs

@@ -15,6 +15,7 @@ module.exports = {
       { allowConstantExport: true },
     ],
     '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-unused-vars': 'off',
     'import/order': [
       'error',
       {

package.json

@@ -7,6 +7,9 @@
   "scripts": {
     "dev": "yarn && vite",
     "build": "tsc && vite build",
+    "fix:eslint": "eslint src --fix --ext ts,tsx --report-unused-disable-directives",
+    "fix:prettier": "prettier --write --list-different \"src/**/*.{ts,tsx}\"",
+    "fix": "npm-run-all -p --print-label \"fix:**\"",
     "lint:eslint": "eslint src --ext ts,tsx --report-unused-disable-directives",
     "lint:prettier": "prettier --list-different \"src/**/*.{ts,tsx}\"",
     "lint": "npm-run-all -p --print-label \"lint:**\"",

src/features/app/Container.tsx

@@ -1,17 +1,17 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { FunctionComponent } from 'react';
 
-import Layout from '../shared/components/Layout';
+import LayoutContainer from '../shared/layout/Container';
 import HomeContainer from '../home/Container';
 
 const queryClient = new QueryClient();
 
 const AppContainer: FunctionComponent = () => {
   return (
     <QueryClientProvider client={queryClient}>
-      <Layout>
+      <LayoutContainer>
         <HomeContainer />
-      </Layout>
+      </LayoutContainer>
     </QueryClientProvider>
   );
 };

src/features/login/Container.tsx

@@ -0,0 +1,36 @@
+import { FunctionComponent } from 'react';
+
+import useLogin from './hooks/useLogin';
+
+const LoginContainer: FunctionComponent = () => {
+  const {
+    email,
+    handleEmailChange,
+    password,
+    handlePasswordChange,
+    error,
+    handleSubmitClick,
+  } = useLogin();
+
+  return (
+    <div>
+      <div>Login</div>
+      <input
+        type="text"
+        value={email}
+        placeholder="Insert your email"
+        onChange={handleEmailChange}
+      />
+      <input
+        type="password"
+        value={password}
+        placeholder="Insert your password"
+        onChange={handlePasswordChange}
+      />
+      {error && <span>Please check your email or password</span>}
+      <button onClick={handleSubmitClick}>submit</button>
+    </div>
+  );
+};
+
+export default LoginContainer;

src/features/login/atom.ts

@@ -0,0 +1,5 @@
+import { atomWithReset } from 'jotai/utils';
+
+import { User } from './type';
+
+export const userAtom = atomWithReset<User>({});

src/features/login/constants.ts

@@ -0,0 +1,8 @@
+import { DummyUser } from './type';
+
+export const DUMMY_USER: DummyUser = {
+  email: '[email protected]',
+  companyNo: 'JS1234',
+  password: 'just',
+  department: 'dev1',
+};

src/features/login/hooks/useLogin.tsx

@@ -0,0 +1,45 @@
+import { ChangeEventHandler, ReactEventHandler, useState } from 'react';
+import { useAtom } from 'jotai';
+
+import { setItem } from '../../shared/utils/storage';
+import { DummyUser } from '../type';
+import { DUMMY_USER } from '../constants';
+import { userAtom } from '../atom';
+
+const useLogin = () => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState(false);
+  const [, setUser] = useAtom(userAtom);
+
+  const handleEmailChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+    setEmail(e.target.value);
+    setError(false);
+  };
+  const handlePasswordChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+    setPassword(e.target.value);
+    setError(false);
+  };
+  const handleSubmitClick: ReactEventHandler<HTMLButtonElement> = () => {
+    if (DUMMY_USER.email !== email || DUMMY_USER.password !== password) {
+      setError(true);
+      return;
+    }
+    const curUser: DummyUser = { ...DUMMY_USER };
+    delete curUser.password;
+    setUser({ ...curUser });
+    setItem('user', curUser);
+    // TODO: Redirect Home;
+  };
+
+  return {
+    email,
+    handleEmailChange,
+    password,
+    handlePasswordChange,
+    error,
+    handleSubmitClick,
+  };
+};
+
+export default useLogin;

src/features/login/type.ts

@@ -0,0 +1,6 @@
+export type User = {
+  email?: string;
+  companyNo?: string;
+  department?: string;
+};
+export type DummyUser = User & { password?: string };

src/features/shared/layout/Container.tsx

@@ -0,0 +1,13 @@
+import { FunctionComponent, PropsWithChildren } from 'react';
+
+import './layout.scss';
+import useLayout from './hooks/useLayout';
+
+const LayoutContainer: FunctionComponent<PropsWithChildren> = ({
+  children,
+}) => {
+  useLayout();
+  return <div className="layout-container">{children}</div>;
+};
+
+export default LayoutContainer;

src/features/shared/layout/hooks/useLayout.tsx

@@ -0,0 +1,18 @@
+import { useAtom } from 'jotai';
+import { useLayoutEffect } from 'react';
+
+import { userAtom } from '../../../login/atom';
+import { getItem } from '../../utils/storage';
+
+const useLayout = () => {
+  const [user] = useAtom(userAtom);
+
+  useLayoutEffect(() => {
+    const user = getItem('user');
+    if (!user) {
+      // TODO: Redirect Login
+    }
+  }, []);
+};
+
+export default useLayout;

src/features/shared/layout/layout.scss

@@ -0,0 +1,4 @@
+.layout-container {
+  min-width: 320px;
+  max-width: 480px;
+}

src/features/shared/style/global.scss

@@ -8,8 +8,3 @@ body {
   place-content: center;
   min-height: 100vh;
 }
-
-.layout-container {
-  min-width: 320px;
-  max-width: 480px;
-}