@akemona-org/strapi-admin 3.7.0

package/admin/src/containers/AuthPage/components/ResetPassword/index.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { Padded } from '@buffetjs/core';
+import { get } from 'lodash';
+import PropTypes from 'prop-types';
+import { BaselineAlignment } from 'strapi-helper-plugin';
+import Button from '../../../../components/FullWidthButton';
+import AuthLink from '../AuthLink';
+import Input from '../Input';
+import Logo from '../Logo';
+import Section from '../Section';
+import Box from '../Box';
+
+const ResetPassword = ({ formErrors, modifiedData, onChange, onSubmit, requestError }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <>
+      <Section textAlign="center">
+        <Logo />
+      </Section>
+      <Section withBackground>
+        <BaselineAlignment top size="25px">
+          <Box errorMessage={get(requestError, 'errorMessage', null)}>
+            <form onSubmit={onSubmit}>
+              <Input
+                autoFocus
+                error={formErrors.password}
+                label="Auth.form.password.label"
+                name="password"
+                onChange={onChange}
+                type="password"
+                validations={{ required: true }}
+                value={modifiedData.password}
+              />
+              <Input
+                error={formErrors.confirmPassword}
+                label="Auth.form.confirmPassword.label"
+                name="confirmPassword"
+                onChange={onChange}
+                type="password"
+                validations={{ required: true }}
+                value={modifiedData.confirmPassword}
+              />
+              <BaselineAlignment top size="3px" />
+              <Padded top>
+                <Button type="submit" color="primary" textTransform="uppercase">
+                  {formatMessage({ id: 'Auth.form.button.reset-password' })}
+                </Button>
+              </Padded>
+            </form>
+          </Box>
+        </BaselineAlignment>
+      </Section>
+      <AuthLink label="Auth.link.ready" to="/auth/login" />
+    </>
+  );
+};
+
+ResetPassword.defaultProps = {
+  onSubmit: e => e.preventDefault(),
+  requestError: null,
+};
+
+ResetPassword.propTypes = {
+  formErrors: PropTypes.object.isRequired,
+  modifiedData: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func,
+  requestError: PropTypes.object,
+};
+
+export default ResetPassword;

package/admin/src/containers/AuthPage/components/Section/index.js

@@ -0,0 +1,22 @@
+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',
+};
+
+export default Section;

package/admin/src/containers/AuthPage/index.js

