Implement page titles based upon active view

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}

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;

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`}>

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"

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

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`}>

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>

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>

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>

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>

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;

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`}>

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`}>