@akemona-org/strapi-admin 3.7.0

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { Padded } from '@buffetjs/core';
+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 ForgotPassword = ({ formErrors, modifiedData, onChange, onSubmit }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <>
+      <Section textAlign="center">
+        <Logo />
+      </Section>
+      <Section withBackground>
+        {/* FIXME IN BUFFET.JS */}
+        <BaselineAlignment top size="20px">
+          <Padded top size="xs">
+            <Box>
+              <form onSubmit={onSubmit}>
+                <Input
+                  autoFocus
+                  error={formErrors.email}
+                  label="Auth.form.email.label"
+                  name="email"
+                  onChange={onChange}
+                  placeholder="Auth.form.email.placeholder"
+                  type="email"
+                  validations={{ required: true }}
+                  value={modifiedData.email}
+                />
+                <BaselineAlignment top size="3px" />
+                <Padded top>
+                  <Button type="submit" color="primary" textTransform="uppercase">
+                    {formatMessage({ id: 'Auth.form.button.forgot-password' })}
+                  </Button>
+                </Padded>
+              </form>
+            </Box>
+          </Padded>
+        </BaselineAlignment>
+        <AuthLink label="Auth.link.ready" to="/auth/login" />
+      </Section>
+    </>
+  );
+};
+
+ForgotPassword.defaultProps = {
+  onSubmit: e => e.preventDefault(),
+};
+
+ForgotPassword.propTypes = {
+  formErrors: PropTypes.object.isRequired,
+  modifiedData: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func,
+};
+
+export default ForgotPassword;

package/admin/src/containers/AuthPage/components/ForgotPasswordSuccess/Envelope.js

@@ -0,0 +1,20 @@
+/* eslint-disable jsx-a11y/accessible-emoji */
+import React from 'react';
+
+const Envelope = () => (
+  <svg width="71" height="78" xmlns="http://www.w3.org/2000/svg">
+    <text
+      transform="rotate(-20 34.095 544.73)"
+      fill="#9EA7B8"
+      fillRule="evenodd"
+      fontFamily="AppleColorEmoji, Apple Color Emoji"
+      fontSize="60"
+    >
+      <tspan x="178" y="93">
+        ✉️
+      </tspan>
+    </text>
+  </svg>
+);
+
+export default Envelope;

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Padded, Text } from '@buffetjs/core';
+import { useIntl } from 'react-intl';
+import { useHistory } from 'react-router-dom';
+import { BaselineAlignment } from 'strapi-helper-plugin';
+import Button from '../../../../components/FullWidthButton';
+import Box from '../Box';
+import Logo from '../Logo';
+import Section from '../Section';
+import Envelope from './Envelope';
+
+const ForgotPasswordSuccess = () => {
+  const { formatMessage } = useIntl();
+  const { push } = useHistory();
+
+  const handleClick = () => {
+    push('/auth/login');
+  };
+
+  return (
+    <>
+      <Section textAlign="center">
+        <Logo />
+      </Section>
+      <Section withBackground textAlign="center">
+        <Padded top size="smd">
+          <Padded top size="xs">
+            <Box withoutError>
+              <BaselineAlignment top size="3px">
+                <Envelope />
+              </BaselineAlignment>
+
+              <Padded top size="smd">
+                <Text fontWeight="bold" lineHeight="24px" fontSize="xl">
+                  {formatMessage({ id: 'app.containers.AuthPage.ForgotPasswordSuccess.title' })}
+                </Text>
+              </Padded>
+
+              <Padded right left size="lg">
+                <Padded top size="smd">
+                  <Text fontSize="md" style={{ textAlign: 'center' }} lineHeight="18px">
+                    {formatMessage({
+                      id: 'app.containers.AuthPage.ForgotPasswordSuccess.text.email',
+                    })}
+                  </Text>
+
+                  <Padded top>
+                    <BaselineAlignment top size="7px">
+                      <Text fontSize="md" style={{ textAlign: 'center' }} lineHeight="18px">
+                        {formatMessage({
+                          id: 'app.containers.AuthPage.ForgotPasswordSuccess.text.contact-admin',
+                        })}
+                      </Text>
+                    </BaselineAlignment>
+                  </Padded>
+                </Padded>
+              </Padded>
+
+              <Padded top size="md">
+                <Button
+                  type="button"
+                  color="primary"
+                  textTransform="uppercase"
+                  onClick={handleClick}
+                >
+                  {formatMessage({ id: 'Auth.link.signin' })}
+                </Button>
+              </Padded>
+            </Box>
+          </Padded>
+        </Padded>
+      </Section>
+    </>
+  );
+};
+
+export default ForgotPasswordSuccess;

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Inputs } from '@buffetjs/custom';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+
+const Input = ({ error, label, placeholder, ...rest }) => {
+  const { formatMessage } = useIntl();
+  const labelMessage = formatMessage({ id: label });
+  const placeholderMessage = placeholder ? formatMessage({ id: placeholder }) : '';
+  let errorMessage = error;
+
+  if (error) {
+    errorMessage = formatMessage(error);
+  }
+
+  return (
+    <Inputs {...rest} error={errorMessage} label={labelMessage} placeholder={placeholderMessage} />
+  );
+};
+
+Input.defaultProps = {
+  error: null,
+  placeholder: null,
+};
+
+Input.propTypes = {
+  error: PropTypes.object,
+  label: PropTypes.string.isRequired,
+  placeholder: PropTypes.string,
+};
+
+export default Input;