@@ -0,0 +1,321 @@
+import React, { useEffect, useReducer } from 'react';
+import axios from 'axios';
+import { camelCase, get, omit, upperFirst } from 'lodash';
+import { Redirect, useRouteMatch, useHistory } from 'react-router-dom';
+import { BaselineAlignment, auth, useQuery } from 'strapi-helper-plugin';
+import { Padded } from '@buffetjs/core';
+import PropTypes from 'prop-types';
+import forms from 'ee_else_ce/containers/AuthPage/utils/forms';
+
+import NavTopRightWrapper from '../../components/NavTopRightWrapper';
+import PageTitle from '../../components/PageTitle';
+import LocaleToggle from '../LocaleToggle';
+import checkFormValidity from '../../utils/checkFormValidity';
+import formatAPIErrors from '../../utils/formatAPIErrors';
+import init from './init';
+import { initialState, reducer } from './reducer';
+import useChangeLanguage from '../LanguageProvider/hooks/useChangeLanguage';
+
+const AuthPage = ({ hasAdmin, setHasAdmin }) => {
+  const { push } = useHistory();
+  const changeLocale = useChangeLanguage();
+  const {
+    params: { authType },
+  } = useRouteMatch('/auth/:authType');
+  const query = useQuery();
+  const registrationToken = query.get('registrationToken');
+  const { Component, endPoint, fieldsToDisable, fieldsToOmit, inputsPrefix, schema, ...rest } = get(
+    forms,
+    authType,
+    {}
+  );
+  const [{ formErrors, modifiedData, requestError }, dispatch] = useReducer(
+    reducer,
+    initialState,
+    init
+  );
+  const CancelToken = axios.CancelToken;
+  const source = CancelToken.source();
+
+  useEffect(() => {
+    // Cancel request on unmount
+    return () => {
+      source.cancel('Component unmounted');
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Reset the state on navigation change
+  useEffect(() => {
+    dispatch({
+      type: 'RESET_PROPS',
+    });
+  }, [authType]);
+
+  useEffect(() => {
+    if (authType === 'register') {
+      const getData = async () => {
+        try {
+          const {
+            data: { data },
+          } = await axios.get(
+            `${strapi.backendURL}/admin/registration-info?registrationToken=${registrationToken}`
+          );
+
+          if (data) {
+            dispatch({
+              type: 'SET_DATA',
+              data: { registrationToken, userInfo: data },
+            });
+          }
+        } catch (err) {
+          const errorMessage = get(err, ['response', 'data', 'message'], 'An error occurred');
+
+          strapi.notification.toggle({
+            type: 'warning',
+            message: errorMessage,
+          });
+
+          // Redirect to the oops page in case of an invalid token
+          // @alexandrebodin @JAB I am not sure it is the wanted behavior
+          push(`/auth/oops?info=${encodeURIComponent(errorMessage)}`);
+        }
+      };
+
+      getData();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [authType]);
+
+  const handleChange = ({ target: { name, value } }) => {
+    dispatch({
+      type: 'ON_CHANGE',
+      keys: name,
+      value,
+    });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    dispatch({
+      type: 'SET_ERRORS',
+      errors: {},
+    });
+
+    const errors = await checkFormValidity(modifiedData, schema);
+
+    dispatch({
+      type: 'SET_ERRORS',
+      errors: errors || {},
+    });
+
+    if (!errors) {
+      const body = omit(modifiedData, fieldsToOmit);
+      const requestURL = `/admin/${endPoint}`;
+
+      if (authType === 'login') {
+        await loginRequest(body, requestURL);
+      }
+
+      if (authType === 'register' || authType === 'register-admin') {
+        await registerRequest(body, requestURL);
+      }
+
+      if (authType === 'forgot-password') {
+        await forgotPasswordRequest(body, requestURL);
+      }
+
+      if (authType === 'reset-password') {
+        await resetPasswordRequest(body, requestURL);
+      }
+    }
+  };
+
+  const forgotPasswordRequest = async (body, requestURL) => {
+    try {
+      await axios({
+        method: 'POST',
+        url: `${strapi.backendURL}${requestURL}`,
+        data: body,
+        cancelToken: source.token,
+      });
+
+      push('/auth/forgot-password-success');
+    } catch (err) {
+      console.error(err);
+
+      strapi.notification.toggle({
+        type: 'warning',
+        message: { id: 'notification.error' },
+      });
+    }
+  };
+
+  const loginRequest = async (body, requestURL) => {
+    try {
+      const {
+        data: {
+          data: { token, user },
+        },
+      } = await axios({
+        method: 'POST',
+        url: `${strapi.backendURL}${requestURL}`,
+        data: body,
+        cancelToken: source.token,
+      });
+
+      if (user.preferedLanguage) {
+        changeLocale(user.preferedLanguage);
+      }
+
+      auth.setToken(token, modifiedData.rememberMe);
+      auth.setUserInfo(user, modifiedData.rememberMe);
+
+      push('/');
+    } catch (err) {
+      if (err.response) {
+        const errorMessage = get(err, ['response', 'data', 'message'], 'Something went wrong');
+        const errorStatus = get(err, ['response', 'data', 'statusCode'], 400);
+
+        if (camelCase(errorMessage).toLowerCase() === 'usernotactive') {
+          push('/auth/oops');
+
+          dispatch({
+            type: 'RESET_PROPS',
+          });
+
+          return;
+        }
+
+        dispatch({
+          type: 'SET_REQUEST_ERROR',
+          errorMessage,
+          errorStatus,
+        });
+      }
+    }
+  };
+
+  const registerRequest = async (body, requestURL) => {
+    try {
+      const {
+        data: {
+          data: { token, user },
+        },
+      } = await axios({
+        method: 'POST',
+        url: `${strapi.backendURL}${requestURL}`,
+        data: body,
+        cancelToken: source.token,
+      });
+
+      auth.setToken(token, false);
+      auth.setUserInfo(user, false);
+
+      if (
+        (authType === 'register' && modifiedData.userInfo.news === true) ||
+        (authType === 'register-admin' && modifiedData.news === true)
+      ) {
+        /*  axios({
+          method: 'POST',
+          url: 'https://analytics.strapi.io/register',
+          data: {
+            email: user.email,
+            username: user.firstname,
+          },
+        }); */
+      }
+      // Redirect to the homePage
+      setHasAdmin(true);
+      push('/');
+    } catch (err) {
+      if (err.response) {
+        const { data } = err.response;
+        const apiErrors = formatAPIErrors(data);
+
+        dispatch({
+          type: 'SET_ERRORS',
+          errors: apiErrors,
+        });
+      }
+    }
+  };
+
+  const resetPasswordRequest = async (body, requestURL) => {
+    try {
+      const {
+        data: {
+          data: { token, user },
+        },
+      } = await axios({
+        method: 'POST',
+        url: `${strapi.backendURL}${requestURL}`,
+        data: { ...body, resetPasswordToken: query.get('code') },
+        cancelToken: source.token,
+      });
+
+      auth.setToken(token, false);
+      auth.setUserInfo(user, false);
+
+      // Redirect to the homePage
+      push('/');
+    } catch (err) {
+      if (err.response) {
+        const errorMessage = get(err, ['response', 'data', 'message'], 'Something went wrong');
+        const errorStatus = get(err, ['response', 'data', 'statusCode'], 400);
+
+        dispatch({
+          type: 'SET_REQUEST_ERROR',
+          errorMessage,
+          errorStatus,
+        });
+      }
+    }
+  };
+
+  // Redirect the user to the login page if
+  // the endpoint does not exist or
+  // there is already an admin user oo
+  // the user is already logged in
+  if (!forms[authType] || (hasAdmin && authType === 'register-admin') || auth.getToken()) {
+    return <Redirect to="/" />;
+  }
+
+  // Redirect the user to the register-admin if it is the first user
+  if (!hasAdmin && authType !== 'register-admin') {
+    return <Redirect to="/auth/register-admin" />;
+  }
+
+  return (
+    <Padded bottom size="md">
+      <PageTitle title={upperFirst(authType)} />
+      <NavTopRightWrapper>
+        <LocaleToggle isLogged className="localeDropdownMenuNotLogged" />
+      </NavTopRightWrapper>
+      <BaselineAlignment top size="78px">
+        <Component
+          {...rest}
+          fieldsToDisable={fieldsToDisable}
+          formErrors={formErrors}
+          inputsPrefix={inputsPrefix}
+          modifiedData={modifiedData}
+          onChange={handleChange}
+          onSubmit={handleSubmit}
+          requestError={requestError}
+        />
+      </BaselineAlignment>
+    </Padded>
+  );
+};
+
+AuthPage.defaultProps = {
+  hasAdmin: false,
+};
+
+AuthPage.propTypes = {
+  hasAdmin: PropTypes.bool,
+  setHasAdmin: PropTypes.func.isRequired,
+};
+
+export default AuthPage;

package/admin/src/containers/AuthPage/init.js

@@ -0,0 +1,5 @@
+const init = initialState => {
+  return initialState;
+};
+
+export default init;

package/admin/src/containers/AuthPage/reducer.js

@@ -0,0 +1,41 @@
+import produce from 'immer';
+import { set } from 'lodash';
+/* eslint-disable consistent-return */
+
+const initialState = {
+  formErrors: {},
+  modifiedData: {},
+  requestError: null,
+};
+
+const reducer = (state, action) =>
+  produce(state, draftState => {
+    switch (action.type) {
+      case 'ON_CHANGE': {
+        set(draftState.modifiedData, action.keys.split('.'), action.value);
+        break;
+      }
+      case 'RESET_PROPS': {
+        return initialState;
+      }
+      case 'SET_DATA': {
+        draftState.modifiedData = action.data;
+        break;
+      }
+      case 'SET_ERRORS': {
+        draftState.formErrors = action.errors;
+        break;
+      }
+      case 'SET_REQUEST_ERROR': {
+        draftState.requestError = {
+          errorMessage: action.errorMessage,
+          errorStatus: action.errorStatus,
+        };
+        break;
+      }
+      default:
+        return draftState;
+    }
+  });
+
+export { initialState, reducer };

package/admin/src/containers/AuthPage/utils/forms.js

@@ -0,0 +1,124 @@
+import * as yup from 'yup';
+import { translatedErrors } from 'strapi-helper-plugin';
+import Login from 'ee_else_ce/containers/AuthPage/components/Login';
+import ForgotPassword from '../components/ForgotPassword';
+import ForgotPasswordSuccess from '../components/ForgotPasswordSuccess';
+import Oops from '../components/Oops';
+import Register from '../components/Register';
+import ResetPassword from '../components/ResetPassword';
+
+const forms = {
+  'forgot-password': {
+    Component: ForgotPassword,
+    endPoint: 'forgot-password',
+    fieldsToDisable: [],
+    fieldsToOmit: [],
+    schema: yup.object().shape({
+      email: yup
+        .string()
+        .email(translatedErrors.email)
+        .required(translatedErrors.required),
+    }),
+    inputsPrefix: '',
+  },
+  'forgot-password-success': {
+    Component: ForgotPasswordSuccess,
+    endPoint: '',
+    fieldsToDisable: [],
+    fieldsToOmit: [],
+    schema: null,
+    inputsPrefix: '',
+  },
+  login: {
+    Component: Login,
+    endPoint: 'login',
+    fieldsToDisable: [],
+    fieldsToOmit: ['rememberMe'],
+    schema: yup.object().shape({
+      email: yup
+        .string()
+        .email(translatedErrors.email)
+        .required(translatedErrors.required),
+      password: yup.string().required(translatedErrors.required),
+      rememberMe: yup.bool().nullable(),
+    }),
+    inputsPrefix: '',
+  },
+  oops: {
+    Component: Oops,
+    endPoint: null,
+    fieldsToDisable: [],
+    fieldsToOmit: [],
+    schema: null,
+    inputsPrefix: '',
+  },
+  register: {
+    Component: Register,
+    endPoint: 'register',
+    fieldsToDisable: ['email'],
+    fieldsToOmit: ['userInfo.confirmPassword', 'userInfo.news', 'userInfo.email'],
+    schema: yup.object().shape({
+      userInfo: yup.object().shape({
+        firstname: yup.string().required(translatedErrors.required),
+        lastname: yup.string().required(translatedErrors.required),
+        password: yup
+          .string()
+          .min(8, translatedErrors.minLength)
+          .matches(/[a-z]/, 'components.Input.error.contain.lowercase')
+          .matches(/[A-Z]/, 'components.Input.error.contain.uppercase')
+          .matches(/\d/, 'components.Input.error.contain.number')
+          .required(translatedErrors.required),
+        confirmPassword: yup
+          .string()
+          .oneOf([yup.ref('password'), null], 'components.Input.error.password.noMatch')
+          .required(translatedErrors.required),
+      }),
+      registrationToken: yup.string().required(translatedErrors.required),
+    }),
+    inputsPrefix: 'userInfo.',
+  },
+  'register-admin': {
+    Component: Register,
+    endPoint: 'register-admin',
+    noSignin: true,
+    fieldsToDisable: [],
+    fieldsToOmit: ['confirmPassword', 'news'],
+    schema: yup.object().shape({
+      firstname: yup.string().required(translatedErrors.required),
+      lastname: yup.string().required(translatedErrors.required),
+      password: yup
+        .string()
+        .min(8, translatedErrors.minLength)
+        .matches(/[a-z]/, 'components.Input.error.contain.lowercase')
+        .matches(/[A-Z]/, 'components.Input.error.contain.uppercase')
+        .matches(/\d/, 'components.Input.error.contain.number')
+        .required(translatedErrors.required),
+      confirmPassword: yup
+        .string()
+        .oneOf([yup.ref('password'), null], 'components.Input.error.password.noMatch')
+        .required(translatedErrors.required),
+    }),
+    inputsPrefix: '',
+  },
+  'reset-password': {
+    Component: ResetPassword,
+    endPoint: 'reset-password',
+    fieldsToDisable: [],
+    fieldsToOmit: ['confirmPassword'],
+    schema: yup.object().shape({
+      password: yup
+        .string()
+        .min(8, translatedErrors.minLength)
+        .matches(/[a-z]/, 'components.Input.error.contain.lowercase')
+        .matches(/[A-Z]/, 'components.Input.error.contain.uppercase')
+        .matches(/\d/, 'components.Input.error.contain.number')
+        .required(translatedErrors.required),
+      confirmPassword: yup
+        .string()
+        .oneOf([yup.ref('password'), null], 'components.Input.error.password.noMatch')
+        .required(translatedErrors.required),
+    }),
+  },
+};
+
+export default forms;

package/admin/src/containers/AuthPage/utils/index.js

@@ -0,0 +1,2 @@
+/* eslint-disable import/prefer-default-export */
+export { default as forms } from './forms';

package/admin/src/containers/HomePage/BlogPost.js

@@ -0,0 +1,48 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { LoadingBar } from 'strapi-helper-plugin';
+
+const BlogPost = ({ error, isFirst, isLoading, title, content, link }) => {
+  if (isLoading) {
+    return (
+      <>
+        <LoadingBar style={{ marginBottom: 13 }} />
+        <LoadingBar style={{ width: '40%', marginBottom: 31 }} />
+      </>
+    );
+  }
+
+  if (error) {
+    return null;
+  }
+
+  return (
+    <a
+      rel="noopener noreferrer"
+      target="_blank"
+      href={`https://strapi.akemona.com/blog/${link}`}
+      style={{ color: '#333740' }}
+    >
+      <h2>{title}</h2>
+      <p style={{ marginTop: 17, marginBottom: isFirst ? 32 : 10 }}>{content}</p>
+    </a>
+  );
+};
+
+BlogPost.defaultProps = {
+  content: null,
+  isFirst: false,
+  link: null,
+  title: null,
+};
+
+BlogPost.propTypes = {
+  content: PropTypes.string,
+  error: PropTypes.bool.isRequired,
+  isFirst: PropTypes.bool,
+  isLoading: PropTypes.bool.isRequired,
+  link: PropTypes.string,
+  title: PropTypes.string,
+};
+
+export default memo(BlogPost);

package/admin/src/containers/HomePage/SocialLink.js

@@ -0,0 +1,52 @@
+/**
+ *
+ * SocialLink
+ */
+
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+
+import Gh from '../../assets/images/social_gh.png';
+import Discord from '../../assets/images/social_discord.png';
+import Twitter from '../../assets/images/social_twitter.png';
+import Reddit from '../../assets/images/social_reddit.png';
+import Strapi from '../../assets/images/social_strapi.png';
+
+import { SocialLinkWrapper } from './components';
+
+function getSrc(name) {
+  switch (name) {
+    case 'GitHub':
+      return Gh;
+    case 'Reddit':
+      return Reddit;
+    case 'Discord':
+      return Discord;
+    case 'Twitter':
+      return Twitter;
+    case 'Blog':
+    case 'Forum':
+    case 'Careers':
+      return Strapi;
+    default:
+      return Strapi;
+  }
+}
+
+const SocialLink = ({ link, name }) => {
+  return (
+    <SocialLinkWrapper className="col-6">
+      <a href={link} target="_blank" rel="noopener noreferrer">
+        <img src={getSrc(name)} alt={name} />
+        <span>{name}</span>
+      </a>
+    </SocialLinkWrapper>
+  );
+};
+
+SocialLink.propTypes = {
+  link: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+};
+
+export default memo(SocialLink);