improve login (#107)

* fix: improve login

* feat(ui): connecting account on login

ui/package.json

@@ -13,9 +13,7 @@
     "swr": "^1.3.0",
     "tailwindcss": "^3.1.8",
     "typescript": "^4.8.2",
-    "web-vitals": "^2.1.4",
-    "@types/react": "^18.0.18",
-    "@types/react-dom": "^18.0.6"
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -49,6 +47,8 @@
     "@types/node": "^16.11.57",
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^4.2.0",
+    "@types/react": "^18.0.18",
+    "@types/react-dom": "^18.0.6",
     "eslint": "^7.9.0",
     "eslint-config-standard-with-typescript": "^21.0.1",
     "eslint-plugin-es": "^4.1.0",

ui/src/data/protocols/http/http-client.ts

@@ -1,14 +1,14 @@
-export interface HttpClient<R = any> {
-  request: (data: HttpRequest) => Promise<HttpResponse<R>>
-}
-
 export type HttpRequest = {
   url: string
   method: HttpMethod
   body?: any
   headers?: any
 }
 
+export interface HttpClient<R = any> {
+  request: (data: HttpRequest) => Promise<HttpResponse<R>>
+}
+
 export type HttpMethod = 'post' | 'get' | 'put' | 'delete'
 
 export enum HttpStatusCode {
@@ -23,5 +23,5 @@ export enum HttpStatusCode {
 
 export type HttpResponse<T = any> = {
   statusCode: HttpStatusCode
-  body?: T
+  body: T
 }

ui/src/data/usecases/remote-authentication.ts

@@ -1,6 +1,6 @@
 import { HttpClient, HttpStatusCode } from '../../data/protocols/http'
 import { Authentication } from '../../domain/usecases'
-import { InvalidCredentialsError, UnexpectedError } from '../../domain/errors'
+import { InvalidCredentialsError, UnexpectedError, UnauthorizedAuthenticationError } from '../../domain/errors'
 
 export class RemoteAuthentication implements Authentication {
   constructor (
@@ -14,11 +14,11 @@ export class RemoteAuthentication implements Authentication {
       method: 'post',
       body: params
     })
-
     switch (httpResponse.statusCode) {
       case HttpStatusCode.ok: return httpResponse.body
       case HttpStatusCode.unauthorized: throw new InvalidCredentialsError()
-      default: throw new UnexpectedError(httpResponse.body?.message)
+      case HttpStatusCode.forbidden: throw new UnauthorizedAuthenticationError()
+      default: throw new UnexpectedError()
     }
   }
 }

ui/src/domain/errors/index.ts

@@ -1,2 +1,3 @@
 export * from './invalid-credentials-error'
 export * from './unexpected-error'
+export * from './unauthorized-authentication-error'

ui/src/domain/errors/unauthorized-authentication-error.ts

@@ -0,0 +1,6 @@
+export class UnauthorizedAuthenticationError extends Error {
+  constructor () {
+    super('Unauthorized authentication')
+    this.name = 'UnauthorizedAuthentication'
+  }
+}

ui/src/domain/errors/unexpected-error.ts

@@ -1,6 +1,6 @@
 export class UnexpectedError extends Error {
-  constructor (message: string | undefined) {
-    super(message !== undefined ? message : 'Something went wrong. Please try again soon.')
+  constructor () {
+    super('Something went wrong. Please try again soon.')
     this.name = 'UnexpectedError'
   }
 }

ui/src/domain/models/account-model.ts

@@ -1,6 +1,4 @@
 export type AccountModel = {
-  accessToken: string
-  name: string
-  code: number
-  message: string
+  first_name: string
+  token: string
 }

ui/src/domain/usecases/authentication.ts

@@ -10,5 +10,5 @@ export namespace Authentication {
     password: string
   }
 
-  export type Model = AccountModel | undefined
+  export type Model = AccountModel
 }

ui/src/main/factories/pages/home-factory.tsx

@@ -0,0 +1,9 @@
+import { currentAccountState } from '../../../presentation/components'
+import React from 'react'
+import { useRecoilValue } from 'recoil'
+
+export const makeHome: React.FC = () => {
+  const { getCurrentAccount } = useRecoilValue(currentAccountState)
+  const name = getCurrentAccount().first_name
+  return <h1>Hello, {name}!</h1>
+}

ui/src/main/factories/pages/index.ts

@@ -1 +1,2 @@
 export * from './login-factory'
+export * from './home-factory'

ui/src/main/proxies/index.ts

@@ -0,0 +1 @@
+export { default as PrivateRoute } from './private-route'

ui/src/main/proxies/private-route.tsx

@@ -0,0 +1,14 @@
+import { RouteProps, Route, Redirect } from 'react-router-dom'
+import { useRecoilValue } from 'recoil'
+import React from 'react'
+
+import { currentAccountState } from '../../presentation/components'
+
+const PrivateRoute: React.FC<RouteProps> = (props: RouteProps) => {
+  const { getCurrentAccount } = useRecoilValue(currentAccountState)
+  return getCurrentAccount()?.token
+    ? <Route {...props} />
+    : <Route {...props} component={() => <Redirect to="/auth/login" />} />
+}
+
+export default PrivateRoute

ui/src/main/routes/router.tsx

@@ -1,16 +1,11 @@
 import React from 'react'
-import { BrowserRouter, Route, Switch, useHistory } from 'react-router-dom'
+import { BrowserRouter, Route, Switch } from 'react-router-dom'
 import { RecoilRoot } from 'recoil'
 
 import { setCurrentAccountAdapter, getCurrentAccountAdapter } from '../../main/adapters'
 import { currentAccountState } from '../../presentation/components'
-import { makeLogin } from '../../main/factories/pages'
-
-const Home: React.FC<{}> = () => {
-  const history = useHistory()
-  history.replace('/auth/login')
-  return <h1>Home</h1>
-}
+import { makeLogin, makeHome } from '../../main/factories/pages'
+import { PrivateRoute } from '../proxies'
 
 const Router: React.FC = () => {
   const state = {
@@ -22,12 +17,8 @@ const Router: React.FC = () => {
       <div className='h-screen'>
         <BrowserRouter>
           <Switch>
-            <Route path="/" exact component={Home} />
             <Route path="/auth/login" exact component={makeLogin} />
-            {/* <Route path="/" element={<Dashboard />} />
-            <Route path="projects" element={<Projects />} />
-            <Route path="users" element={<Users />} />
-            <Route path="users/new" element={<NewUser />} /> */}
+            <PrivateRoute path="/" exact component={makeHome} />
           </Switch>
         </BrowserRouter>
       </div>

ui/src/presentation/components/form-status/form-status.tsx

@@ -9,7 +9,7 @@ const FormStatus: React.FC<Props> = ({ state }: Props) => {
   return (
     <>
       {mainError && (
-        <div data-testid="error-wrap" className="flex items-center justify-center text-black text-sm px-4 py-3" role="alert">
+        <div data-testid="error-wrap" className="flex items-center justify-center text-black text-sm p-3 bg-red-200 mb-3 rounded">
           <svg className="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z"/></svg>
           <span data-testid="main-error">{mainError}</span>
         </div>

ui/src/presentation/components/index.ts

@@ -1,3 +1,4 @@
 export * from './atoms/atoms'
 export { default as InputBase } from './input/input'
 export { default as FormStatusBase } from './form-status/form-status'
+export { default as SubmitButtonBase } from './submit-button'

ui/src/presentation/components/input/input.tsx

@@ -1,26 +1,28 @@
-import React from 'react'
+import React, { useRef } from 'react'
 
 type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
   state: any
   setState: any
 }
 
 const Input: React.FC<Props> = ({ state, setState, ...props }: Props) => {
-  const error = state[`${props.name !== undefined ? props.name : ''}Error`]
+  const inputRef = useRef<HTMLInputElement>(null)
+  const error = state[`${props.name}Error`]
   return (
-    <>
-      <label title={error}>{props.placeholder}</label>
+    <div>
+      <label title={error} className="text-gray-600 py-2">{props.placeholder}</label>
       <input
         {...props}
+        ref={inputRef}
         title={error}
         placeholder={props.placeholder}
         data-testid={props.name}
         readOnly
-        className="mb-3 p-3 form-control block w-full bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out" data-status={error ? 'invalid' : 'valid'}
+        className="mb-3 p-3 form-control block w-full border border-solid rounded transition ease-in-out" data-status={error ? 'invalid' : 'valid'}
         onFocus={e => { e.target.readOnly = false }}
         onChange={e => { setState({ ...state, [e.target.name]: e.target.value }) }}
       />
-    </>
+    </div>
   )
 }
 

ui/src/presentation/components/submit-button/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+type Props = {
+  text: string
+  state: any
+}
+
+const SubmitButton: React.FC<Props> = ({ state, text }: Props) => {
+  return (
+    <button
+      data-testid='submit'
+      disabled={state.isFormInvalid}
+      type='submit'
+      className='w-full p-3 bg-rose-600 text-white font-medium text-sm rounded enabled:hover:shadow-lg focus:outline-none focus:ring-0 disabled:bg-rose-400'
+    >
+      { state.isLoading && (
+        <>
+          <svg aria-hidden="true" role="status" className="inline w-4 h-4 mr-3 text-white animate-spin" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="#E5E7EB"/>
+            <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor"/>
+          </svg>
+          {text}
+        </>
+      )}
+      { !state.isLoading && text }
+    </button>
+  )
+}
+
+export default SubmitButton

ui/src/presentation/pages/Dashboard.tsx

@@ -1,6 +1,6 @@
 import Sidebar from '../components/sidebar'
 
-const Dashboard: React.FC  = () => {
+const Dashboard: React.FC = () => {
   return (
     <div className="flex flex-row dark:bg-black/95 w-screen">
       <div className="w-64">

ui/src/presentation/pages/login/components/index.ts

@@ -1,3 +1,4 @@
 export * from './atoms'
 export { default as Input } from './input'
 export { default as FormStatus } from './form-status'
+export { default as SubmitButton } from './submit-button'

ui/src/presentation/pages/login/components/submit-button.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import { useRecoilValue } from 'recoil'
+import { loginState } from './atoms'
+import { SubmitButtonBase } from '../../../../presentation/components'
+
+type Props = {
+  text: string
+}
+
+const SubmitButton: React.FC<Props> = ({ text }: Props) => {
+  const state = useRecoilValue(loginState)
+  return <SubmitButtonBase text={text} state={state} />
+}
+
+export default SubmitButton

ui/src/presentation/pages/login/login.tsx

@@ -5,7 +5,7 @@ import { useHistory } from 'react-router-dom'
 import { Validation } from '../../protocols'
 import { Authentication } from '../../../domain/usecases'
 import { currentAccountState } from '../../components'
-import { loginState, Input, FormStatus } from './components'
+import { loginState, Input, FormStatus, SubmitButton } from './components'
 
 type Props = {
   validation: Validation
@@ -34,44 +34,30 @@ const Login: React.FC<Props> = ({ validation, authentication }: Props) => {
     try {
       if (state.isLoading || state.isFormInvalid) return
       setState(old => ({ ...old, isLoading: true }))
-      const account = await authentication.auth({
-        email: state.email,
-        password: state.password
-      })
-      if (account !== undefined) setCurrentAccount(account)
+      const account = await authentication.auth({ email: state.email, password: state.password })
+      setCurrentAccount(account)
       history.replace('/')
     } catch (error: any) {
-      setState(old => ({
-        ...old,
-        isLoading: false,
-        mainError: error.message
-      }))
+      setState(old => ({ ...old, isLoading: false, mainError: error.message }))
     }
   }
 
   return (
-    <section className="h-screen flex justify-center items-center">
-      <div className="flex xl:justify-center lg:justify-between items-center flex-wrap">
-        <form data-testid="form" className='w-96 max-w-4xl' onSubmit={handleSubmit}>
-          <Input type="text" name="email" placeholder="Email address"/>
-          <Input type="password" name="password" placeholder="Password"/>
-          <div className="flex justify-between items-center my-2">
-            <div className="form-group form-check">
-              <input type="checkbox" className="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-black checked:border-black focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" id="rememberMe" />
-              <label className="form-check-label inline-block text-gray-800" htmlFor="rememberMe">Remember me</label>
-            </div>
-            <a href="#!" className="text-gray-800">Forgot password?</a>
-          </div>
-          <div className="text-center lg:text-left mb-3">
-            <button type="submit" className="w-full inline-block px-7 py-3 bg-black text-white font-medium text-sm leading-snug uppercase rounded hover:bg-black hover:shadow-lg focus:outline-none focus:ring-0 transition duration-150 ease-in-out">Login</button>
-            <p className="text-sm pt-1">
-              {"Don't have an account?"}
-              <a href="#!" className="text-blue-600 hover:text-blue-700 focus:text-red-700 transition duration-200 ease-in-out ml-1">Register</a>
-            </p>
-          </div>
-          <FormStatus />
-        </form>
-      </div>
+    <section className='h-screen flex justify-center items-center bg-gray-200'>
+      <section>
+        <section className='mb-4'>
+          <h3 className='font-bold text-3xl'>Welcome to PowerSSO</h3>
+          <p className='text-gray-600 pt-2'>Sign in to your account.</p>
+        </section>
+        <section className='flex xl:justify-center lg:justify-between items-center flex-wrap bg-white p-8 rounded py-16'>
+          <form data-testid='form' className='w-96 max-w-4xl' onSubmit={handleSubmit}>
+            <FormStatus />
+            <Input type='text' name='email' placeholder='Email address'/>
+            <Input type='password' name='password' placeholder='Password'/>
+            <SubmitButton text='Login' />
+          </form>
+        </section>
+      </section>
     </section>
   )
 }