Handle success and error

Signed-off-by: HichamELBSI <elabbassih@gmail.com>

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

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';

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 }) => (
+  <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);

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

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

packages/strapi-admin/ee/admin/containers/AuthPage/components/Login/index.js

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

packages/strapi-admin/ee/admin/containers/AuthPage/components/Providers/index.js

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

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 <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);

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',

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

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"