From 3361d4c043f45cb05352176530da9895c6fa48c5 Mon Sep 17 00:00:00 2001 From: Valentino Date: Tue, 18 Jan 2022 10:14:29 +0000 Subject: [PATCH] Feat/login --- src/App.tsx | 18 ++-- src/modules/login/Login.tsx | 152 ++++++++-------------------- src/modules/login/LoginCallback.tsx | 31 ++++++ src/services/auth/hooks/use-auth.ts | 24 +---- src/services/auth/index.ts | 2 +- src/services/auth/redux/actions.ts | 29 +----- src/services/auth/redux/index.ts | 2 +- 7 files changed, 91 insertions(+), 167 deletions(-) create mode 100644 src/modules/login/LoginCallback.tsx diff --git a/src/App.tsx b/src/App.tsx index fe57470..dd8fc05 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,28 +1,29 @@ import React, { useEffect, useState } from 'react'; import { Helmet } from 'react-helmet'; -import { useMatch, Router, navigate, RouteComponentProps, Redirect } from '@reach/router'; +import { Router, RouteComponentProps } from '@reach/router'; import { Toaster } from 'react-hot-toast'; import { isValid } from 'src/services/api'; import { useAuth } from 'src/services/auth'; import { Apps, Dashboard, Users, Login, AppSingle } from './modules'; import { Layout } from './components'; +import { LoginCallback } from './modules/login/LoginCallback'; type AppProps = RouteComponentProps; // eslint-disable-next-line @typescript-eslint/no-unused-vars function App(_: AppProps) { const { auth } = useAuth(); - const isLoginPage = useMatch('/login'); + // const isLoginPage = useMatch('/login'); const [initialized, setInitialized] = useState(false); const [initializedToken, setInitializedToken] = useState(null); - useEffect(() => { - if (!isValid(auth) && !isLoginPage) { - navigate('/login'); - } - }, [auth, isLoginPage]); + // useEffect(() => { + // if (!isValid(auth) && !isLoginPage) { + // navigate('/login'); + // } + // }, [auth, isLoginPage]); useEffect(() => { if (isValid(auth) && (!initialized || initializedToken !== auth.token)) { @@ -48,6 +49,7 @@ function App(_: AppProps) { {!isValid(auth) ? ( + ) : ( @@ -60,7 +62,7 @@ function App(_: AppProps) { )} - {isValid(auth) ? : } + {/* {isValid(auth) ? : } */} {/* Place to load notifications */}
({ - resolver: yupResolver(validationSchema), - mode: 'all', - defaultValues: { email: process.env.REACT_APP_USERNAME, password: process.env.REACT_APP_PASSWORD }, - }); + const handleSubmit = async () => { + try { + const { data } = await performApiCall({ + path: '/login', + method: 'POST', + }); - const onSubmit = handleSubmit(async (values) => { - const res = await logIn(values.email, values.password); + if (data.authorizationUrl) { + window.location.href = data.authorizationUrl; + } + } catch (e: any) { + // continue + } // @ts-ignore - if (res.ok) { - navigate('/dashboard'); - showToast('Logged in!'); - } else { - showToast('Username or password incorrect', ToastType.Error); - } - }); + // if (res.ok) { + // showToast('Logged in!'); + // } else { + // showToast('Username or password incorrect', ToastType.Error); + // } + }; - useEffect(() => { - if (isValid(auth)) { - navigate('/dashboard'); - } - }, [auth]); + // useEffect(() => { + // if (isValid(auth)) { + // navigate('/dashboard'); + // } + // }, [auth]); - if (isValid(auth)) { - return null; - } + // if (isValid(auth)) { + // return null; + // } return (
- Stackspin + Stackspin

Sign in

-
- -
-
- { - return ( - <> - - - - ); - }} - /> -
-
- { - return ( - <> - - - - ); - }} - /> -
-
- -
- -
-
+
); diff --git a/src/modules/login/LoginCallback.tsx b/src/modules/login/LoginCallback.tsx new file mode 100644 index 0000000..497578d --- /dev/null +++ b/src/modules/login/LoginCallback.tsx @@ -0,0 +1,31 @@ +import React, { useEffect } from 'react'; +import { RouteComponentProps } from '@reach/router'; +import { useAuth } from 'src/services/auth'; +import { showToast, ToastType } from 'src/common/util/show-toast'; + +type LoginCallbackProps = RouteComponentProps; + +// eslint-disable-next-line @typescript-eslint/no-unused-vars +export function LoginCallback(_: LoginCallbackProps) { + const { logIn } = useAuth(); + + useEffect(() => { + const res = logIn(); + + // @ts-ignore + if (res.ok) { + showToast('Logged in'); + } else { + showToast('Something went wrong', ToastType.Error); + // navigate('/login'); + } + }, [logIn]); + + return ( +
+
+
Loading . . .
+
+
+ ); +} diff --git a/src/services/auth/hooks/use-auth.ts b/src/services/auth/hooks/use-auth.ts index 6a7be11..6630032 100644 --- a/src/services/auth/hooks/use-auth.ts +++ b/src/services/auth/hooks/use-auth.ts @@ -1,38 +1,22 @@ import { useCallback } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { getAuth, signIn, signOut, register as apiRegister, refreshUser as apiRefreshUser } from '../redux'; +import { getAuth, signIn, signOut } from '../redux'; export function useAuth() { const dispatch = useDispatch(); const auth = useSelector(getAuth); - const logIn = useCallback( - (email: string, password: string) => { - return dispatch(signIn(email, password)); - }, - [dispatch], - ); - - const register = useCallback( - (email: string, password: string, firstName: string, lastName: string) => { - return dispatch(apiRegister(email, password, firstName, lastName)); - }, - [dispatch], - ); + const logIn = useCallback(() => { + return dispatch(signIn()); + }, [dispatch]); const logOut = useCallback(() => { return dispatch(signOut()); }, [dispatch]); - const refreshUser = useCallback(() => { - return dispatch(apiRefreshUser()); - }, [dispatch]); - return { auth, logIn, logOut, - register, - refreshUser, }; } diff --git a/src/services/auth/index.ts b/src/services/auth/index.ts index 9ba0dfc..8dcf63d 100644 --- a/src/services/auth/index.ts +++ b/src/services/auth/index.ts @@ -1,3 +1,3 @@ export { useAuth } from './hooks'; -export { getAuth, reducer, signIn, signOut, register, AuthActionTypes, getIsAuthLoading } from './redux'; +export { getAuth, reducer, signIn, signOut, AuthActionTypes, getIsAuthLoading } from './redux'; export * from './types'; diff --git a/src/services/auth/redux/actions.ts b/src/services/auth/redux/actions.ts index d73c42e..0634689 100644 --- a/src/services/auth/redux/actions.ts +++ b/src/services/auth/redux/actions.ts @@ -15,20 +15,10 @@ const signOutAction = (): SuccessAction => ({ payload: null, }); -export const signIn = (email: string, password: string) => +export const signIn = () => createApiAction( { - path: '/login', - method: 'POST', - body: { username: email, password }, - }, - [AuthActionTypes.SIGN_IN_START, AuthActionTypes.SIGN_IN_SUCCESS, AuthActionTypes.SIGN_IN_FAILURE], - ); - -export const refreshUser = () => - createApiAction( - { - path: '/dashboard', + path: '/hydra/callback', method: 'GET', }, [AuthActionTypes.SIGN_IN_START, AuthActionTypes.SIGN_IN_SUCCESS, AuthActionTypes.SIGN_IN_FAILURE], @@ -39,18 +29,3 @@ export function signOut() { dispatch(signOutAction()); }; } - -export const register = (email: string, password: string, firstName: string, lastName: string) => - createApiAction( - { - path: '/auth/register', - method: 'POST', - body: { - email, - firstName, - lastName, - password, - }, - }, - [AuthActionTypes.REGISTRATION_START, AuthActionTypes.SIGN_IN_SUCCESS, AuthActionTypes.REGISTRATION_FAILURE], - ); diff --git a/src/services/auth/redux/index.ts b/src/services/auth/redux/index.ts index 9455248..ea20cc4 100644 --- a/src/services/auth/redux/index.ts +++ b/src/services/auth/redux/index.ts @@ -1,4 +1,4 @@ -export { signIn, signOut, register, refreshUser, AuthActionTypes } from './actions'; +export { signIn, signOut, AuthActionTypes } from './actions'; export { default as reducer } from './reducers'; export { getAuth, getIsAuthLoading } from './selectors'; export * from './types';