added react-toastify and updated identity integration

master
Tudor Stanciu 2020-12-24 04:42:32 +02:00
parent 3fea7708c4
commit 80f9e63a9b
10 changed files with 74 additions and 25 deletions

10
package-lock.json generated
View File

@ -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",

View File

@ -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",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"axios": "^0.19.2",
"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-flags": "^0.1.18"
"react": "^17.0.1",
"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",

View File

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

View File

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

View File

@ -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}>
<Main />
</ApplicationDispatchContext.Provider>
</ApplicationStateContext.Provider>
<>
<ApplicationStateContext.Provider value={state}>
<ApplicationDispatchContext.Provider value={dispatchActions}>
<Main />
</ApplicationDispatchContext.Provider>
</ApplicationStateContext.Provider>
<ToastContainer
position="top-right"
transition={Slide}
autoClose={3000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
limit={5}
/>
</>
);
};

View File

@ -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 (

1
src/hooks/index.js Normal file
View File

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

View File

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

11
src/hooks/useToast.js Normal file
View File

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

View File

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