From c4f59a8db05b72fbe06fd24a4b558f643b775be0 Mon Sep 17 00:00:00 2001 From: HichamELBSI Date: Wed, 23 Dec 2020 13:19:51 +0100 Subject: [PATCH] Handle success and error Signed-off-by: HichamELBSI --- .../src/containers/Admin/Logout/index.js | 6 +- .../admin/src/containers/App/index.js | 2 +- .../PrivateRoute/BasePrivateRoute.js | 36 ++++++++++ .../admin/src/containers/ProfilePage/index.js | 14 +++- .../admin/src/translations/en.json | 1 + .../AuthPage/components/Login/index.js | 4 +- .../AuthPage/components/Providers/index.js | 2 +- .../ee/admin/containers/PrivateRoute/index.js | 67 +++++++++++++++++++ .../ee/admin/hooks/useAuthProviders/index.js | 5 +- packages/strapi-admin/package.json | 1 + yarn.lock | 5 ++ 11 files changed, 134 insertions(+), 9 deletions(-) create mode 100644 packages/strapi-admin/admin/src/containers/PrivateRoute/BasePrivateRoute.js create mode 100644 packages/strapi-admin/ee/admin/containers/PrivateRoute/index.js diff --git a/packages/strapi-admin/admin/src/containers/Admin/Logout/index.js b/packages/strapi-admin/admin/src/containers/Admin/Logout/index.js index 181c5b0ade..de7de627e4 100644 --- a/packages/strapi-admin/admin/src/containers/Admin/Logout/index.js +++ b/packages/strapi-admin/admin/src/containers/Admin/Logout/index.js @@ -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 ( diff --git a/packages/strapi-admin/admin/src/containers/App/index.js b/packages/strapi-admin/admin/src/containers/App/index.js index 69af4cc365..5c4a4efa16 100644 --- a/packages/strapi-admin/admin/src/containers/App/index.js +++ b/packages/strapi-admin/admin/src/containers/App/index.js @@ -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'; diff --git a/packages/strapi-admin/admin/src/containers/PrivateRoute/BasePrivateRoute.js b/packages/strapi-admin/admin/src/containers/PrivateRoute/BasePrivateRoute.js new file mode 100644 index 0000000000..b6190a695c --- /dev/null +++ b/packages/strapi-admin/admin/src/containers/PrivateRoute/BasePrivateRoute.js @@ -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 }) => ( + + auth.getToken() !== null ? ( + + ) : ( + + )} + /> +); + +BasePrivateRoute.propTypes = { + component: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired, + path: PropTypes.string.isRequired, +}; + +export default memo(BasePrivateRoute); diff --git a/packages/strapi-admin/admin/src/containers/ProfilePage/index.js b/packages/strapi-admin/admin/src/containers/ProfilePage/index.js index c438011365..727072313c 100644 --- a/packages/strapi-admin/admin/src/containers/ProfilePage/index.js +++ b/packages/strapi-admin/admin/src/containers/ProfilePage/index.js @@ -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 ( <> diff --git a/packages/strapi-admin/admin/src/translations/en.json b/packages/strapi-admin/admin/src/translations/en.json index b2158ef59a..d900810931 100644 --- a/packages/strapi-admin/admin/src/translations/en.json +++ b/packages/strapi-admin/admin/src/translations/en.json @@ -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", diff --git a/packages/strapi-admin/ee/admin/containers/AuthPage/components/Login/index.js b/packages/strapi-admin/ee/admin/containers/AuthPage/components/Login/index.js index 7d3148203c..dc0e755426 100644 --- a/packages/strapi-admin/ee/admin/containers/AuthPage/components/Login/index.js +++ b/packages/strapi-admin/ee/admin/containers/AuthPage/components/Login/index.js @@ -56,7 +56,9 @@ const Login = loginProps => { defaultMessage: 'See more', })} > - ... + + ... + diff --git a/packages/strapi-admin/ee/admin/containers/AuthPage/components/Providers/index.js b/packages/strapi-admin/ee/admin/containers/AuthPage/components/Providers/index.js index 5321fb60ec..e02ff53893 100644 --- a/packages/strapi-admin/ee/admin/containers/AuthPage/components/Providers/index.js +++ b/packages/strapi-admin/ee/admin/containers/AuthPage/components/Providers/index.js @@ -55,7 +55,7 @@ const Providers = () => { diff --git a/packages/strapi-admin/ee/admin/containers/PrivateRoute/index.js b/packages/strapi-admin/ee/admin/containers/PrivateRoute/index.js new file mode 100644 index 0000000000..5c3b5c204e --- /dev/null +++ b/packages/strapi-admin/ee/admin/containers/PrivateRoute/index.js @@ -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 ; + } + + 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 ( + + ); + } + } + + return ( + + auth.getToken() !== null ? ( + + ) : ( + + ) + } + /> + ); +}; + +PrivateRoute.propTypes = { + component: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired, + path: PropTypes.string.isRequired, +}; + +export default memo(PrivateRoute); diff --git a/packages/strapi-admin/ee/admin/hooks/useAuthProviders/index.js b/packages/strapi-admin/ee/admin/hooks/useAuthProviders/index.js index 76022a0318..08518b08b3 100644 --- a/packages/strapi-admin/ee/admin/hooks/useAuthProviders/index.js +++ b/packages/strapi-admin/ee/admin/hooks/useAuthProviders/index.js @@ -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', diff --git a/packages/strapi-admin/package.json b/packages/strapi-admin/package.json index 5adf196095..30b6262683 100644 --- a/packages/strapi-admin/package.json +++ b/packages/strapi-admin/package.json @@ -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", diff --git a/yarn.lock b/yarn.lock index fa5538d0d5..23909aea4a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"