Add renew token and fix design

Signed-off-by: soupette <cyril.lpz@gmail.com>

packages/strapi-admin/admin/src/app.js

@@ -130,6 +130,15 @@ const unlockApp = () => {
   dispatch(unfreezeApp());
 };
 
+const lockAppWithOverlay = () => {
+  const overlayblockerParams = {
+    children: <div />,
+    noGradient: true,
+  };
+
+  lockApp(overlayblockerParams);
+};
+
 window.strapi = Object.assign(window.strapi || {}, {
   node: MODE || 'host',
   env: NODE_ENV,
@@ -165,6 +174,7 @@ window.strapi = Object.assign(window.strapi || {}, {
     window.navigator.userLanguage ||
     'en',
   lockApp,
+  lockAppWithOverlay,
   unlockApp,
   injectReducer,
   injectSaga,

packages/strapi-admin/admin/src/containers/App/index.js

@@ -14,11 +14,9 @@
 import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Switch, Route } from 'react-router-dom';
-
 import { connect } from 'react-redux';
 import { bindActionCreators, compose } from 'redux';
-import { LoadingIndicatorPage, request } from 'strapi-helper-plugin';
+import { LoadingIndicatorPage, auth, request } from 'strapi-helper-plugin';
-
 import GlobalStyle from '../../components/GlobalStyle';
 import Admin from '../Admin';
 import AuthPage from '../AuthPage';
@@ -27,9 +25,7 @@ import NotFoundPage from '../NotFoundPage';
 import NotificationProvider from '../NotificationProvider';
 import PrivateRoute from '../PrivateRoute';
 import Theme from '../Theme';
-
 import { Content, Wrapper } from './components';
-
 import { getDataSucceeded } from './actions';
 
 function App(props) {
@@ -39,6 +35,24 @@ function App(props) {
 
   useEffect(() => {
     const getData = async () => {
+      const currentToken = auth.getToken();
+
+      if (currentToken) {
+        try {
+          const {
+            data: { token },
+          } = await request('/admin/renew-token', {
+            method: 'POST',
+            body: { token: currentToken },
+          });
+          auth.updateToken(token);
+        } catch (err) {
+          // Refresh app
+          auth.clearAppStorage();
+          window.location.reload();
+        }
+      }
+
       try {
         const requestURL = '/users-permissions/init';
 

packages/strapi-admin/admin/src/containers/AuthPage/CustomLabel.js

@@ -1,10 +1,9 @@
+// TODO DELETE THIS FILE WHEN AUTH FINISHED
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 
-const CustomLabel = ({ id, values }) => (
+const CustomLabel = ({ id, values }) => <FormattedMessage id={id} values={values} />;
-  <FormattedMessage id={id} values={values} />
-);
 
 CustomLabel.propTypes = {
   id: PropTypes.string.isRequired,

packages/strapi-admin/admin/src/containers/AuthPage/Input.js

@@ -1,3 +1,4 @@
+// TODO DELETE THIS FILE WHEN AUTH FINISHED
 import React, { memo } from 'react';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';

packages/strapi-admin/admin/src/containers/AuthPage/Wrapper.js

@@ -1,3 +1,4 @@
+// TODO DELETE THIS FILE WHEN AUTH FINISHED
 import styled from 'styled-components';
 // import Background from '../../assets/images/background_empty.svg';
 

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

@@ -18,7 +18,7 @@ const Login = ({ formErrors, modifiedData, onChange, onSubmit, requestError }) =
       <Section textAlign="center">
         <Logo />
       </Section>
-      <Section>
+      <Section withBackground>
         <Padded top size="24px">
           <Box errorMessage={get(requestError, 'errorMessage', null)}>
             <form onSubmit={onSubmit}>

packages/strapi-admin/admin/src/containers/AuthPage/components/Section/index.js

@@ -1,10 +1,21 @@
 import styled from 'styled-components';
+import Background from '../../../../assets/images/background_empty.svg';
+
+/* eslint-disable indent */
 
 const Section = styled.section`
   text-align: ${({ textAlign }) => textAlign};
+  ${({ withBackground }) =>
+    withBackground &&
+    `
+    background-image: url(${Background});
+    background-position-x: center;
+    background-position-Y: center;
+    `}
 `;
 
 Section.defaultProps = {
+  withBackground: false,
   textAlign: 'initial',
 };
 

packages/strapi-admin/admin/src/containers/AuthPage/forms.js

@@ -1,3 +1,4 @@
+// TODO DELETE THIS FILE WHEN AUTH FINISHED
 import * as yup from 'yup';
 import { translatedErrors } from 'strapi-helper-plugin';
 

packages/strapi-admin/admin/src/containers/AuthPage/index.js

@@ -2,19 +2,8 @@ import React, { useEffect, useReducer } from 'react';
 import { Padded } from '@buffetjs/core';
 import axios from 'axios';
 // import PropTypes from 'prop-types';
-import {
+import { get, omit, upperFirst } from 'lodash';
-  get,
+import { Redirect, useRouteMatch, useHistory } from 'react-router-dom';
-  // isEmpty,
-  omit,
-  // set,
-  upperFirst,
-} from 'lodash';
-import {
-  // Link,
-  Redirect,
-  useRouteMatch,
-  useHistory,
-} from 'react-router-dom';
 import { auth } from 'strapi-helper-plugin';
 import NavTopRightWrapper from '../../components/NavTopRightWrapper';
 import PageTitle from '../../components/PageTitle';
@@ -86,7 +75,6 @@ const AuthPage = () => {
         });
 
         // TODO register and other views logic
-        console.log(token);
         auth.setToken(token, modifiedData.rememberMe);
         auth.setUserInfo(user, modifiedData.rememberMe);
 
@@ -134,6 +122,8 @@ const AuthPage = () => {
 
 export default AuthPage;
 
+// TODO Remove comments when auth feature is finished
+
 // import React, { memo, useEffect, useReducer, useRef } from 'react';
 // import PropTypes from 'prop-types';
 // import { get, isEmpty, omit, set, upperFirst } from 'lodash';

packages/strapi-admin/admin/src/containers/AuthPage/utils/formatErrorFromRequest.js

@@ -1,3 +1,4 @@
+// TODO DELETE THIS FILE WHEN AUTH FINISHED
 import { get } from 'lodash';
 
 const formatErrorFromRequest = errorResponse => {

packages/strapi-helper-plugin/lib/src/utils/auth.js

@@ -85,6 +85,12 @@ const auth = {
   setUserInfo(value = '', isLocalStorage = false, userInfo = USER_INFO) {
     return auth.set(value, userInfo, isLocalStorage);
   },
+
+  updateToken(value = '') {
+    const isLocalStorage = localStorage && localStorage.getItem(TOKEN_KEY);
+
+    return auth.setToken(value, isLocalStorage);
+  },
 };
 
 export default auth;