From 2bac2bfeb7acb50b468e0833de8746a555057eac Mon Sep 17 00:00:00 2001 From: Muhammad Fajar Date: Wed, 7 Dec 2022 02:37:18 +0700 Subject: [PATCH] fix login & fix logout --- .../Http/Controllers/Api/AuthController.php | 2 +- app/Helpers/Helper.php | 4 +-- frontend/client-portal/src/@types/auth.ts | 2 +- .../src/contexts/LaravelAuthContext.tsx | 15 ++++------ .../dashboard/header/AccountPopover.tsx | 9 ++---- .../src/pages/Dashboard/Dashboard.tsx | 2 +- .../sections/auth/login/VerifyCodeForm.tsx | 29 +++++++++---------- 7 files changed, 25 insertions(+), 38 deletions(-) diff --git a/Modules/Client/Http/Controllers/Api/AuthController.php b/Modules/Client/Http/Controllers/Api/AuthController.php index 977302d6..ee7f3445 100755 --- a/Modules/Client/Http/Controllers/Api/AuthController.php +++ b/Modules/Client/Http/Controllers/Api/AuthController.php @@ -81,7 +81,7 @@ class AuthController extends Controller ); } - return Helper::responseJson(message: 'OTP yang anda masukan salah!'); + return Helper::responseJson(status: 'error', message: 'OTP yang anda masukan salah!'); } public function logout(Request $request) diff --git a/app/Helpers/Helper.php b/app/Helpers/Helper.php index 34de3771..78355560 100755 --- a/app/Helpers/Helper.php +++ b/app/Helpers/Helper.php @@ -158,10 +158,10 @@ class Helper * @param string $message * @return JsonResponse */ - public static function responseJson(array|object $data = [], int $statusCode = Response::HTTP_OK, string $message = 'Data berhasil di ambil'): JsonResponse + public static function responseJson(array|object $data = [], string $status = 'success', int $statusCode = Response::HTTP_OK, string $message = 'Data berhasil di ambil'): JsonResponse { return response()->json([ - 'status' => in_array($statusCode, [200, 201, 204]) ? 'success' : 'error', + 'status' => $status, 'statusCode' => $statusCode, 'message' => $message, 'data' => $data, diff --git a/frontend/client-portal/src/@types/auth.ts b/frontend/client-portal/src/@types/auth.ts index dbc15390..a5d2236c 100755 --- a/frontend/client-portal/src/@types/auth.ts +++ b/frontend/client-portal/src/@types/auth.ts @@ -28,7 +28,7 @@ export type JWTContextType = { method: 'jwt'; login: (phoneOrEmail: string) => Promise; validateOtp: (phoneOrEmail: string, otp: string) => Promise - logout: () => Promise; + logout: () => void; }; // export type FirebaseContextType = { diff --git a/frontend/client-portal/src/contexts/LaravelAuthContext.tsx b/frontend/client-portal/src/contexts/LaravelAuthContext.tsx index 8c887190..7c09b5fa 100755 --- a/frontend/client-portal/src/contexts/LaravelAuthContext.tsx +++ b/frontend/client-portal/src/contexts/LaravelAuthContext.tsx @@ -132,16 +132,9 @@ function AuthProvider({ children }: AuthProviderProps) { axios .post('/verify-code', { phoneOrEmail: phoneOrEmail, otp }) .then((response) => { - const { user, token } = response.data.data; + const { token } = response.data.data; setSession(token); - dispatch({ - type: Types.ValidateOtp, - payload: { - user, - }, - }); - return response.data; }) .catch((error) => { @@ -149,9 +142,11 @@ function AuthProvider({ children }: AuthProviderProps) { if (error.response.status !== 422) throw error.response; }); - const logout = async () => { - await axios.post('/logout'); + const logout = () => { setSession(null); + localStorage.removeItem('loginOrVerifyCode'); + localStorage.removeItem('emailOrPhone'); + localStorage.removeItem('emailOrPhoneForm'); dispatch({ type: Types.Logout }); }; diff --git a/frontend/client-portal/src/layouts/dashboard/header/AccountPopover.tsx b/frontend/client-portal/src/layouts/dashboard/header/AccountPopover.tsx index be9d5cbe..e9a01e1c 100755 --- a/frontend/client-portal/src/layouts/dashboard/header/AccountPopover.tsx +++ b/frontend/client-portal/src/layouts/dashboard/header/AccountPopover.tsx @@ -8,6 +8,7 @@ import { IconButtonAnimate } from '../../../components/animate'; import { useNavigate } from 'react-router-dom'; import useAuth from '../../../hooks/useAuth'; import useLocalStorage from '../../../hooks/useLocalStorage'; +import { enqueueSnackbar } from 'notistack'; // ---------------------------------------------------------------------- @@ -33,10 +34,6 @@ export default function AccountPopover() { const navigate = useNavigate(); const { logout } = useAuth(); - const [emailOrPhone, setEmailOrPhone] = useLocalStorage('emailOrPhone', ''); - const [emailOrPhoneForm, setEmailOrPhoneForm] = useLocalStorage('emailOrPhoneForm', false); - const [loginOrVerifyCode, setLoginOrVerifyCode] = useLocalStorage('loginOrVerifyCode', false); - const handleOpen = (event: React.MouseEvent) => { setOpen(event.currentTarget); }; @@ -46,11 +43,9 @@ export default function AccountPopover() { }; const handleLogout = () => { - setEmailOrPhone(''); - setEmailOrPhoneForm(false); - setLoginOrVerifyCode(false); logout(); navigate('/auth/login'); + enqueueSnackbar('Berhasi Logout!', 'success'); }; return ( diff --git a/frontend/client-portal/src/pages/Dashboard/Dashboard.tsx b/frontend/client-portal/src/pages/Dashboard/Dashboard.tsx index db95ddfc..d20e4870 100755 --- a/frontend/client-portal/src/pages/Dashboard/Dashboard.tsx +++ b/frontend/client-portal/src/pages/Dashboard/Dashboard.tsx @@ -59,7 +59,7 @@ export default function Dashboard() { const { user } = useAuth(); // @ts-ignore - const [corporateValue, setCorporateValue] = useState(`${user.corporate.id}`); + const [corporateValue, setCorporateValue] = useState(`1`); const [corporateData, setCorporateData] = useState([]); const [policyData, setPolicyData] = useState({ myLimit: { diff --git a/frontend/client-portal/src/sections/auth/login/VerifyCodeForm.tsx b/frontend/client-portal/src/sections/auth/login/VerifyCodeForm.tsx index 00b2737e..a84d76f7 100755 --- a/frontend/client-portal/src/sections/auth/login/VerifyCodeForm.tsx +++ b/frontend/client-portal/src/sections/auth/login/VerifyCodeForm.tsx @@ -87,25 +87,22 @@ export default function VerifyCodeForm({ }, [setValue]); const onSubmit = async (data: FormValuesProps) => { - try { + // @ts-ignore + const response: responseProps = await validateOtp(emailOrPhone, Object.values(data).join('')); + + if (response.data.length === 0) { + return enqueueSnackbar(response.message, { + variant: 'error', + autoHideDuration: 4000, + preventDuplicate: true, + }); + } else { enqueueSnackbar('Verify success!', { variant: 'success', autoHideDuration: 1000 }); await new Promise((resolve) => setTimeout(resolve, 2000)); - // @ts-ignore - const response: responseProps = await validateOtp(emailOrPhone, Object.values(data).join('')); - - if (response.data.length === 0) { - return enqueueSnackbar(response.message, { - variant: 'error', - autoHideDuration: 4000, - preventDuplicate: true, - }); - } - - navigate('/dashboard'); - enqueueSnackbar('Login Berhasil!', { variant: 'success' }); - } catch (error) { - console.error(error); } + + navigate('/dashboard'); + enqueueSnackbar('Login Berhasil!', { variant: 'success' }); }; const handleChangeWithNextField = (