From 5777868ebac7eaec8d1d2d4f986035c85e4d444e Mon Sep 17 00:00:00 2001
From: Elliot DeNolf <denolfe@gmail.com>
Date: Fri, 21 Aug 2020 22:43:55 -0400
Subject: [PATCH] Implement page titles based upon active view

---
 demo/payload.config.js                        |  2 +-
 package.json                                  |  1 +
 .../components/templates/Default/index.js     |  6 ++
 src/client/components/utilities/Meta/index.js | 74 +++++++++++++++++++
 .../components/views/Account/Default.js       |  6 ++
 .../components/views/CreateFirstUser/index.js |  6 ++
 .../components/views/ForgotPassword/index.js  |  7 ++
 src/client/components/views/Global/Default.js |  6 ++
 src/client/components/views/Login/index.js    | 11 +++
 src/client/components/views/Logout/index.js   |  6 ++
 src/client/components/views/NotFound/index.js |  6 ++
 .../components/views/ResetPassword/index.js   |  7 ++
 .../components/views/Unauthorized/index.js    | 34 +++++----
 .../views/collections/Edit/Default.js         |  6 ++
 .../views/collections/List/Default.js         |  4 +
 15 files changed, 165 insertions(+), 17 deletions(-)
 create mode 100644 src/client/components/utilities/Meta/index.js

