From b162630905ee7bfe5f5ffb9991c13f5955777797 Mon Sep 17 00:00:00 2001 From: Isaque Veras <46972789+isaqueveras@users.noreply.github.com> Date: Sun, 28 May 2023 07:52:52 -0300 Subject: [PATCH] Add page create account (#116) * feat: init form register user * feat(ui): create account * fix(ui): build --- ui/package.json | 5 +- ui/src/data/usecases/index.ts | 1 + ui/src/data/usecases/remote-authentication.ts | 18 +-- ui/src/data/usecases/remote-create-account.ts | 18 +++ ui/src/domain/errors/index.ts | 1 + ui/src/domain/errors/oops.ts | 6 + ui/src/domain/models/err.ts | 4 + ui/src/domain/models/index.ts | 1 + ui/src/domain/usecases/authentication.ts | 4 +- ui/src/domain/usecases/create-account.ts | 16 +++ ui/src/domain/usecases/index.ts | 1 + .../pages/create-account-factory.tsx | 14 +++ ui/src/main/factories/pages/index.ts | 1 + ui/src/main/factories/pages/login-factory.tsx | 6 +- ui/src/main/factories/usecases/index.ts | 1 + .../usecases/remote-authentication-factory.ts | 3 +- .../usecases/remote-register-factory.ts | 6 + .../create-account-validation-factory.ts | 10 ++ ui/src/main/factories/validation/index.ts | 1 + ui/src/main/routes/router.tsx | 3 +- .../components/form-status/form-status.tsx | 9 +- .../presentation/components/input/input.tsx | 5 +- .../components/submit-button/index.tsx | 2 +- .../pages/create-account/components/atoms.ts | 20 ++++ .../create-account/components/form-status.tsx | 12 ++ .../pages/create-account/components/index.ts | 4 + .../pages/create-account/components/input.tsx | 26 +++++ .../components/submit-button.tsx | 15 +++ .../pages/create-account/index.tsx | 107 ++++++++++++++++++ ui/src/presentation/pages/index.ts | 6 +- .../pages/login/components/atoms.ts | 2 +- .../pages/login/components/form-status.tsx | 3 +- .../pages/login/components/submit-button.tsx | 3 +- ui/src/presentation/pages/login/login.tsx | 44 +++---- ui/tailwind.config.js | 4 +- 35 files changed, 323 insertions(+), 59 deletions(-) create mode 100644 ui/src/data/usecases/remote-create-account.ts create mode 100644 ui/src/domain/errors/oops.ts create mode 100644 ui/src/domain/models/err.ts create mode 100644 ui/src/domain/usecases/create-account.ts create mode 100644 ui/src/main/factories/pages/create-account-factory.tsx create mode 100644 ui/src/main/factories/usecases/remote-register-factory.ts create mode 100644 ui/src/main/factories/validation/create-account-validation-factory.ts create mode 100644 ui/src/presentation/pages/create-account/components/atoms.ts create mode 100644 ui/src/presentation/pages/create-account/components/form-status.tsx create mode 100644 ui/src/presentation/pages/create-account/components/index.ts create mode 100644 ui/src/presentation/pages/create-account/components/input.tsx create mode 100644 ui/src/presentation/pages/create-account/components/submit-button.tsx create mode 100644 ui/src/presentation/pages/create-account/index.tsx diff --git a/ui/package.json b/ui/package.json index ef2fd16..6a4de2b 100644 --- a/ui/package.json +++ b/ui/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@tailwindcss/forms": "^0.5.3", "axios": "^0.27.2", "postcss": "^8.4.16", "react": "^18.2.0", @@ -45,10 +46,10 @@ "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", "@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", + "@types/react-router-dom": "^5.3.3", + "@typescript-eslint/eslint-plugin": "^4.2.0", "eslint": "^7.9.0", "eslint-config-standard-with-typescript": "^21.0.1", "eslint-plugin-es": "^4.1.0", diff --git a/ui/src/data/usecases/index.ts b/ui/src/data/usecases/index.ts index d45bfe3..01f3003 100644 --- a/ui/src/data/usecases/index.ts +++ b/ui/src/data/usecases/index.ts @@ -1 +1,2 @@ export * from './remote-authentication' +export * from './remote-create-account' diff --git a/ui/src/data/usecases/remote-authentication.ts b/ui/src/data/usecases/remote-authentication.ts index fd46ebf..8006017 100644 --- a/ui/src/data/usecases/remote-authentication.ts +++ b/ui/src/data/usecases/remote-authentication.ts @@ -1,28 +1,18 @@ import { HttpClient, HttpStatusCode } from '../../data/protocols/http' import { Authentication } from '../../domain/usecases' -import { InvalidCredentialsError, UnexpectedError, UnauthorizedAuthenticationError } from '../../domain/errors' +import { Oops } from '../../domain/errors' export class RemoteAuthentication implements Authentication { constructor ( private readonly url: string, - private readonly httpClient: HttpClient + private readonly httpClient: HttpClient ) {} async auth (params: Authentication.Params): Promise { - const httpResponse = await this.httpClient.request({ - url: this.url, - method: 'post', - body: params - }) + const httpResponse = await this.httpClient.request({ url: this.url, method: 'post', body: params }) switch (httpResponse.statusCode) { case HttpStatusCode.ok: return httpResponse.body - case HttpStatusCode.unauthorized: throw new InvalidCredentialsError() - case HttpStatusCode.forbidden: throw new UnauthorizedAuthenticationError() - default: throw new UnexpectedError() + default: throw new Oops(httpResponse.body.message) } } } - -export namespace RemoteAuthentication { - export type Model = Authentication.Model -} diff --git a/ui/src/data/usecases/remote-create-account.ts b/ui/src/data/usecases/remote-create-account.ts new file mode 100644 index 0000000..d43afeb --- /dev/null +++ b/ui/src/data/usecases/remote-create-account.ts @@ -0,0 +1,18 @@ +import { HttpClient, HttpStatusCode } from '../../data/protocols/http' +import { CreateAccount } from '../../domain/usecases' +import { Oops } from '../../domain/errors' + +export class RemoteCreateAccount implements CreateAccount { + constructor ( + private readonly url: string, + private readonly httpClient: HttpClient + ) {} + + async register (params: CreateAccount.Params): Promise { + const httpResponse = await this.httpClient.request({ url: this.url, method: 'post', body: params }) + switch (httpResponse.statusCode) { + case HttpStatusCode.ok: return httpResponse.body + default: throw new Oops(httpResponse.body.message) + } + } +} diff --git a/ui/src/domain/errors/index.ts b/ui/src/domain/errors/index.ts index a0715d2..1e2303a 100644 --- a/ui/src/domain/errors/index.ts +++ b/ui/src/domain/errors/index.ts @@ -1,3 +1,4 @@ export * from './invalid-credentials-error' export * from './unexpected-error' export * from './unauthorized-authentication-error' +export * from './oops' diff --git a/ui/src/domain/errors/oops.ts b/ui/src/domain/errors/oops.ts new file mode 100644 index 0000000..79ac84f --- /dev/null +++ b/ui/src/domain/errors/oops.ts @@ -0,0 +1,6 @@ +export class Oops extends Error { + constructor (message: string) { + super(message) + this.name = 'OopsError' + } +} diff --git a/ui/src/domain/models/err.ts b/ui/src/domain/models/err.ts new file mode 100644 index 0000000..1952b94 --- /dev/null +++ b/ui/src/domain/models/err.ts @@ -0,0 +1,4 @@ +export type Err = { + message: string + code: number +} diff --git a/ui/src/domain/models/index.ts b/ui/src/domain/models/index.ts index c130a70..2865b0e 100644 --- a/ui/src/domain/models/index.ts +++ b/ui/src/domain/models/index.ts @@ -1 +1,2 @@ export * from './account-model' +export * from './err' diff --git a/ui/src/domain/usecases/authentication.ts b/ui/src/domain/usecases/authentication.ts index 4b46561..17eeede 100644 --- a/ui/src/domain/usecases/authentication.ts +++ b/ui/src/domain/usecases/authentication.ts @@ -1,4 +1,4 @@ -import { AccountModel } from '@/domain/models' +import { AccountModel, Err } from '@/domain/models' export interface Authentication { auth: (params: Authentication.Params) => Promise @@ -10,5 +10,5 @@ export namespace Authentication { password: string } - export type Model = AccountModel + export type Model = AccountModel & Err } diff --git a/ui/src/domain/usecases/create-account.ts b/ui/src/domain/usecases/create-account.ts new file mode 100644 index 0000000..1355773 --- /dev/null +++ b/ui/src/domain/usecases/create-account.ts @@ -0,0 +1,16 @@ +import { Err } from '@/domain/models' + +export interface CreateAccount { + register: (params: CreateAccount.Params) => Promise +} + +export namespace CreateAccount { + export type Params = { + first_name: string + last_name: string + email: string + password: string + } + + export type Model = Err +} \ No newline at end of file diff --git a/ui/src/domain/usecases/index.ts b/ui/src/domain/usecases/index.ts index ed14183..e6023fe 100644 --- a/ui/src/domain/usecases/index.ts +++ b/ui/src/domain/usecases/index.ts @@ -1 +1,2 @@ export * from './authentication' +export * from './create-account' diff --git a/ui/src/main/factories/pages/create-account-factory.tsx b/ui/src/main/factories/pages/create-account-factory.tsx new file mode 100644 index 0000000..01f726c --- /dev/null +++ b/ui/src/main/factories/pages/create-account-factory.tsx @@ -0,0 +1,14 @@ +import React from 'react' + +import { CreateAccountPage } from '../../../presentation/pages' +import { makeRemoteCreateAccount } from '../usecases' +import { makeCreateAccountValidation } from '../validation' + +export const makeCreateAccount: React.FC = () => { + return ( + + ) +} diff --git a/ui/src/main/factories/pages/index.ts b/ui/src/main/factories/pages/index.ts index c26fcfa..ac60940 100644 --- a/ui/src/main/factories/pages/index.ts +++ b/ui/src/main/factories/pages/index.ts @@ -1,2 +1,3 @@ export * from './login-factory' export * from './home-factory' +export * from './create-account-factory' diff --git a/ui/src/main/factories/pages/login-factory.tsx b/ui/src/main/factories/pages/login-factory.tsx index a411dad..8626f1a 100644 --- a/ui/src/main/factories/pages/login-factory.tsx +++ b/ui/src/main/factories/pages/login-factory.tsx @@ -2,12 +2,12 @@ import React from 'react' import { makeLoginValidation } from '../../../main/factories/validation' import { makeRemoteAuthentication } from '../../../main/factories/usecases' -import { Login } from '../../../presentation/pages' +import { LoginPage } from '../../../presentation/pages' export const makeLogin: React.FC = () => { return ( - ) diff --git a/ui/src/main/factories/usecases/index.ts b/ui/src/main/factories/usecases/index.ts index fc313c5..19d1838 100644 --- a/ui/src/main/factories/usecases/index.ts +++ b/ui/src/main/factories/usecases/index.ts @@ -1 +1,2 @@ export * from './remote-authentication-factory' +export * from './remote-register-factory' diff --git a/ui/src/main/factories/usecases/remote-authentication-factory.ts b/ui/src/main/factories/usecases/remote-authentication-factory.ts index 6c48f28..5bf29df 100644 --- a/ui/src/main/factories/usecases/remote-authentication-factory.ts +++ b/ui/src/main/factories/usecases/remote-authentication-factory.ts @@ -2,4 +2,5 @@ import { makeApiUrl, makeAxiosHttpClient } from '../../../main/factories/http' import { RemoteAuthentication } from '../../../data/usecases' import { Authentication } from '../../../domain/usecases' -export const makeRemoteAuthentication = (): Authentication => new RemoteAuthentication(makeApiUrl('auth/login'), makeAxiosHttpClient()) +export const makeRemoteAuthentication = (): Authentication => + new RemoteAuthentication(makeApiUrl('auth/login'), makeAxiosHttpClient()) diff --git a/ui/src/main/factories/usecases/remote-register-factory.ts b/ui/src/main/factories/usecases/remote-register-factory.ts new file mode 100644 index 0000000..cde483f --- /dev/null +++ b/ui/src/main/factories/usecases/remote-register-factory.ts @@ -0,0 +1,6 @@ +import { makeApiUrl, makeAxiosHttpClient } from '../../../main/factories/http' +import { RemoteCreateAccount } from '../../../data/usecases' +import { CreateAccount } from '../../../domain/usecases' + +export const makeRemoteCreateAccount = (): CreateAccount => + new RemoteCreateAccount(makeApiUrl('auth/register'), makeAxiosHttpClient()) diff --git a/ui/src/main/factories/validation/create-account-validation-factory.ts b/ui/src/main/factories/validation/create-account-validation-factory.ts new file mode 100644 index 0000000..9cf73b2 --- /dev/null +++ b/ui/src/main/factories/validation/create-account-validation-factory.ts @@ -0,0 +1,10 @@ +import { ValidationComposite } from '../../../main/composites' +import { ValidationBuilder } from '../../../main/builders' + +export const makeCreateAccountValidation = (): ValidationComposite => ValidationComposite.build([ + ...ValidationBuilder.field('firstName').required().build(), + ...ValidationBuilder.field('lastName').required().build(), + ...ValidationBuilder.field('email').required().email().build(), + ...ValidationBuilder.field('password').required().min(5).build(), + ...ValidationBuilder.field('confirmPassword').required().min(5).sameAs('password').build() +]) diff --git a/ui/src/main/factories/validation/index.ts b/ui/src/main/factories/validation/index.ts index 4574101..dd0e03a 100644 --- a/ui/src/main/factories/validation/index.ts +++ b/ui/src/main/factories/validation/index.ts @@ -1 +1,2 @@ export * from './login-validation-factory' +export * from './create-account-validation-factory' diff --git a/ui/src/main/routes/router.tsx b/ui/src/main/routes/router.tsx index a0ab8c3..74ca707 100644 --- a/ui/src/main/routes/router.tsx +++ b/ui/src/main/routes/router.tsx @@ -4,7 +4,7 @@ import { RecoilRoot } from 'recoil' import { setCurrentAccountAdapter, getCurrentAccountAdapter } from '../../main/adapters' import { currentAccountState } from '../../presentation/components' -import { makeLogin, makeHome } from '../../main/factories/pages' +import { makeLogin, makeHome, makeCreateAccount } from '../../main/factories/pages' import { PrivateRoute } from '../proxies' const Router: React.FC = () => { @@ -18,6 +18,7 @@ const Router: React.FC = () => { + diff --git a/ui/src/presentation/components/form-status/form-status.tsx b/ui/src/presentation/components/form-status/form-status.tsx index 459e385..0237057 100644 --- a/ui/src/presentation/components/form-status/form-status.tsx +++ b/ui/src/presentation/components/form-status/form-status.tsx @@ -1,17 +1,16 @@ import React from 'react' type Props = { - state: any + messageError: string } -const FormStatus: React.FC = ({ state }: Props) => { - const { mainError } = state +const FormStatus: React.FC = ({ messageError }: Props) => { return ( <> - {mainError && ( + {messageError && (
- {mainError} + {messageError}
)} diff --git a/ui/src/presentation/components/input/input.tsx b/ui/src/presentation/components/input/input.tsx index 30ca736..7e41488 100644 --- a/ui/src/presentation/components/input/input.tsx +++ b/ui/src/presentation/components/input/input.tsx @@ -10,7 +10,7 @@ const Input: React.FC = ({ state, setState, ...props }: Props) => { const error = state[`${props.name}Error`] return (
- + = ({ state, setState, ...props }: Props) => { placeholder={props.placeholder} data-testid={props.name} readOnly - className="mb-3 p-3 form-control block w-full border border-solid rounded transition ease-in-out" data-status={error ? 'invalid' : 'valid'} + className="mb-3 block w-full form-control rounded-md border-0 p-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-pink-600 sm:text-sm sm:leading-6" + data-status={error ? 'invalid' : 'valid'} onFocus={e => { e.target.readOnly = false }} onChange={e => { setState({ ...state, [e.target.name]: e.target.value }) }} /> diff --git a/ui/src/presentation/components/submit-button/index.tsx b/ui/src/presentation/components/submit-button/index.tsx index 561d712..6b2adef 100644 --- a/ui/src/presentation/components/submit-button/index.tsx +++ b/ui/src/presentation/components/submit-button/index.tsx @@ -11,7 +11,7 @@ const SubmitButton: React.FC = ({ state, text }: Props) => { 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' + className="block rounded-md bg-pink-600 w-full px-3 py-3 text-sm font-semibold text-white shadow-sm hover:bg-pink-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-600 disabled:bg-rose-500" > { state.isLoading && ( <> diff --git a/ui/src/presentation/pages/create-account/components/atoms.ts b/ui/src/presentation/pages/create-account/components/atoms.ts new file mode 100644 index 0000000..4120a43 --- /dev/null +++ b/ui/src/presentation/pages/create-account/components/atoms.ts @@ -0,0 +1,20 @@ +import { atom } from 'recoil' + +export const createAccountState = atom({ + key: 'createAccountState', + default: { + isLoading: false, + isFormInvalid: true, + email: '', + password: '', + confirmPassword: '', + firstName: '', + lastName: '', + messageError: '', + passwordError: '', + firstNameError: '', + lastNameError: '', + confirmPasswordError: '', + mainError: '' + } +}) diff --git a/ui/src/presentation/pages/create-account/components/form-status.tsx b/ui/src/presentation/pages/create-account/components/form-status.tsx new file mode 100644 index 0000000..514cf06 --- /dev/null +++ b/ui/src/presentation/pages/create-account/components/form-status.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import { useRecoilValue } from 'recoil' + +import { createAccountState } from './atoms' +import { FormStatusBase } from '../../../../presentation/components' + +const FormStatus: React.FC = () => { + const state = useRecoilValue(createAccountState) + return +} + +export default FormStatus diff --git a/ui/src/presentation/pages/create-account/components/index.ts b/ui/src/presentation/pages/create-account/components/index.ts new file mode 100644 index 0000000..33b0662 --- /dev/null +++ b/ui/src/presentation/pages/create-account/components/index.ts @@ -0,0 +1,4 @@ +export * from './atoms' +export { default as Input } from './input' +export { default as SubmitButton } from './submit-button' +export { default as FormStatus } from './form-status' diff --git a/ui/src/presentation/pages/create-account/components/input.tsx b/ui/src/presentation/pages/create-account/components/input.tsx new file mode 100644 index 0000000..c6d7b73 --- /dev/null +++ b/ui/src/presentation/pages/create-account/components/input.tsx @@ -0,0 +1,26 @@ +import { createAccountState } from './atoms' +import { InputBase } from '../../../../presentation/components' + +import { useRecoilState } from 'recoil' +import React from 'react' + +type Props = { + type: string + name: string + placeholder: string +} + +const Input: React.FC = ({ type, name, placeholder }: Props) => { + const [state, setState] = useRecoilState(createAccountState) + return ( + + ) +} + +export default Input diff --git a/ui/src/presentation/pages/create-account/components/submit-button.tsx b/ui/src/presentation/pages/create-account/components/submit-button.tsx new file mode 100644 index 0000000..a9caad2 --- /dev/null +++ b/ui/src/presentation/pages/create-account/components/submit-button.tsx @@ -0,0 +1,15 @@ +import React from 'react' + +import { useRecoilValue } from 'recoil' +import { createAccountState } from './atoms' +import { SubmitButtonBase } from '../../../../presentation/components' + +type Props = { + text: string +} + +const SubmitButton: React.FC = ({ text }: Props) => { + return +} + +export default SubmitButton diff --git a/ui/src/presentation/pages/create-account/index.tsx b/ui/src/presentation/pages/create-account/index.tsx new file mode 100644 index 0000000..3f736f5 --- /dev/null +++ b/ui/src/presentation/pages/create-account/index.tsx @@ -0,0 +1,107 @@ +import React, { useEffect } from 'react' +import { useHistory } from 'react-router-dom' +import { useRecoilState, useResetRecoilState } from 'recoil' + +import { CreateAccount } from '@/domain/usecases' +import { Validation } from '@/presentation/protocols' +import { createAccountState, FormStatus, Input, SubmitButton } from './components' + +type Props = { + validation: Validation + usecase: CreateAccount +} + +const CreateAccountPage: React.FC = ({ validation, usecase }: Props) => { + const resetCreateAccountState = useResetRecoilState(createAccountState) + const [state, setState] = useRecoilState(createAccountState) + + useEffect(() => resetCreateAccountState(), []) + useEffect(() => validate('fisrtName'), [state.firstName]) + useEffect(() => validate('lastName'), [state.lastName]) + useEffect(() => validate('email'), [state.email]) + useEffect(() => validate('password'), [state.password]) + useEffect(() => validate('confirmPassword'), [state.confirmPassword]) + + const validate = (field: string): void => { + const { firstName: fisrtName, lastName, email, password, confirmPassword } = state + const formData = { fisrtName, lastName, email, password, confirmPassword } + setState((old) => ({ + ...old, + [`${field}Error`]: validation.validate(field, formData) + })) + setState((old) => ({ + ...old, + isFormInvalid: + !!old.firstNameError || + !!old.lastNameError || + !!old.messageError || + !!old.passwordError || + !!old.confirmPasswordError + })) + } + + const history = useHistory() + + const handleSubmit = async ( + event: React.FormEvent + ): Promise => { + event.preventDefault() + try { + if (state.isLoading || state.isFormInvalid) return + setState((old) => ({ ...old, isLoading: true })) + await usecase.register({ + email: state.email, + password: state.password, + first_name: state.firstName, + last_name: state.lastName + }) + history.replace('/') + } catch (error: any) { + setState((old) => ({ ...old, isLoading: false, messageError: error.message })) + } + } + + return ( +
+
+
+
+

+ Create account +

+

+ Use a permanent address where you can receive mail. +

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+
+ ) +} + +export default CreateAccountPage diff --git a/ui/src/presentation/pages/index.ts b/ui/src/presentation/pages/index.ts index e86eb6a..4e5f538 100644 --- a/ui/src/presentation/pages/index.ts +++ b/ui/src/presentation/pages/index.ts @@ -1,4 +1,2 @@ -// export * from './Dashboard' -// export * from './Projects' - -export { default as Login } from './login/login' +export { default as LoginPage } from './login/login' +export { default as CreateAccountPage } from './create-account' diff --git a/ui/src/presentation/pages/login/components/atoms.ts b/ui/src/presentation/pages/login/components/atoms.ts index 9244674..bf965ef 100644 --- a/ui/src/presentation/pages/login/components/atoms.ts +++ b/ui/src/presentation/pages/login/components/atoms.ts @@ -9,6 +9,6 @@ export const loginState = atom({ password: '', emailError: '', passwordError: '', - mainError: '' + messageError: '' } }) diff --git a/ui/src/presentation/pages/login/components/form-status.tsx b/ui/src/presentation/pages/login/components/form-status.tsx index 67419ac..674fbed 100644 --- a/ui/src/presentation/pages/login/components/form-status.tsx +++ b/ui/src/presentation/pages/login/components/form-status.tsx @@ -5,7 +5,8 @@ import { loginState } from './atoms' import { FormStatusBase } from '../../../../presentation/components' const FormStatus: React.FC = () => { - return + const state = useRecoilValue(loginState) + return } export default FormStatus diff --git a/ui/src/presentation/pages/login/components/submit-button.tsx b/ui/src/presentation/pages/login/components/submit-button.tsx index 06ff154..5cd4c64 100644 --- a/ui/src/presentation/pages/login/components/submit-button.tsx +++ b/ui/src/presentation/pages/login/components/submit-button.tsx @@ -9,8 +9,7 @@ type Props = { } const SubmitButton: React.FC = ({ text }: Props) => { - const state = useRecoilValue(loginState) - return + return } export default SubmitButton diff --git a/ui/src/presentation/pages/login/login.tsx b/ui/src/presentation/pages/login/login.tsx index 2ba6094..30ffe60 100644 --- a/ui/src/presentation/pages/login/login.tsx +++ b/ui/src/presentation/pages/login/login.tsx @@ -9,10 +9,10 @@ import { loginState, Input, FormStatus, SubmitButton } from './components' type Props = { validation: Validation - authentication: Authentication + usecase: Authentication } -const Login: React.FC = ({ validation, authentication }: Props) => { +const Login: React.FC = ({ validation, usecase }: Props) => { const resetLoginState = useResetRecoilState(loginState) const [state, setState] = useRecoilState(loginState) const { setCurrentAccount } = useRecoilValue(currentAccountState) @@ -34,30 +34,36 @@ const Login: React.FC = ({ 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 }) + const account = await usecase.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, messageError: error.message })) } } return ( -
-
-
-

Welcome to PowerSSO

-

Sign in to your account.

-
-
-
- - - - - -
-
+
+
+
+
+

Welcome to PowerSSO

+

Sign in to your account.

+
+
+ +
+
+ +
+
+ +
+
+
+ +
+
) } diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js index 5a66654..1c9c4d9 100644 --- a/ui/tailwind.config.js +++ b/ui/tailwind.config.js @@ -6,5 +6,7 @@ module.exports = { theme: { extend: {}, }, - plugins: [], + plugins: [ + require('@tailwindcss/forms'), + ], } \ No newline at end of file