local-it/dashboard
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Feat/login

Browse source
This commit is contained in:
Valentino 2022-01-18 10:14:29 +00:00
parent 4803c4d8b6
commit 3361d4c043
7 changed files with 91 additions and 167 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/App.tsx
View file

@ -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<string | null>(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) ? (
<Router>
<Login path="/login" />
<LoginCallback path="/login-callback" />
</Router>
) : (
<Layout>
@ -60,7 +62,7 @@ function App(_: AppProps) {
</Layout>
)}
{isValid(auth) ? <Redirect from="/" to="/dashboard" noThrow /> : <Redirect from="/" to="/login" noThrow />}
{/* {isValid(auth) ? <Redirect from="/" to="/dashboard" noThrow /> : <Redirect from="/" to="/" noThrow />} */}
{/* Place to load notifications */}
<div

152
src/modules/login/Login.tsx
View file

@ -1,133 +1,65 @@
import React, { useEffect } from 'react';
import { navigate, RouteComponentProps } from '@reach/router';
import * as yup from 'yup';
import React from 'react';
import { RouteComponentProps } from '@reach/router';
import clsx from 'clsx';
import { Controller, useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import { LockClosedIcon } from '@heroicons/react/solid';
import { useAuth } from 'src/services/auth';
import { isValid } from 'src/services/api';
import { VALIDATION_MESSAGES } from 'src/common/const';
import { showToast, ToastType } from 'src/common/util/show-toast';
const validationSchema = yup.object({
email: yup.string().required(VALIDATION_MESSAGES.required('Email')),
password: yup.string().required(VALIDATION_MESSAGES.required('Password')),
});
import { performApiCall } from 'src/services/api';
type LoginProps = RouteComponentProps;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export function Login(_: LoginProps) {
const { auth, logIn } = useAuth();
const { handleSubmit, formState, control } = useForm<{
email: string;
password: string;
remember: boolean;
}>({
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 (
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-md w-full space-y-8">
<div className="flex justify-center">
<img className="hidden lg:block" src="assets/logo.svg" alt="Stackspin" />
<img className="lg:block" src="assets/logo.svg" alt="Stackspin" />
<h2 className="mt-6 text-center text-xl font-bold text-gray-900 sr-only">Sign in</h2>
</div>
<form className="mt-8 space-y-6" action="#" onSubmit={onSubmit} noValidate>
<input type="hidden" name="remember" defaultValue="true" />
<div className="rounded-md shadow-sm -space-y-px">
<div>
<Controller
control={control}
name="email"
defaultValue=""
render={({ field }) => {
return (
<>
<label htmlFor="email-address" className="sr-only">
Username
</label>
<input
{...field}
id="email-address"
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-primary-dark focus:border-primary-dark focus:z-10 sm:text-sm"
placeholder="Username"
/>
</>
);
}}
/>
</div>
<div>
<Controller
control={control}
name="password"
defaultValue=""
render={({ field }) => {
return (
<>
<label htmlFor="password" className="sr-only">
Password
</label>
<input
{...field}
id="password"
type="password"
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-primary-dark focus:border-primary-dark focus:z-10 sm:text-sm"
placeholder="Password"
/>
</>
);
}}
/>
</div>
</div>
<div>
<button
type="submit"
className={clsx(
'group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-primary-dark hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
{
'is-loading': formState.isSubmitting,
},
)}
disabled={formState.isSubmitting || !formState.isValid}
>
<span className="absolute left-0 inset-y-0 flex items-center pl-3">
<LockClosedIcon className="h-5 w-5 text-white group-hover:text-primary-light" aria-hidden="true" />
</span>
Sign in
</button>
</div>
</form>
<button
onClick={handleSubmit}
type="button"
className={clsx(
'group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-primary-dark hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
)}
>
<span className="absolute left-0 inset-y-0 flex items-center pl-3">
<LockClosedIcon className="h-5 w-5 text-white group-hover:text-primary-light" aria-hidden="true" />
</span>
Sign in
</button>
</div>
</div>
);

31
src/modules/login/LoginCallback.tsx Normal file
View file

@ -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 (
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-md w-full space-y-8">
<div className="flex justify-center">Loading . . .</div>
</div>
</div>
);
}

24
src/services/auth/hooks/use-auth.ts
View file

@ -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,
};
}

2
src/services/auth/index.ts
View file

@ -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';

29
src/services/auth/redux/actions.ts
View file

@ -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],
);

2
src/services/auth/redux/index.ts
View file

@ -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';