gatsby-theme-q3 3.2.1 → 3.2.5

package/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.2.5](https://github.com/3merge/q/compare/v3.2.4...v3.2.5) (2022-02-11)
+
+
+### Bug Fixes
+
+* subdomain detection in production ([c7d91ca](https://github.com/3merge/q/commit/c7d91ca8a694335fc5fc13888a529755d718ce3c))
+
+
+
+
+
+## [3.2.4](https://github.com/3merge/q/compare/v3.2.3...v3.2.4) (2022-02-10)
+
+
+### Bug Fixes
+
+* feature photo and margins ([c8cd20a](https://github.com/3merge/q/commit/c8cd20a4f51a5ef0be67a4fbffa25f007641171e))
+
+
+
+
+
+## [3.2.3](https://github.com/3merge/q/compare/v3.2.2...v3.2.3) (2022-02-10)
+
+**Note:** Version bump only for package gatsby-theme-q3
+
+
+
+
+
+## [3.2.2](https://github.com/3merge/q/compare/v3.2.1...v3.2.2) (2022-02-10)
+
+**Note:** Version bump only for package gatsby-theme-q3
+
+
+
+
+
 ## [3.2.1](https://github.com/3merge/q/compare/v3.2.0...v3.2.1) (2022-02-09)
 
 

package/gatsby-browser.js

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { last, size } from 'lodash';
+import { size } from 'lodash';
 import { getDomain } from 'q3-admin';
 import { browser } from 'q3-ui-helpers';
 
@@ -22,11 +22,12 @@ export const onClientEntry = async () => {
 
   // set tenant default
   const { host } = window.location;
-  const parts = String(host).split('.').reverse();
+  const str = String(host);
+  const offset = str.includes('localhost') ? -1 : -2;
+  const parts = str.split('.').slice(0, offset).join('.');
 
-  if (size(parts) > 1)
-    axios.defaults.headers['X-Session-Tenant'] =
-      last(parts);
+  if (size(parts))
+    axios.defaults.headers['X-Session-Tenant'] = parts;
 
   // calls Q3 API
   await getDomain();

package/gatsby-config.js

@@ -12,7 +12,7 @@ module.exports = (options) => {
     },
     'gatsby-plugin-material-ui',
     'gatsby-plugin-force-trailing-slashes',
-    'gatsby-plugin-sitemap',
+    //    'gatsby-plugin-sitemap',
     {
       resolve: 'gatsby-transformer-sharp',
       options: {

package/lib/components/FormBoxContent.js

@@ -23,7 +23,8 @@ const FormBoxContent = ({
     t
   } = (0, _q3UiLocale.useTranslation)();
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    variant: "h1",
+    component: "h1",
+    variant: "h2",
     gutterBottom: true
   }, t(`titles:${title}`)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
     gutterBottom: true

package/lib/components/PublicTemplate.js

@@ -9,7 +9,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _components = require("q3-admin/lib/components");
+var _core = require("@material-ui/core");
+
+var _gatsby = require("gatsby");
+
+var _q3UiLocale = require("q3-ui-locale");
+
+var _lodash = require("lodash");
 
 var _AdminPublicGateway = _interopRequireDefault(require("./AdminPublicGateway"));
 
@@ -17,18 +23,136 @@ var _useSiteMetaData = _interopRequireDefault(require("./useSiteMetaData"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const useStyle = (0, _core.makeStyles)(theme => ({
+  logo: {
+    height: 95,
+    width: 180,
+    display: 'block',
+    '& img': {
+      objectFit: 'contain',
+      height: '100%',
+      width: '100%'
+    }
+  },
+  container: {
+    maxWidth: '85vw',
+    width: 850,
+    [theme.breakpoints.down('md')]: {
+      width: '100%'
+    },
+    [theme.breakpoints.down('sm')]: {
+      width: 'auto'
+    }
+  },
+  photo: ({
+    photo
+  }) => ({
+    backgroundColor: theme.palette.secondary.light,
+    backgroundImage: (0, _lodash.isString)(photo) ? `url("${String(photo).replace(/\s/gi, '%20')}")` : undefined,
+    backgroundSize: 'contain',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat',
+    width: '100%',
+    height: '100%',
+    backgroundBlendMode: 'multiply',
+    minHeight: '55vh'
+  })
+}));
+
+const Copyright = () => {
+  const {
+    brand
+  } = (0, _useSiteMetaData.default)();
+  return brand ? /*#__PURE__*/_react.default.createElement(_core.Box, {
+    display: "inline-block",
+    mx: 1
+  }, "\xA9", new Date().getFullYear(), " ", brand) : null;
+}; // eslint-disable-next-line
+
+
+const TextLink = ({
+  href,
+  text
+}) => {
+  const {
+    t
+  } = (0, _q3UiLocale.useTranslation)('labels');
+  return href ? /*#__PURE__*/_react.default.createElement(_core.Box, {
+    display: "inline-block",
+    mx: 1
+  }, /*#__PURE__*/_react.default.createElement(_core.Link, {
+    href: href,
+    target: "_blank"
+  }, t(text))) : null;
+};
+
 const PublicTemplate = ({
   children,
   ...rest
 }) => {
   const {
     brand,
-    logo
+    cancellation,
+    logo,
+    terms,
+    privacy,
+    photo
   } = (0, _useSiteMetaData.default)();
-  return /*#__PURE__*/_react.default.createElement(_AdminPublicGateway.default, rest, /*#__PURE__*/_react.default.createElement(_components.Public, {
-    companyName: brand,
-    logo: logo
-  }, children));
+  const cls = useStyle({
+    photo
+  });
+  return /*#__PURE__*/_react.default.createElement(_AdminPublicGateway.default, rest, /*#__PURE__*/_react.default.createElement(_core.Box, {
+    alignItems: "center",
+    component: "article",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    width: "100%"
+  }, /*#__PURE__*/_react.default.createElement(_core.Box, {
+    component: "header",
+    mt: "2vh",
+    mb: 1,
+    textAlign: "center"
+  }, /*#__PURE__*/_react.default.createElement(_gatsby.Link, {
+    to: "/",
+    className: cls.logo
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    alt: brand,
+    src: logo
+  }))), /*#__PURE__*/_react.default.createElement(_core.Paper, {
+    className: cls.container
+  }, /*#__PURE__*/_react.default.createElement(_core.Grid, {
+    alignItems: "center",
+    container: true,
+    spacing: 1
+  }, /*#__PURE__*/_react.default.createElement(_core.Hidden, {
+    smDown: true
+  }, /*#__PURE__*/_react.default.createElement(_core.Grid, {
+    item: true,
+    xs: 6
+  }, /*#__PURE__*/_react.default.createElement(_core.Box, {
+    className: cls.photo
+  }))), /*#__PURE__*/_react.default.createElement(_core.Grid, {
+    item: true,
+    md: 6,
+    xs: 12
+  }, /*#__PURE__*/_react.default.createElement(_core.Box, {
+    p: 2
+  }, children)))), /*#__PURE__*/_react.default.createElement(_core.Box, {
+    maxWidth: "75vw",
+    component: "footer",
+    mt: 2,
+    textAlign: "center"
+  }, /*#__PURE__*/_react.default.createElement("small", null, /*#__PURE__*/_react.default.createElement(Copyright, null), /*#__PURE__*/_react.default.createElement(TextLink, {
+    href: terms,
+    text: "termsAndConditions"
+  }), /*#__PURE__*/_react.default.createElement(TextLink, {
+    href: privacy,
+    text: "privacyPolicy"
+  }), /*#__PURE__*/_react.default.createElement(TextLink, {
+    href: cancellation,
+    text: "cancellationPolicy"
+  })))));
 };
 
 PublicTemplate.defaultProps = {

package/lib/components/withPublicTemplate.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _PublicTemplate = _interopRequireDefault(require("./PublicTemplate"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const withPublicTemplate = Component => props => /*#__PURE__*/_react.default.createElement(_PublicTemplate.default, props, /*#__PURE__*/_react.default.createElement(Component, props));
+
+var _default = withPublicTemplate;
+exports.default = _default;

package/lib/components/withSuccessOp.js

@@ -41,7 +41,7 @@ const withSuccessOp = (Component, msg) => {
       component: _gatsby.Link,
       to: "/login",
       variant: "contained",
-      color: "primary"
+      color: "secondary"
     }, t('labels:login'))) : /*#__PURE__*/_react.default.createElement(Component, _extends({}, props, {
       onSuccess: (0, _utils.toOp)(pathname)
     }));

package/lib/pages/login.js

@@ -27,9 +27,11 @@ var _FormBox = _interopRequireDefault(require("../components/FormBox"));
 
 var _withAuthenticate = _interopRequireDefault(require("../components/withAuthenticate"));
 
+var _withPublicTemplate = _interopRequireDefault(require("../components/withPublicTemplate"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _default = (0, _withAuthenticate.default)(({
+const Login = (0, _withPublicTemplate.default)((0, _withAuthenticate.default)(({
   authenticate
 }) => {
   const {
@@ -64,10 +66,11 @@ var _default = (0, _withAuthenticate.default)(({
       to: "/reverify"
     }, t('labels:reverifyLink')))),
     renderTop: /*#__PURE__*/_react.default.createElement(_Typography.default, {
-      variant: "h1",
+      component: "h1",
+      variant: "h2",
       gutterBottom: true
     }, t('titles:login'))
   });
-});
-
+}));
+var _default = Login;
 exports.default = _default;

package/lib/pages/password-change.js

@@ -25,6 +25,8 @@ var _FormBox = _interopRequireDefault(require("../components/FormBox"));
 
 var _withSuccessOp = _interopRequireDefault(require("../components/withSuccessOp"));
 
+var _withPublicTemplate = _interopRequireDefault(require("../components/withPublicTemplate"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const PasswordChange = ({
@@ -65,7 +67,6 @@ PasswordChange.propTypes = {
     search: _propTypes.default.string
   }).isRequired
 };
-
-var _default = (0, _withSuccessOp.default)(PasswordChange, 'passwordChangeNotice');
-
+const PasswordChangeWithTemplate = (0, _withPublicTemplate.default)((0, _withSuccessOp.default)(PasswordChange, 'passwordChangeNotice'));
+var _default = PasswordChangeWithTemplate;
 exports.default = _default;

package/lib/pages/password-reset.js

@@ -19,6 +19,8 @@ var _FormBoxContent = _interopRequireDefault(require("../components/FormBoxConte
 
 var _withSuccessOp = _interopRequireDefault(require("../components/withSuccessOp"));
 
+var _withPublicTemplate = _interopRequireDefault(require("../components/withPublicTemplate"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const PasswordReset = ({
@@ -43,7 +45,6 @@ const PasswordReset = ({
 PasswordReset.propTypes = {
   onSuccess: _propTypes.default.func.isRequired
 };
-
-var _default = (0, _withSuccessOp.default)(PasswordReset, 'passwordResetNotice');
-
+const PasswordResetWithTemplate = (0, _withPublicTemplate.default)((0, _withSuccessOp.default)(PasswordReset, 'passwordResetNotice'));
+var _default = PasswordResetWithTemplate;
 exports.default = _default;

package/lib/pages/reverify.js

@@ -27,6 +27,8 @@ var _FormBoxNotice = _interopRequireDefault(require("../components/FormBoxNotice
 
 var _utils = require("../components/utils");
 
+var _withPublicTemplate = _interopRequireDefault(require("../components/withPublicTemplate"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const Reverify = ({
@@ -45,7 +47,7 @@ const Reverify = ({
     component: _gatsby.Link,
     to: "/reverify",
     variant: "contained",
-    color: "primary"
+    color: "secondary"
   }, t('labels:tryAgain')));
   return /*#__PURE__*/_react.default.createElement(_FormBox.default, {
     renderBottom: /*#__PURE__*/_react.default.createElement(_builders.Form, {
@@ -71,5 +73,6 @@ Reverify.propTypes = {
     pathname: _propTypes.default.string
   }).isRequired
 };
-var _default = Reverify;
+const ReverifyWithTemplate = (0, _withPublicTemplate.default)(Reverify);
+var _default = ReverifyWithTemplate;
 exports.default = _default;

package/lib/pages/verify.js

@@ -25,9 +25,11 @@ var _FormBox = _interopRequireDefault(require("../components/FormBox"));
 
 var _withAuthenticate = _interopRequireDefault(require("../components/withAuthenticate"));
 
+var _withPublicTemplate = _interopRequireDefault(require("../components/withPublicTemplate"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _default = (0, _withAuthenticate.default)(({
+const Verify = (0, _withPublicTemplate.default)((0, _withAuthenticate.default)(({
   authenticate,
   ...props
 }) => {
@@ -70,6 +72,6 @@ var _default = (0, _withAuthenticate.default)(({
       description: "verify"
     })
   });
-});
-
+}));
+var _default = Verify;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-theme-q3",
-  "version": "3.2.1",
+  "version": "3.2.5",
   "main": "index.js",
   "license": "MIT",
   "peerDependencies": {
@@ -28,7 +28,7 @@
     "gatsby-plugin-robots-txt": "^1.6.14",
     "gatsby-plugin-sharp": "^4.2.0",
     "gatsby-plugin-sitemap": "^5.2.0",
-    "gatsby-theme-q3-mui": "^3.2.1",
+    "gatsby-theme-q3-mui": "^3.2.3",
     "gatsby-transformer-sharp": "^4.2.0",
     "lodash": "^4.17.20",
     "process": "^0.11.10",
@@ -42,5 +42,5 @@
     "transform-loader": "^0.2.4",
     "yarn": "^1.22.17"
   },
-  "gitHead": "b9ee55eb96e7d61f86f9d5d091d8a9d770c720cc"
+  "gitHead": "491dbd6d8280a171288f7054f6e29261c530a53c"
 }

package/src/components/FormBoxContent.jsx

@@ -8,7 +8,7 @@ const FormBoxContent = ({ title, description }) => {
 
   return (
     <>
-      <Typography variant="h1" gutterBottom>
+      <Typography component="h1" variant="h2" gutterBottom>
         {t(`titles:${title}`)}
       </Typography>
       <Typography gutterBottom>

package/src/components/PublicTemplate.jsx

@@ -1,17 +1,146 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Public } from 'q3-admin/lib/components';
+import {
+  Box,
+  Paper,
+  Link,
+  Grid,
+  Hidden,
+  makeStyles,
+} from '@material-ui/core';
+import { Link as ReachLink } from 'gatsby';
+import { useTranslation } from 'q3-ui-locale';
+import { isString } from 'lodash';
 import AdminPublicGateway from './AdminPublicGateway';
 import useSiteMetaData from './useSiteMetaData';
 
+const useStyle = makeStyles((theme) => ({
+  logo: {
+    height: 95,
+    width: 180,
+    display: 'block',
+
+    '& img': {
+      objectFit: 'contain',
+      height: '100%',
+      width: '100%',
+    },
+  },
+  container: {
+    maxWidth: '85vw',
+    width: 850,
+
+    [theme.breakpoints.down('md')]: {
+      width: '100%',
+    },
+
+    [theme.breakpoints.down('sm')]: {
+      width: 'auto',
+    },
+  },
+  photo: ({ photo }) => ({
+    backgroundColor: theme.palette.secondary.light,
+    backgroundImage: isString(photo)
+      ? `url("${String(photo).replace(/\s/gi, '%20')}")`
+      : undefined,
+    backgroundSize: 'contain',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat',
+    width: '100%',
+    height: '100%',
+    backgroundBlendMode: 'multiply',
+    minHeight: '55vh',
+  }),
+}));
+
+const Copyright = () => {
+  const { brand } = useSiteMetaData();
+
+  return brand ? (
+    <Box display="inline-block" mx={1}>
+      ©{new Date().getFullYear()} {brand}
+    </Box>
+  ) : null;
+};
+
+// eslint-disable-next-line
+const TextLink = ({ href, text }) => {
+  const { t } = useTranslation('labels');
+
+  return href ? (
+    <Box display="inline-block" mx={1}>
+      <Link href={href} target="_blank">
+        {t(text)}
+      </Link>
+    </Box>
+  ) : null;
+};
+
 const PublicTemplate = ({ children, ...rest }) => {
-  const { brand, logo } = useSiteMetaData();
+  const {
+    brand,
+    cancellation,
+    logo,
+    terms,
+    privacy,
+    photo,
+  } = useSiteMetaData();
+  const cls = useStyle({
+    photo,
+  });
 
   return (
     <AdminPublicGateway {...rest}>
-      <Public companyName={brand} logo={logo}>
-        {children}
-      </Public>
+      <Box
+        alignItems="center"
+        component="article"
+        display="flex"
+        flexDirection="column"
+        justifyContent="center"
+        width="100%"
+      >
+        <Box
+          component="header"
+          mt="2vh"
+          mb={1}
+          textAlign="center"
+        >
+          <ReachLink to="/" className={cls.logo}>
+            <img alt={brand} src={logo} />
+          </ReachLink>
+        </Box>
+        <Paper className={cls.container}>
+          <Grid alignItems="center" container spacing={1}>
+            <Hidden smDown>
+              <Grid item xs={6}>
+                <Box className={cls.photo} />
+              </Grid>
+            </Hidden>
+            <Grid item md={6} xs={12}>
+              <Box p={2}>{children}</Box>
+            </Grid>
+          </Grid>
+        </Paper>
+        <Box
+          maxWidth="75vw"
+          component="footer"
+          mt={2}
+          textAlign="center"
+        >
+          <small>
+            <Copyright />
+            <TextLink
+              href={terms}
+              text="termsAndConditions"
+            />
+            <TextLink href={privacy} text="privacyPolicy" />
+            <TextLink
+              href={cancellation}
+              text="cancellationPolicy"
+            />
+          </small>
+        </Box>
+      </Box>
     </AdminPublicGateway>
   );
 };

package/src/components/withPublicTemplate.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import PublicTemplate from './PublicTemplate';
+
+const withPublicTemplate = (Component) => (props) =>
+  (
+    <PublicTemplate {...props}>
+      <Component {...props} />
+    </PublicTemplate>
+  );
+
+export default withPublicTemplate;

package/src/components/withSuccessOp.jsx

@@ -20,7 +20,7 @@ const withSuccessOp = (Component, msg) => {
           component={Link}
           to="/login"
           variant="contained"
-          color="primary"
+          color="secondary"
         >
           {t('labels:login')}
         </Button>

package/src/pages/login.jsx

@@ -9,48 +9,60 @@ import Box from '@material-ui/core/Box';
 import { Form, Field } from 'q3-ui-forms/lib/builders';
 import FormBox from '../components/FormBox';
 import withAuthenticate from '../components/withAuthenticate';
+import withPublicTemplate from '../components/withPublicTemplate';
 
-export default withAuthenticate(({ authenticate }) => {
-  const { t } = useTranslation();
+const Login = withPublicTemplate(
+  withAuthenticate(({ authenticate }) => {
+    const { t } = useTranslation();
 
-  return (
-    <FormBox
-      renderBottom={
-        <>
-          <Form onSubmit={authenticate}>
-            <Field
-              name="email"
-              type="email"
-              required
-              xl={12}
-              lg={12}
-            />
-            <Field
-              required
-              name="password"
-              type="password"
-              xl={12}
-              lg={12}
-            />
-          </Form>
-          <Box mt={2} mb={1}>
-            <Divider />
-          </Box>
-          <Grid container spacing={1}>
-            <MuiLink component={Link} to="/password-reset">
-              {t('labels:requestNewPassword')}
-            </MuiLink>
-            <MuiLink component={Link} to="/reverify">
-              {t('labels:reverifyLink')}
-            </MuiLink>
-          </Grid>
-        </>
-      }
-      renderTop={
-        <Typography variant="h1" gutterBottom>
-          {t('titles:login')}
-        </Typography>
-      }
-    />
-  );
-});
+    return (
+      <FormBox
+        renderBottom={
+          <>
+            <Form onSubmit={authenticate}>
+              <Field
+                name="email"
+                type="email"
+                required
+                xl={12}
+                lg={12}
+              />
+              <Field
+                required
+                name="password"
+                type="password"
+                xl={12}
+                lg={12}
+              />
+            </Form>
+            <Box mt={2} mb={1}>
+              <Divider />
+            </Box>
+            <Grid container spacing={1}>
+              <MuiLink
+                component={Link}
+                to="/password-reset"
+              >
+                {t('labels:requestNewPassword')}
+              </MuiLink>
+              <MuiLink component={Link} to="/reverify">
+                {t('labels:reverifyLink')}
+              </MuiLink>
+            </Grid>
+          </>
+        }
+        renderTop={
+          <Typography
+            component="h1"
+            variant="h2"
+            gutterBottom
+          >
+            {t('titles:login')}
+          </Typography>
+        }
+      />
+    );
+  }),
+);
+
+export default Login;

package/src/pages/password-change.jsx

@@ -8,6 +8,7 @@ import { Form, Field } from 'q3-ui-forms/lib/builders';
 import FormBoxContent from '../components/FormBoxContent';
 import FormBox from '../components/FormBox';
 import withSuccessOp from '../components/withSuccessOp';
+import withPublicTemplate from '../components/withPublicTemplate';
 
 const PasswordChange = ({ onSuccess, location }) => {
   const { passwordResetToken, email } = queryString.parse(
@@ -64,7 +65,8 @@ PasswordChange.propTypes = {
   }).isRequired,
 };
 
-export default withSuccessOp(
-  PasswordChange,
-  'passwordChangeNotice',
+const PasswordChangeWithTemplate = withPublicTemplate(
+  withSuccessOp(PasswordChange, 'passwordChangeNotice'),
 );
+
+export default PasswordChangeWithTemplate;

package/src/pages/password-reset.jsx

@@ -5,6 +5,7 @@ import { Form, Field } from 'q3-ui-forms/lib/builders';
 import FormBox from '../components/FormBox';
 import FormBoxContent from '../components/FormBoxContent';
 import withSuccessOp from '../components/withSuccessOp';
+import withPublicTemplate from '../components/withPublicTemplate';
 
 const PasswordReset = ({ onSuccess }) => (
   <FormBox
@@ -39,7 +40,8 @@ PasswordReset.propTypes = {
   onSuccess: PropTypes.func.isRequired,
 };
 
-export default withSuccessOp(
-  PasswordReset,
-  'passwordResetNotice',
+const PasswordResetWithTemplate = withPublicTemplate(
+  withSuccessOp(PasswordReset, 'passwordResetNotice'),
 );
+
+export default PasswordResetWithTemplate;

package/src/pages/reverify.jsx

@@ -9,6 +9,7 @@ import FormBox from '../components/FormBox';
 import FormBoxContent from '../components/FormBoxContent';
 import FormBoxNotice from '../components/FormBoxNotice';
 import { hasOp, toOp } from '../components/utils';
+import withPublicTemplate from '../components/withPublicTemplate';
 
 const Reverify = ({ location: { search, pathname } }) => {
   const { t } = useTranslation();
@@ -23,7 +24,7 @@ const Reverify = ({ location: { search, pathname } }) => {
           component={Link}
           to="/reverify"
           variant="contained"
-          color="primary"
+          color="secondary"
         >
           {t('labels:tryAgain')}
         </Button>
@@ -67,4 +68,5 @@ Reverify.propTypes = {
   }).isRequired,
 };
 
-export default Reverify;
+const ReverifyWithTemplate = withPublicTemplate(Reverify);
+export default ReverifyWithTemplate;

package/src/pages/verify.jsx

@@ -8,19 +8,14 @@ import { Form, Field } from 'q3-ui-forms/lib/builders';
 import FormBoxContent from '../components/FormBoxContent';
 import FormBox from '../components/FormBox';
 import withAuthenticate from '../components/withAuthenticate';
+import withPublicTemplate from '../components/withPublicTemplate';
 
-export default withAuthenticate(
-  ({ authenticate, ...props }) => {
-    const {
-      verificationCode,
-      id,
-      email,
-    } = queryString.parse(
-      get(props, 'location.search', ''),
-      {
+const Verify = withPublicTemplate(
+  withAuthenticate(({ authenticate, ...props }) => {
+    const { verificationCode, id, email } =
+      queryString.parse(get(props, 'location.search', ''), {
         decode: false,
-      },
-    );
+      });
 
     return (
       <FormBox
@@ -69,5 +64,7 @@ export default withAuthenticate(
         }
       />
     );
-  },
+  }),
 );
+
+export default Verify;