diff --git a/demo/payload.config.js b/demo/payload.config.js
index 8b7b4df8cd..a12bcec762 100644
--- a/demo/payload.config.js
+++ b/demo/payload.config.js
@@ -29,7 +29,7 @@ module.exports = {
   admin: {
     user: 'admins',
     meta: {
-      titleSuffix: '- Payload',
+      titleSuffix: '- Payload Demo',
       ogImage: '/static/find-image-here.jpg',
       favicon: '/img/whatever.png',
     },
diff --git a/package.json b/package.json
index 4e0c1f171d..5a44744a2a 100644
--- a/package.json
+++ b/package.json
@@ -94,6 +94,7 @@
     "react-datepicker": "^2.13.0",
     "react-document-meta": "^3.0.0-beta.2",
     "react-dom": "^16.13.1",
+    "react-helmet": "^6.1.0",
     "react-hook-form": "^5.7.2",
     "react-router-dom": "^5.1.2",
     "react-router-navigation-prompt": "^1.8.11",
diff --git a/src/client/components/templates/Default/index.js b/src/client/components/templates/Default/index.js
index 7c5ebfb3ad..d2df2164f7 100644
--- a/src/client/components/templates/Default/index.js
+++ b/src/client/components/templates/Default/index.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import DefaultNav from '../../elements/Nav';
 import { StepNavProvider } from '../../elements/StepNav';
 import customComponents from '../../customComponents';
+import Meta from '../../utilities/Meta';
 
 import './index.scss';
 
@@ -19,6 +20,11 @@ const Default = ({ children, className }) => {
   return (
     <div className={classes}>
       <StepNavProvider>
+        <Meta
+          title="Dashboard"
+          description="Dashboard for Payload CMS"
+          keywords="Dashboard, Payload, CMS"
+        />
         <Nav />
         <div className={`${baseClass}__wrap`}>
           {children}
diff --git a/src/client/components/utilities/Meta/index.js b/src/client/components/utilities/Meta/index.js
new file mode 100644
index 0000000000..ef3298eee1
--- /dev/null
+++ b/src/client/components/utilities/Meta/index.js
@@ -0,0 +1,74 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Helmet from 'react-helmet';
+import config from '../../../config';
+
+
+function Meta({ description, lang, meta, title, image, keywords }) {
+  const titleSuffix = config?.admin?.meta?.titleSuffix ?? '- Payload';
+  return (
+    <Helmet
+      htmlAttributes={{
+        lang,
+      }}
+      title={`${title} ${titleSuffix}`}
+      meta={[
+        {
+          name: 'description',
+          content: description,
+        },
+        {
+          name: 'keywords',
+          content: keywords,
+        },
+        {
+          property: 'og:title',
+          content: `${title} ${titleSuffix}`,
+        },
+        {
+          property: 'og:image',
+          content: image,
+        },
+        {
+          property: 'og:description',
+          content: description,
+        },
+        {
+          property: 'og:type',
+          content: 'website',
+        },
+        {
+          name: 'twitter:card',
+          content: 'summary',
+        },
+        {
+          name: 'twitter:title',
+          content: title,
+        },
+        {
+          name: 'twitter:description',
+          content: description,
+        },
+      ].concat(meta)}
+    />
+  );
+}
+
+Meta.defaultProps = {
+  lang: 'en',
+  meta: [],
+  description: '',
+  image: '/images/default-og.png',
+  keywords: 'CMS, Admin, Dashboard',
+};
+
+Meta.propTypes = {
+  description: PropTypes.string,
+  lang: PropTypes.string,
+  meta: PropTypes.arrayOf(PropTypes.object),
+  title: PropTypes.string.isRequired,
+  image: PropTypes.string,
+  keywords: PropTypes.string,
+};
+
+export default Meta;
diff --git a/src/client/components/views/Account/Default.js b/src/client/components/views/Account/Default.js
index e39c50ab7d..e869d0fd64 100644
--- a/src/client/components/views/Account/Default.js
+++ b/src/client/components/views/Account/Default.js
@@ -12,6 +12,7 @@ import CopyToClipboard from '../../elements/CopyToClipboard';
 import * as fieldTypes from '../../forms/field-types';
 import RenderTitle from '../../elements/RenderTitle';
 import LeaveWithoutSaving from '../../modals/LeaveWithoutSaving';
+import Meta from '../../utilities/Meta';
 import Auth from '../collections/Edit/Auth';
 import Loading from '../../elements/Loading';
 
@@ -57,6 +58,11 @@ const DefaultAccount = (props) => {
         disabled={!hasSavePermission}
       >
         <div className={`${baseClass}__main`}>
+          <Meta
+            title="Account"
+            description="Account of current user"
+            keywords="Account, Dashboard, Payload, CMS"
+          />
           <Eyebrow />
           <LeaveWithoutSaving />
           <div className={`${baseClass}__edit`}>
diff --git a/src/client/components/views/CreateFirstUser/index.js b/src/client/components/views/CreateFirstUser/index.js
index d4ae943601..80e8845861 100644
--- a/src/client/components/views/CreateFirstUser/index.js
+++ b/src/client/components/views/CreateFirstUser/index.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import config from 'payload/config';
 import MinimalTemplate from '../../templates/Minimal';
+import Meta from '../../utilities/Meta';
 import Form from '../../forms/Form';
 import RenderFields from '../../forms/RenderFields';
 import * as fieldTypes from '../../forms/field-types';
@@ -48,6 +49,11 @@ const CreateFirstUser = (props) => {
     <MinimalTemplate className={baseClass}>
       <h1>Welcome</h1>
       <p>To begin, create your first user.</p>
+      <Meta
+        title="Create First User"
+        description="Create first user"
+        keywords="Create, Payload, CMS"
+      />
       <Form
         onSuccess={onSuccess}
         method="POST"
diff --git a/src/client/components/views/ForgotPassword/index.js b/src/client/components/views/ForgotPassword/index.js
index d9da003ed0..45ae693e3f 100644
--- a/src/client/components/views/ForgotPassword/index.js
+++ b/src/client/components/views/ForgotPassword/index.js
@@ -7,6 +7,7 @@ import Form from '../../forms/Form';
 import Email from '../../forms/field-types/Email';
 import FormSubmit from '../../forms/Submit';
 import Button from '../../elements/Button';
+import Meta from '../../utilities/Meta';
 import { useUser } from '../../data/User';
 
 import './index.scss';
@@ -42,6 +43,12 @@ const ForgotPassword = () => {
   if (user) {
     return (
       <MinimalTemplate className={baseClass}>
+        <Meta
+          title="Forgot Password"
+          description="Forgot password"
+          keywords="Forgot, Password, Payload, CMS"
+        />
+
         <h1>You&apos;re already logged in</h1>
         <p>
           To change your password, go to your
diff --git a/src/client/components/views/Global/Default.js b/src/client/components/views/Global/Default.js
index 17b3a3ba02..1efcc742db 100644
--- a/src/client/components/views/Global/Default.js
+++ b/src/client/components/views/Global/Default.js
@@ -7,6 +7,7 @@ import PreviewButton from '../../elements/PreviewButton';
 import FormSubmit from '../../forms/Submit';
 import RenderFields from '../../forms/RenderFields';
 import CopyToClipboard from '../../elements/CopyToClipboard';
+import Meta from '../../utilities/Meta';
 import * as fieldTypes from '../../forms/field-types';
 import LeaveWithoutSaving from '../../modals/LeaveWithoutSaving';
 
@@ -39,6 +40,11 @@ const DefaultGlobalView = (props) => {
         initialState={initialState}
       >
         <div className={`${baseClass}__main`}>
+          <Meta
+            title={label}
+            description={label}
+            keywords={`${label}, Payload, CMS`}
+          />
           <Eyebrow />
           <LeaveWithoutSaving />
           <div className={`${baseClass}__edit`}>
diff --git a/src/client/components/views/Login/index.js b/src/client/components/views/Login/index.js
index 303d4a2d62..38583d8366 100644
--- a/src/client/components/views/Login/index.js
+++ b/src/client/components/views/Login/index.js
@@ -8,6 +8,7 @@ import Email from '../../forms/field-types/Email';
 import Password from '../../forms/field-types/Password';
 import FormSubmit from '../../forms/Submit';
 import Button from '../../elements/Button';
+import Meta from '../../utilities/Meta';
 import { useUser } from '../../data/User';
 
 import './index.scss';
@@ -30,6 +31,11 @@ const Login = () => {
   if (user) {
     return (
       <MinimalTemplate className={baseClass}>
+        <Meta
+          title="Login"
+          description="Login user"
+          keywords="Login, Payload, CMS"
+        />
         <div className={`${baseClass}__wrap`}>
           <h1>Already logged in</h1>
           <p>
@@ -54,6 +60,11 @@ const Login = () => {
 
   return (
     <MinimalTemplate className={baseClass}>
+      <Meta
+        title="Login"
+        description="Login user"
+        keywords="Login, Payload, CMS"
+      />
       <div className={`${baseClass}__brand`}>
         <Logo />
       </div>
diff --git a/src/client/components/views/Logout/index.js b/src/client/components/views/Logout/index.js
index a821ac28e5..d455d85d84 100644
--- a/src/client/components/views/Logout/index.js
+++ b/src/client/components/views/Logout/index.js
@@ -4,6 +4,7 @@ import config from 'payload/config';
 import { useUser } from '../../data/User';
 import Minimal from '../../templates/Minimal';
 import Button from '../../elements/Button';
+import Meta from '../../utilities/Meta';
 
 import './index.scss';
 
@@ -22,6 +23,11 @@ const Logout = (props) => {
 
   return (
     <Minimal className={baseClass}>
+      <Meta
+        title="Logout"
+        description="Logout user"
+        keywords="Logout, Payload, CMS"
+      />
       <div className={`${baseClass}__wrap`}>
         {inactivity && (
           <h2>You have been logged out due to inactivity.</h2>
diff --git a/src/client/components/views/NotFound/index.js b/src/client/components/views/NotFound/index.js
index b6700cc661..265d6ea51c 100644
--- a/src/client/components/views/NotFound/index.js
+++ b/src/client/components/views/NotFound/index.js
@@ -3,6 +3,7 @@ import config from 'payload/config';
 import Eyebrow from '../../elements/Eyebrow';
 import { useStepNav } from '../../elements/StepNav';
 import Button from '../../elements/Button';
+import Meta from '../../utilities/Meta';
 
 const { routes: { admin } } = config;
 
@@ -17,6 +18,11 @@ const NotFound = () => {
 
   return (
     <div className="not-found">
+      <Meta
+        title="Not Found"
+        description="Page not found"
+        keywords="404, Not found, Payload, CMS"
+      />
       <Eyebrow />
       <h1>Nothing found</h1>
       <p>Sorry&mdash;there is nothing to correspond with your request.</p>
diff --git a/src/client/components/views/ResetPassword/index.js b/src/client/components/views/ResetPassword/index.js
index e0eb5a48b1..02d5624ae3 100644
--- a/src/client/components/views/ResetPassword/index.js
+++ b/src/client/components/views/ResetPassword/index.js
@@ -7,6 +7,7 @@ import Password from '../../forms/field-types/Password';
 import ConfirmPassword from '../../forms/field-types/ConfirmPassword';
 import FormSubmit from '../../forms/Submit';
 import Button from '../../elements/Button';
+import Meta from '../../utilities/Meta';
 import { useUser } from '../../data/User';
 
 import './index.scss';
@@ -31,6 +32,12 @@ const ResetPassword = () => {
   if (user) {
     return (
       <MinimalTemplate className={baseClass}>
+        <Meta
+          title="Reset Password"
+          description="Reset password"
+          keywords="Reset Password, Payload, CMS"
+        />
+
         <div className={`${baseClass}__wrap`}>
           <h1>Already logged in</h1>
           <p>
diff --git a/src/client/components/views/Unauthorized/index.js b/src/client/components/views/Unauthorized/index.js
index c521c68258..50e157bb4a 100644
--- a/src/client/components/views/Unauthorized/index.js
+++ b/src/client/components/views/Unauthorized/index.js
@@ -1,24 +1,26 @@
 import React from 'react';
 import config from 'payload/config';
 import Button from '../../elements/Button';
+import Meta from '../../utilities/Meta';
 import MinimalTemplate from '../../templates/Minimal';
 
 const { routes: { admin } } = config;
 
-const Unauthorized = () => {
-  return (
-    <MinimalTemplate className="unauthorized">
-      <h1>Not authorized</h1>
-      <p>You are not allowed to access this page.</p>
-      <br />
-      <Button
-        el="link"
-        to={`${admin}/logout`}
-      >
-        Log out
-      </Button>
-    </MinimalTemplate>
-  );
-};
-
+const Unauthorized = () => (
+  <MinimalTemplate className="unauthorized">
+    <Meta
+      title="Unauthorized"
+      description="Unauthorized"
+      keywords="Unauthorized, Payload, CMS"
+    />
+    <p>You are not allowed to access this page.</p>
+    <br />
+    <Button
+      el="link"
+      to={`${admin}/logout`}
+    >
+      Log out
+    </Button>
+  </MinimalTemplate>
+);
 export default Unauthorized;
diff --git a/src/client/components/views/collections/Edit/Default.js b/src/client/components/views/collections/Edit/Default.js
index 89c947207e..a950838b71 100644
--- a/src/client/components/views/collections/Edit/Default.js
+++ b/src/client/components/views/collections/Edit/Default.js
@@ -12,6 +12,7 @@ import RenderFields from '../../../forms/RenderFields';
 import CopyToClipboard from '../../../elements/CopyToClipboard';
 import DuplicateDocument from '../../../elements/DuplicateDocument';
 import DeleteDocument from '../../../elements/DeleteDocument';
+import Meta from '../../../utilities/Meta';
 import * as fieldTypes from '../../../forms/field-types';
 import RenderTitle from '../../../elements/RenderTitle';
 import LeaveWithoutSaving from '../../../modals/LeaveWithoutSaving';
@@ -69,6 +70,11 @@ const DefaultEditView = (props) => {
         initialState={initialState}
       >
         <div className={`${baseClass}__main`}>
+          <Meta
+            title={`${isEditing ? 'Editing' : 'Creating'} - ${collection.labels.singular}`}
+            description={`${isEditing ? 'Editing' : 'Creating'} - ${collection.labels.singular}`}
+            keywords={`${collection.labels.singular}, Payload, CMS`}
+          />
           <Eyebrow />
           <LeaveWithoutSaving />
           <div className={`${baseClass}__edit`}>
diff --git a/src/client/components/views/collections/List/Default.js b/src/client/components/views/collections/List/Default.js
index 9e0a0e9db2..fef8ed8d62 100644
--- a/src/client/components/views/collections/List/Default.js
+++ b/src/client/components/views/collections/List/Default.js
@@ -10,6 +10,7 @@ import Pill from '../../../elements/Pill';
 import Button from '../../../elements/Button';
 import SortColumn from '../../../elements/SortColumn';
 import Table from '../../../elements/Table';
+import Meta from '../../../utilities/Meta';
 import Cell from './Cell';
 
 import './index.scss';
@@ -42,6 +43,9 @@ const DefaultList = (props) => {
 
   return (
     <div className={baseClass}>
+      <Meta
+        title={collection.labels.plural}
+      />
       <Eyebrow />
       <div className={`${baseClass}__wrap`}>
         <header className={`${baseClass}__header`}>