added react-toastify and updated identity integration

package-lock.json

@@ -12803,6 +12803,16 @@
         "workbox-webpack-plugin": "5.1.4"
       }
     },
+    "react-toastify": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-6.2.0.tgz",
+      "integrity": "sha512-XpjFrcBhQ0/nBOL4syqgP/TywFnOyxmstYLWgSQWcj39qpp+WU4vPt3C/ayIDx7RFyxRWfzWTdR2qOcDGo7G0w==",
+      "requires": {
+        "clsx": "^1.1.1",
+        "prop-types": "^15.7.2",
+        "react-transition-group": "^4.4.1"
+      }
+    },
     "react-transition-group": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",

package.json

@@ -8,17 +8,18 @@
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^12.5.0",
-    "react": "^17.0.1",
+    "axios": "^0.19.2",
-    "react-dom": "^17.0.1",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.1",
     "i18next": "^19.4.4",
     "i18next-browser-languagedetector": "^4.1.1",
     "i18next-http-backend": "^1.0.10",
-    "react-i18next": "^11.4.0",
     "moment": "^2.25.3",
-    "axios": "^0.19.2",
+    "react": "^17.0.1",
-    "react-flags": "^0.1.18"
+    "react-dom": "^17.0.1",
+    "react-flags": "^0.1.18",
+    "react-i18next": "^11.4.0",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "4.0.1",
+    "react-toastify": "^6.2.0"
   },
   "scripts": {
     "start": "react-scripts start",

public/locales/en/translations.json

@@ -20,6 +20,7 @@
   "Login": {
     "Username": "Username",
     "Password": "Password",
-    "Label": "Login"
+    "Label": "Login",
+    "IncorrectCredentials": "Incorrect credentials."
   }
 }

public/locales/ro/translations.json

@@ -11,6 +11,7 @@
   "Login": {
     "Username": "Utilizator",
     "Password": "Parolă",
-    "Label": "Autentificare"
+    "Label": "Autentificare",
+    "IncorrectCredentials": "Credențiale incorecte."
   }
 }

src/components/App.js

@@ -9,6 +9,8 @@ import {
   ApplicationStateContext,
   ApplicationDispatchContext
 } from "../state/ApplicationContexts";
+import { ToastContainer, Slide } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 const App = () => {
   //il fac pt test dar e gresit. daca va fi un singur state se va redesena toata aplicatia de fiecare data.
@@ -19,11 +21,26 @@ const App = () => {
   ]);
 
   return (
-    <ApplicationStateContext.Provider value={state}>
+    <>
-      <ApplicationDispatchContext.Provider value={dispatchActions}>
+      <ApplicationStateContext.Provider value={state}>
-        <Main />
+        <ApplicationDispatchContext.Provider value={dispatchActions}>
-      </ApplicationDispatchContext.Provider>
+          <Main />
-    </ApplicationStateContext.Provider>
+        </ApplicationDispatchContext.Provider>
+      </ApplicationStateContext.Provider>
+      <ToastContainer
+        position="top-right"
+        transition={Slide}
+        autoClose={3000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        limit={5}
+      />
+    </>
   );
 };
 

src/features/login/components/LoginContainer.js

@@ -5,10 +5,14 @@ import {
   ApplicationStateContext,
   ApplicationDispatchContext
 } from "../../../state/ApplicationContexts";
+import { useToast } from "../../../hooks";
+import { useTranslation } from "react-i18next";
 
 const LoginContainer = () => {
   const state = useContext(ApplicationStateContext);
   const dispatchActions = useContext(ApplicationDispatchContext);
+  const { error } = useToast();
+  const { t } = useTranslation();
 
   const handleChange = prop => event => {
     dispatchActions.onCredentialsChange(prop, event.target.value);
@@ -16,7 +20,15 @@ const LoginContainer = () => {
 
   const handleLogin = async () => {
     const { userName, password } = state.credentials;
-    await authenticate(userName, password);
+
+    try {
+      const response = await authenticate(userName, password);
+      if (response.status === "BAD_CREDENTIALS") {
+        error(t("Login.IncorrectCredentials"));
+      }
+    } catch (err) {
+      error(err.message);
+    }
   };
 
   return (

src/hooks/index.js

@@ -0,0 +1 @@
+export { useToast } from "./useToast";

src/hooks/useAuthorizationToken.js

@@ -1,7 +0,0 @@
-import { useContext } from "react";
-import { ApplicationStateContext } from "../state/ApplicationContexts";
-
-export const useAuthorizationToken = () => {
-  const state = useContext(ApplicationStateContext);
-  return state.security.authorization.token;
-};

src/hooks/useToast.js

@@ -0,0 +1,11 @@
+import { toast } from "react-toastify";
+
+export const useToast = () => {
+  const info = message => toast.info(message);
+  const success = message => toast.success(message);
+  const warning = message => toast.warning(message);
+  const error = message => toast.error(message);
+  const dark = message => toast.dark(message);
+
+  return { info, success, warning, error, dark };
+};

src/utils/identity.js

@@ -14,10 +14,12 @@ const authenticate = async (username, password) => {
     method: "post"
   };
 
-  const token = await request(url, options);
+  const response = await request(url, options);
-  setItem(storageKeys.TOKEN, token);
+  if (response.status === "SUCCESS") {
+    setItem(storageKeys.TOKEN, response.token);
+  }
 
-  return token;
+  return response;
 };
 
 export { storageKeys, authenticate };