package/admin/src/containers/AuthPage/components/Login/BaseLogin.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import { Checkbox } from '@buffetjs/core';
+import { useIntl } from 'react-intl';
+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 Box from '../Box';
+import Input from '../Input';
+import Logo from '../Logo';
+import Section from '../Section';
+
+const Login = ({ children, 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.email}
+                label="Auth.form.email.label"
+                name="email"
+                onChange={onChange}
+                placeholder="Auth.form.email.placeholder"
+                type="email"
+                validations={{ required: true }}
+                value={modifiedData.email}
+              />
+              <Input
+                error={formErrors.password}
+                label="Auth.form.password.label"
+                name="password"
+                onChange={onChange}
+                type="password"
+                validations={{ required: true }}
+                value={modifiedData.password}
+              />
+              <Checkbox
+                type="checkbox"
+                message={formatMessage({ id: 'Auth.form.rememberMe.label' })}
+                name="rememberMe"
+                onChange={onChange}
+                value={modifiedData.rememberMe}
+              />
+              <BaselineAlignment top size="27px">
+                <Button type="submit" color="primary" textTransform="uppercase">
+                  {formatMessage({ id: 'Auth.form.button.login' })}
+                </Button>
+              </BaselineAlignment>
+            </form>
+            {children}
+          </Box>
+        </BaselineAlignment>
+      </Section>
+      <AuthLink label="Auth.link.forgot-password" to="/auth/forgot-password" />
+    </>
+  );
+};
+
+Login.defaultProps = {
+  children: null,
+  onSubmit: e => e.preventDefault(),
+  requestError: null,
+};
+
+Login.propTypes = {
+  children: PropTypes.node,
+  formErrors: PropTypes.object.isRequired,
+  modifiedData: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func,
+  requestError: PropTypes.object,
+};
+
+export default Login;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import BaseLogin from './BaseLogin';
+
+const Login = loginProps => {
+  return <BaseLogin {...loginProps} />;
+};
+
+Login.defaultProps = {
+  onSubmit: e => e.preventDefault(),
+  requestError: null,
+};
+
+Login.propTypes = {
+  formErrors: PropTypes.object.isRequired,
+  modifiedData: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func,
+  requestError: PropTypes.object,
+};
+
+export default Login;

package/admin/src/containers/AuthPage/components/Logo/Img.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const Img = styled.img`
+  height: 40px;
+`;
+
+export default Img;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import LogoStrapi from '../../../../assets/images/logo_strapi.png';
+import Img from './Img';
+
+const Logo = () => <Img src={LogoStrapi} alt="strapi-logo" />;
+
+export default Logo;

