Handle success and error

Signed-off-by: HichamELBSI <elabbassih@gmail.com>
This commit is contained in:
HichamELBSI 2020-12-23 13:19:51 +01:00 committed by Convly
parent 2790aed2bd
commit c4f59a8db0
11 changed files with 134 additions and 9 deletions

View File

@ -10,6 +10,7 @@ import { FormattedMessage } from 'react-intl';
import { withRouter } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
import { get } from 'lodash';
import { auth } from 'strapi-helper-plugin';
import Wrapper from './components';
@ -30,7 +31,10 @@ const Logout = ({ history: { push } }) => {
const toggle = () => setIsOpen(prev => !prev);
const userInfo = auth.getUserInfo();
const displayName = userInfo.username || `${userInfo.firstname} ${userInfo.lastname}`;
// Ping @soupette 2 : I need you for this part of the code. I will probably need to get the user data from : /admin/users/me
const displayName = userInfo
? `${userInfo.firstname} ${userInfo.lastname}`
: get(userInfo, ['username'], '');
return (
<Wrapper>

View File

@ -17,13 +17,13 @@ import { Switch, Route } from 'react-router-dom';
import { connect } from 'react-redux';
import { bindActionCreators, compose } from 'redux';
import { LoadingIndicatorPage, auth, request } from 'strapi-helper-plugin';
import PrivateRoute from 'ee_else_ce/containers/PrivateRoute';
import GlobalStyle from '../../components/GlobalStyle';
import Admin from '../Admin';
import AuthPage from '../AuthPage';
import NotFoundPage from '../NotFoundPage';
// eslint-disable-next-line import/no-cycle
import NotificationProvider from '../NotificationProvider';
import PrivateRoute from '../PrivateRoute';
import Theme from '../Theme';
import { Content, Wrapper } from './components';
import { getDataSucceeded } from './actions';

View File

@ -0,0 +1,36 @@
/**
*
* PrivateRoute
* Higher Order Component that blocks navigation when the user is not logged in
* and redirect the user to login page
*
* Wrap your protected routes to secure your container
*/
import React, { memo } from 'react';
import { Redirect, Route } from 'react-router-dom';
import PropTypes from 'prop-types';
import { auth } from 'strapi-helper-plugin';
const BasePrivateRoute = ({ component: Component, path, ...rest }) => (
<Route
path={path}
render={props =>
auth.getToken() !== null ? (
<Component {...rest} {...props} />
) : (
<Redirect
to={{
pathname: '/auth/login',
}}
/>
)}
/>
);
BasePrivateRoute.propTypes = {
component: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
path: PropTypes.string.isRequired,
};
export default memo(BasePrivateRoute);

View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { useMemo } from 'react';
import { BackHeader, BaselineAlignment, auth } from 'strapi-helper-plugin';
import { useHistory } from 'react-router-dom';
import { get } from 'lodash';
@ -24,8 +24,16 @@ const ProfilePage = () => {
'lastname',
'username',
]);
const userInfos = auth.getUserInfo();
const headerLabel = userInfos.username || `${userInfos.firstname} ${userInfos.lastname}`;
const headerLabel = useMemo(() => {
const userInfos = auth.getUserInfo();
if (modifiedData) {
return modifiedData.username || `${modifiedData.firstname} ${modifiedData.lastname}`;
}
return userInfos.username || `${userInfos.firstname} ${userInfos.lastname}`;
}, [modifiedData]);
return (
<>

View File

@ -7,6 +7,7 @@
"Auth.form.button.login": "Log in",
"Auth.form.button.login.strapi": "LOG IN VIA STRAPI",
"Auth.form.button.login.providers.see-more": "See more",
"Auth.form.button.login.providers.error": "We cannot connect you through the selected provider.",
"Auth.form.button.register": "LET'S START",
"Auth.form.button.reset-password": "Change password",
"Auth.form.confirmPassword.label": "Confirmation Password",

View File

@ -56,7 +56,9 @@ const Login = loginProps => {
defaultMessage: 'See more',
})}
>
<Text>...</Text>
<Text fontWeight="bold" fontSize="lg">
...
</Text>
</ProviderButtonWrapper>
</ProviderLink>
<Tooltip id="see-more-tooltip" />

View File

@ -55,7 +55,7 @@ const Providers = () => {
</Padded>
<Button style={{ width: '100%' }} onClick={handleClick} type="submit" color="secondary">
{formatMessage({
id: `Auth.form.button.login.strapi`,
id: 'Auth.form.button.login.strapi',
defaultMessage: 'LOG IN VIA STRAPI',
})}
</Button>

View File

@ -0,0 +1,67 @@
import React, { memo } from 'react';
import { Redirect, Route, useRouteMatch } from 'react-router-dom';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import Cookies from 'js-cookie';
import { get } from 'lodash';
import { auth } from 'strapi-helper-plugin';
/* eslint-disable react/jsx-curly-newline */
const PrivateRoute = ({ component: Component, path, ...rest }) => {
const url = useRouteMatch('/auth/login/:authResponse');
const authResponse = get(url, ['params', 'authResponse'], null);
const { formatMessage } = useIntl();
if (authResponse === 'error') {
const errorMessage = formatMessage({
id: 'Auth.form.button.login.providers.error',
defaultMessage: 'We cannot connect you through the selected provider.',
});
return <Redirect to={`/auth/oops?info=${encodeURIComponent(errorMessage)}`} />;
}
if (authResponse === 'success' && !auth.getToken()) {
const jwtToken = Cookies.get('jwtToken');
if (jwtToken) {
auth.setToken(jwtToken, false);
// Ping @soupette 1 : As you can see here, I don't have any user info except the jwtToken
// so I will need to fetch /admin/users/me to setUserInfo (see ping number 2)
Cookies.remove('jwtToken');
return (
<Redirect
to={{
pathname: '/auth/login',
}}
/>
);
}
}
return (
<Route
path={path}
render={props =>
auth.getToken() !== null ? (
<Component {...rest} {...props} />
) : (
<Redirect
to={{
pathname: '/auth/login',
}}
/>
)
}
/>
);
};
PrivateRoute.propTypes = {
component: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
path: PropTypes.string.isRequired,
};
export default memo(PrivateRoute);

View File

@ -1,5 +1,5 @@
import { useReducer, useEffect } from 'react';
// import { request } from 'strapi-helper-plugin';
import { request } from 'strapi-helper-plugin';
import reducer, { initialState } from './reducer';
@ -12,11 +12,12 @@ const useAuthProviders = () => {
const fetchAuthProviders = async () => {
try {
// const { data } = await request('/admin/providers', { method: 'GET' });
const data = await request('/admin/providers', { method: 'GET' });
dispatch({
type: 'GET_DATA_SUCCEEDED',
data: [
...data,
{
displayName: 'OKTA',
uid: 'okta',

View File

@ -60,6 +60,7 @@
"immutable": "^3.8.2",
"invariant": "^2.2.4",
"is-wsl": "^2.0.0",
"js-cookie": "2.2.1",
"jsonwebtoken": "8.5.1",
"koa-compose": "4.1.0",
"koa-passport": "4.1.3",

View File

@ -11041,6 +11041,11 @@ js-beautify@^1.6.12:
mkdirp "^1.0.4"
nopt "^5.0.0"
js-cookie@2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"