All files / src/components/Auth/SocialSignIn OctaSignIn.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { useState } from "react";
import { useRedirectUriMutation } from "../../../store/features/auth/api/redirectUriApi.ts";
import Loading from "../../common/Loading/index.tsx";
import CustomButton from "../../common/CustomButton/index.tsx";
import { Toast } from "../../Toast.tsx";
 
function OctaSignIn() {
  const [getRedirectUri, { isLoading }] = useRedirectUriMutation();
  const [toastOpen, setToastOpen] = useState(false);
  const [toastMsg, setToastMsg] = useState("");
  const [toastType, setToastType] = useState("success");
 
  const handleOpenToast = (msg: string, toastType: string) => {
    setToastMsg(msg);
    setToastType(toastType);
    setToastOpen(true);
  };
 
  const handleCloseToast = () => {
    setToastOpen(false);
  };
 
  const handleOcta = async (e: any) => {
    e.preventDefault();
    try {
      const data = await getRedirectUri("okta").unwrap();
      window.open(data.redirect_uri, "_self");
    } catch (err: any) {
      console.error(err);
      if (!err?.response) {
        handleOpenToast("No Server Response", "error");
      } else if (err.response?.status === 400) {
        handleOpenToast(err.response?.data?.non_field_errors[0], "error");
      } else if (err.response?.status === 401) {
        handleOpenToast("Unauthorized", "error");
      } else {
        handleOpenToast("Login Failed", "error");
      }
    }
  };
 
  Iif (isLoading) {
    return <Loading />;
  }
 
  return (
    <>
      <CustomButton
        onClick={handleOcta}
        className="rounded-full w-fit !border-gray-200 hover:!bg-gray-200 !text-black uppercase gap-2">
        <img src="/logo/okta-logo.svg" alt="Okta Logo" width={25} height={25} />
        <span>Sign in with Okta</span>
      </CustomButton>
 
      <Toast
        open={toastOpen}
        handleClose={handleCloseToast}
        message={toastMsg}
        severity={toastType}
        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
      />
    </>
  );
}
 
export default OctaSignIn;