package/admin/src/containers/AuthPage/components/Oops/Img.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const Img = styled.img`
+  max-height: 77px;
+`;
+
+export default Img;

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Text, Padded } from '@buffetjs/core';
+import { useHistory } from 'react-router-dom';
+import { useIntl } from 'react-intl';
+import { BaselineAlignment, useQuery } from 'strapi-helper-plugin';
+import Button from '../../../../components/FullWidthButton';
+import OopsLogo from '../../../../assets/images/oops.png';
+import Box from '../Box';
+import Logo from '../Logo';
+import Section from '../Section';
+import Img from './Img';
+
+const Oops = () => {
+  const { push } = useHistory();
+  const { formatMessage } = useIntl();
+  const query = useQuery();
+
+  const handleClick = () => {
+    push('/auth/login');
+  };
+
+  const message = query.get('info') || formatMessage({ id: 'Auth.components.Oops.text' });
+
+  return (
+    <>
+      <Section textAlign="center">
+        <Logo />
+      </Section>
+      <Section withBackground textAlign="center">
+        <BaselineAlignment top size="25px">
+          <Box withoutError>
+            <Padded top>
+              <Padded top size="xs">
+                <Img src={OopsLogo} alt="oops" />
+              </Padded>
+            </Padded>
+            {/* FIXME IN BUFFET.JS */}
+            <BaselineAlignment top size="20px">
+              <Padded top size="xs">
+                <Text fontSize="xl" fontWeight="bold">
+                  Oops...
+                </Text>
+              </Padded>
+            </BaselineAlignment>
+            <Padded top size="xs">
+              <Padded top size="sm">
+                <BaselineAlignment top size="3px" />
+                <Text fontSize="md">{message}</Text>
+              </Padded>
+            </Padded>
+            <Padded top size="md">
+              <Button type="button" color="primary" textTransform="uppercase" onClick={handleClick}>
+                {formatMessage({ id: 'Auth.link.signin' })}
+              </Button>
+            </Padded>
+          </Box>
+        </BaselineAlignment>
+      </Section>
+    </>
+  );
+};
+
+export default Oops;

package/admin/src/containers/AuthPage/components/Register/CustomLabel.js

@@ -0,0 +1,28 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { Text } from '@buffetjs/core';
+import { useIntl } from 'react-intl';
+
+const CustomLabel = ({ id, onClick, values }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Text
+      as="span"
+      fontWeight="regular"
+      lineHeight="18px"
+      onClick={onClick}
+      style={{ cursor: 'pointer' }}
+    >
+      {formatMessage({ id }, values)}
+    </Text>
+  );
+};
+
+CustomLabel.propTypes = {
+  id: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+  values: PropTypes.object.isRequired,
+};
+
+export default memo(CustomLabel);

package/admin/src/containers/AuthPage/components/Register/InputWrapper.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const InputWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+export default InputWrapper;

package/admin/src/containers/AuthPage/components/Register/Span.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+import { Text } from '@buffetjs/core';
+
+const Span = styled(Text)`
+  color: #0097f7;
+  cursor: pointer;
+`;
+
+Span.defaultProps = {
+  as: 'span',
+};
+
+export default Span;

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

@@ -0,0 +1,173 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import React from 'react';
+import { Checkbox, Flex, Padded, Text } from '@buffetjs/core';
+import { useIntl, FormattedMessage } from 'react-intl';
+import { get } from 'lodash';
+import PropTypes from 'prop-types';
+import Button from '../../../../components/FullWidthButton';
+import AuthLink from '../AuthLink';
+import Input from '../Input';
+import Logo from '../Logo';
+import Section from '../Section';
+import CustomLabel from './CustomLabel';
+import Box from '../Box';
+import InputWrapper from './InputWrapper';
+import Span from './Span';
+
+const Register = ({
+  fieldsToDisable,
+  formErrors,
+  inputsPrefix,
+  modifiedData,
+  noSignin,
+  onChange,
+  onSubmit,
+  requestError,
+}) => {
+  const { formatMessage } = useIntl();
+
+  const handleClick = (e, to) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const win = window.open(`https://strapi.akemona.com/${to}`, '_blank');
+    win.focus();
+  };
+
+  const terms = (
+    <FormattedMessage id="Auth.privacy-policy-agreement.terms" key="1">
+      {content => <Span onClick={e => handleClick(e, 'terms')}>{content}</Span>}
+    </FormattedMessage>
+  );
+  const policy = (
+    <FormattedMessage id="Auth.privacy-policy-agreement.policy" key="2">
+      {content => <Span onClick={e => handleClick(e, 'privacy')}>{content}</Span>}
+    </FormattedMessage>
+  );
+
+  return (
+    <>
+      <Section textAlign="center">
+        <Logo />
+      </Section>
+      <Section withBackground>
+        <Padded top size="25px">
+          <Box errorMessage={get(requestError, 'errorMessage', null)}>
+            <form onSubmit={onSubmit}>
+              <InputWrapper>
+                <Input
+                  autoFocus
+                  error={formErrors[`${inputsPrefix}firstname`]}
+                  label="Auth.form.firstname.label"
+                  name={`${inputsPrefix}firstname`}
+                  onChange={onChange}
+                  placeholder="Auth.form.firstname.placeholder"
+                  type="text"
+                  validations={{ required: true }}
+                  value={get(modifiedData, `${inputsPrefix}firstname`, '')}
+                />
+                <Input
+                  error={formErrors[`${inputsPrefix}lastname`]}
+                  label="Auth.form.lastname.label"
+                  name={`${inputsPrefix}lastname`}
+                  onChange={onChange}
+                  placeholder="Auth.form.lastname.placeholder"
+                  type="text"
+                  validations={{ required: true }}
+                  value={get(modifiedData, `${inputsPrefix}lastname`, '')}
+                />
+              </InputWrapper>
+              <Input
+                error={formErrors[`${inputsPrefix}email`]}
+                disabled={fieldsToDisable.includes('email')}
+                label="Auth.form.email.label"
+                name={`${inputsPrefix}email`}
+                onChange={onChange}
+                placeholder="Auth.form.email.placeholder"
+                type="email"
+                validations={{ required: true }}
+                value={get(modifiedData, `${inputsPrefix}email`, '')}
+              />
+              <Input
+                error={formErrors[`${inputsPrefix}password`]}
+                label="Auth.form.password.label"
+                name={`${inputsPrefix}password`}
+                onChange={onChange}
+                type="password"
+                validations={{ required: true }}
+                value={get(modifiedData, `${inputsPrefix}password`, '')}
+              />
+              <Input
+                error={formErrors[`${inputsPrefix}confirmPassword`]}
+                label="Auth.form.confirmPassword.label"
+                name={`${inputsPrefix}confirmPassword`}
+                onChange={onChange}
+                type="password"
+                validations={{ required: true }}
+                value={get(modifiedData, `${inputsPrefix}confirmPassword`, '')}
+              />
+              <Flex alignItems="flex-start">
+                <Checkbox
+                  name={`${inputsPrefix}news`}
+                  onChange={onChange}
+                  value={get(modifiedData, `${inputsPrefix}news`, false)}
+                />
+                <Padded left size="sm" />
+                <CustomLabel
+                  id="Auth.form.register.news.label"
+                  values={{ terms, policy }}
+                  onClick={() => {
+                    onChange({
+                      target: {
+                        name: `${inputsPrefix}news`,
+                        value: !get(modifiedData, `${inputsPrefix}news`, false),
+                      },
+                    });
+                  }}
+                />
+              </Flex>
+              <Padded top size="md">
+                <Button type="submit" color="primary" textTransform="uppercase">
+                  {formatMessage({ id: 'Auth.form.button.register' })}
+                </Button>
+              </Padded>
+            </form>
+          </Box>
+        </Padded>
+      </Section>
+      {!noSignin && (
+        <AuthLink label="Auth.link.signin" to="/auth/login">
+          <Text fontSize="md">
+            {formatMessage({ id: 'Auth.link.signin.account' })}
+            &nbsp;
+            <Text fontSize="md" color="#0097f7" as="span">
+              {formatMessage({ id: 'Auth.link.signin' })}
+            </Text>
+          </Text>
+        </AuthLink>
+      )}
+    </>
+  );
+};
+
+Register.defaultProps = {
+  fieldsToDisable: [],
+  inputsPrefix: '',
+  noSignin: false,
+  onSubmit: e => e.preventDefault(),
+  requestError: null,
+};
+
+Register.propTypes = {
+  fieldsToDisable: PropTypes.array,
+  formErrors: PropTypes.object.isRequired,
+  inputsPrefix: PropTypes.string,
+  modifiedData: PropTypes.object.isRequired,
+  noSignin: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func,
+  requestError: PropTypes.object,
+};
+
+export default Register;