ghost 5.48.1 → 5.49.1

package/core/built/admin/index.html

@@ -8,7 +8,7 @@
     <title>Ghost Admin</title>
 
     
-<meta name="ghost-admin/config/environment" content="%7B%22modulePrefix%22%3A%22ghost-admin%22%2C%22environment%22%3A%22production%22%2C%22rootURL%22%3A%22%22%2C%22locationType%22%3A%22trailing-hash%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%2C%22EXTEND_PROTOTYPES%22%3A%7B%22Date%22%3Afalse%2C%22Array%22%3Atrue%2C%22String%22%3Atrue%2C%22Function%22%3Afalse%7D%2C%22_APPLICATION_TEMPLATE_WRAPPER%22%3Afalse%2C%22_JQUERY_INTEGRATION%22%3Atrue%2C%22_TEMPLATE_ONLY_GLIMMER_COMPONENTS%22%3Atrue%7D%2C%22APP%22%3A%7B%22version%22%3A%225.48%22%2C%22name%22%3A%22ghost-admin%22%7D%2C%22ember-simple-auth%22%3A%7B%7D%2C%22ember-websockets%22%3A%7B%22socketIO%22%3Atrue%7D%2C%22%40sentry%2Fember%22%3A%7B%22disablePerformance%22%3Atrue%2C%22sentry%22%3A%7B%7D%7D%2C%22ember-cli-mirage%22%3A%7B%22usingProxy%22%3Afalse%2C%22useDefaultPassthroughs%22%3Atrue%7D%2C%22exportApplicationGlobal%22%3Afalse%2C%22ember-load%22%3A%7B%22loadingIndicatorClass%22%3A%22ember-load-indicator%22%7D%7D" />
+<meta name="ghost-admin/config/environment" content="%7B%22modulePrefix%22%3A%22ghost-admin%22%2C%22environment%22%3A%22production%22%2C%22rootURL%22%3A%22%22%2C%22locationType%22%3A%22trailing-hash%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%2C%22EXTEND_PROTOTYPES%22%3A%7B%22Date%22%3Afalse%2C%22Array%22%3Atrue%2C%22String%22%3Atrue%2C%22Function%22%3Afalse%7D%2C%22_APPLICATION_TEMPLATE_WRAPPER%22%3Afalse%2C%22_JQUERY_INTEGRATION%22%3Atrue%2C%22_TEMPLATE_ONLY_GLIMMER_COMPONENTS%22%3Atrue%7D%2C%22APP%22%3A%7B%22version%22%3A%225.49%22%2C%22name%22%3A%22ghost-admin%22%7D%2C%22ember-simple-auth%22%3A%7B%7D%2C%22ember-websockets%22%3A%7B%22socketIO%22%3Atrue%7D%2C%22%40sentry%2Fember%22%3A%7B%22disablePerformance%22%3Atrue%2C%22sentry%22%3A%7B%7D%7D%2C%22ember-cli-mirage%22%3A%7B%22usingProxy%22%3Afalse%2C%22useDefaultPassthroughs%22%3Atrue%7D%2C%22exportApplicationGlobal%22%3Afalse%2C%22ember-load%22%3A%7B%22loadingIndicatorClass%22%3A%22ember-load-indicator%22%7D%7D" />
 
     <meta name="HandheldFriendly" content="True" />
     <meta name="MobileOptimized" content="320" />
@@ -37,7 +37,7 @@
     </style>
 
     <link integrity="" rel="stylesheet" href="assets/vendor-3e6947aa681f0fb82b193090e520dc73.css">
-    <link integrity="" rel="stylesheet" href="assets/ghost-4f32549fd7f27543889f729a10be18b4.css" title="light">
+    <link integrity="" rel="stylesheet" href="assets/ghost-e5dfcf346304a62879b8aa8380b500c7.css" title="light">
 
     
 </head>
@@ -56,9 +56,9 @@
 
     <div id="ember-basic-dropdown-wormhole"></div>
 
-    <script src="assets/vendor-171b41e446763449417a8687279d2270.js"></script>
-<script src="assets/chunk.362.6bb7cbc3fd3afda65ae1.js"></script>
-<script src="assets/chunk.143.7ffa4fa3e2ad37094023.js"></script>
-    <script src="assets/ghost-f902f5e70d4a27fb3c35f775e50e65ff.js"></script>
+    <script src="assets/vendor-e0851d527586cb85e37e146ec921136a.js"></script>
+<script src="assets/chunk.124.ede028f827ba942bf7e3.js"></script>
+<script src="assets/chunk.143.c6e8ef2a5f6e62446120.js"></script>
+    <script src="assets/ghost-9169ef48d0474b34a0a2a01edd29683b.js"></script>
 </body>
 </html>

package/core/frontend/src/cards/css/signup.css

@@ -0,0 +1,316 @@
+.kg-signup-card,
+.kg-signup-card * {
+    box-sizing: border-box;
+}
+
+.kg-signup-card a,
+.kg-signup-card a span {
+    color: currentColor;
+}
+
+.kg-signup-card.kg-layout-split {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+}
+
+.kg-signup-card-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    height: 100%;
+    padding: 4vmax;
+    background-size: cover;
+    background-position: center;
+    text-align: left;
+}
+
+.kg-width-wide .kg-signup-card-container {
+    padding: 6.4vmax;
+}
+
+.kg-width-full .kg-signup-card-container {
+    padding: 9.6vmax 7.2vmax;
+}
+
+.kg-layout-split .kg-signup-card-container {
+    padding: 9.6vmax 4vmax;
+}
+
+.kg-signup-card-container.align-center {
+    align-items: center;
+    text-align: center;
+}
+
+.kg-signup-card-container.kg-style-accent {
+    background-color: var(--ghost-accent-color);
+}
+
+.kg-signup-card.kg-swapped .kg-signup-card-container {
+    grid-row: 1;
+}
+
+.kg-signup-card.kg-style-image h2.kg-signup-card-heading,
+.kg-signup-card.kg-style-image h3.kg-signup-card-subheading,
+.kg-signup-card.kg-style-image .kg-signup-card-button {
+    z-index: 999;
+}
+
+
+/* Split layout image */
+
+.kg-signup-card-image {
+    object-fit: cover;
+    object-position: center;
+    /* this will force the image to follow the signup card height */
+    height: 0;
+    min-height: 100%;
+    /**/
+}
+
+.kg-signup-card-image.kg-style-accent {
+    background-color: var(--ghost-accent-color);
+}
+
+/* Heading */
+
+.kg-signup-card h2.kg-signup-card-heading {
+    font-size: 4.8vmin;
+    font-weight: 700;
+    line-height: 1em;
+    letter-spacing: -0.01em;
+    margin: 0;
+}
+
+.kg-signup-card h2.kg-signup-card-heading strong {
+    font-weight: 800;
+}
+
+.kg-signup-card.kg-width-wide h2.kg-signup-card-heading {
+    font-size: 6vmin;
+}
+
+.kg-signup-card.kg-width-full h2.kg-signup-card-heading {
+    font-size: 8vmin;
+}
+
+.kg-signup-card.kg-width-full.kg-layout-split h2.kg-signup-card-heading {
+    font-size: 6.4vmin;
+}
+
+/* Subheading */
+
+.kg-signup-card-subheading {
+    margin: 0 0 2em;
+}
+
+.kg-signup-card h3.kg-signup-card-subheading {
+    font-size: 1.25em;
+    font-weight: 500;
+    line-height: 1.4em;
+    margin: 0;
+    max-width: 40em;
+}
+
+.kg-signup-card h2 + h3.kg-signup-card-subheading {
+    margin: 0.35em 0 0;
+}
+
+.kg-signup-card h3.kg-signup-card-subheading strong {
+    font-weight: 600;
+}
+
+.kg-signup-card.kg-width-wide h3.kg-signup-card-subheading {
+    font-size: 1.5em;
+}
+
+.kg-signup-card.kg-width-full h3.kg-signup-card-subheading {
+    font-size: 1.75em;
+}
+
+.kg-signup-card.kg-width-full.kg-layout-split h3.kg-signup-card-subheading {
+    font-size: 1.5em;
+}
+
+/* Subscribe form */
+
+.kg-signup-card-form {
+    position: relative;
+    width: 100%;
+}
+
+.kg-signup-card-heading + .kg-signup-card-form,
+.kg-signup-card-subheading + .kg-signup-card-form {
+    margin: 2.4vmax 0 0;
+}
+
+.kg-width-wide .kg-signup-card-heading + .kg-signup-card-form,
+.kg-width-wide .kg-signup-card-subheading + .kg-signup-card-form {
+    margin: 3.2vmax 0 0;
+}
+
+.kg-width-full .kg-signup-card-heading + .kg-signup-card-form,
+.kg-width-full .kg-signup-card-subheading + .kg-signup-card-form {
+    margin: 4vmax 0 0;
+}
+
+.kg-signup-card-fields {
+    display: flex;
+}
+
+.align-center .kg-signup-card-fields {
+    justify-content: center;
+}
+
+.kg-signup-card-input {
+    width: 100%;
+    border: solid 1px;
+    padding: 12px 16px;
+    font-size: 1.1em;
+}
+
+.kg-width-wide .kg-signup-card-input,
+.kg-width-full .kg-signup-card-input:not(.kg-layout-split .kg-signup-card-input) {
+    max-width: 400px;
+}
+
+.kg-signup-card-input.kg-style-accent {
+    border-color: var(--ghost-accent-color);
+}
+
+.kg-signup-card-button {
+    display: flex;
+    position: relative;
+    align-items: center;
+    outline: none;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    font-size: 1em;
+    font-weight: 600;
+    line-height: 1em;
+    text-align: center;
+    text-decoration: none;
+    letter-spacing: .2px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    height: 3em;
+    padding: 0 1.2em;
+    transition: opacity .2s ease;
+}
+
+.kg-signup-card-button.kg-style-accent {
+    background-color: var(--ghost-accent-color);
+}
+
+.kg-signup-card h2 + .kg-signup-card-button,
+.kg-signup-card h3 + .kg-signup-card-button {
+    margin: 1.5em 0 0;
+}
+
+.kg-signup-card .kg-signup-card-button:hover {
+    opacity: 0.85;
+}
+
+.kg-signup-card.kg-width-wide .kg-signup-card-button {
+    font-size: 1.05em;
+}
+
+.kg-signup-card.kg-width-wide h2 + .kg-signup-card-button,
+.kg-signup-card.kg-width-wide h3 + .kg-signup-card-button {
+    margin-top: 1.75em;
+}
+
+.kg-signup-card.kg-width-full .kg-signup-card-button {
+    font-size: 1.1em;
+}
+
+.kg-signup-card.kg-width-full h2 + .kg-signup-card-button,
+.kg-signup-card.kg-width-full h3 + .kg-signup-card-button {
+    margin-top: 2em;
+}
+
+/* Subscribe form states */
+
+.kg-signup-card-success,
+.kg-signup-card-error {
+    display: none;
+}
+
+.kg-signup-card-form.success .kg-signup-card-fields {
+    display: none;
+}
+
+.kg-signup-card-form.success .kg-signup-card-success {
+    display: flex;
+    align-items: center;
+    height: 3em;
+    font-size: 1.25em;
+    font-weight: 500;
+    line-height: 1.4em;
+}
+
+.kg-signup-card-form.error .kg-signup-card-error {
+    display: block;
+    position: absolute;
+    top: -32px;
+}
+
+.kg-signup-card-button-loading {
+    position: absolute;
+    inset: 0;
+    align-items: center;
+    justify-content: center;
+    display: none;
+}
+
+.kg-signup-card-form.loading .kg-signup-card-button-loading {
+    display: flex;
+}
+
+/* Disclaimer */
+
+.kg-signup-card-disclaimer {
+    margin: 1rem 0 0;
+}
+
+.kg-signup-card-form.success + .kg-signup-card-disclaimer {
+    visibility: hidden;
+}
+
+
+/* Responsive styles */
+
+@media (max-width: 640px) {
+    .kg-signup-card.kg-layout-split {
+        grid-template-columns: 1fr;
+    }
+
+    .kg-width-wide .kg-signup-card-container {
+        padding: 6.4vmax 4vmax;
+    }
+
+    .kg-width-full .kg-signup-card-container {
+        padding: 9.6vmax 4vmax;
+    }
+
+    .kg-signup-card-image {
+        height: auto;
+        min-height: unset;
+        aspect-ratio: 1 / 1;
+    }
+
+    .kg-signup-card-input {
+        font-size: inherit;
+    }
+    .kg-signup-card.kg-width-wide .kg-signup-card-button,
+    .kg-signup-card.kg-width-full .kg-signup-card-button {
+        font-size: 1em;
+    }
+
+    .kg-signup-card h3.kg-signup-card-subheading,
+    .kg-signup-card.kg-width-wide h3.kg-signup-card-subheading,
+    .kg-signup-card.kg-width-full h3.kg-signup-card-subheading,
+    .kg-signup-card.kg-width-full.kg-layout-split h3.kg-signup-card-subheading {
+        font-size: 1.1em;
+    }
+}

package/core/server/api/endpoints/collections.js

@@ -0,0 +1,115 @@
+const errors = require('@tryghost/errors');
+const tpl = require('@tryghost/tpl');
+const collectionsService = require('../../services/collections');
+
+const messages = {
+    collectionNotFound: 'Collection not found.'
+};
+
+module.exports = {
+    docName: 'collections',
+
+    browse: {
+        options: [
+            'limit',
+            'order',
+            'page'
+        ],
+        // @NOTE: should have permissions when moving out of Alpha
+        permissions: false,
+        query(frame) {
+            return collectionsService.api.browse(frame.options);
+        }
+    },
+
+    read: {
+        data: [
+            'id'
+        ],
+        // @NOTE: should have permissions when moving out of Alpha
+        permissions: false,
+        async query(frame) {
+            const model = await collectionsService.api.read(frame.data.id, frame.options);
+
+            if (!model) {
+                throw new errors.NotFoundError({
+                    message: tpl(messages.collectionNotFound)
+                });
+            }
+
+            return model;
+        }
+    },
+
+    add: {
+        statusCode: 201,
+        headers: {
+            cacheInvalidate: true
+        },
+        // @NOTE: should have permissions when moving out of Alpha
+        permissions: false,
+        async query(frame) {
+            return await collectionsService.api.add(frame.data.collections[0], frame.options);
+        }
+    },
+
+    edit: {
+        headers: {},
+        options: [
+            'id'
+        ],
+        validation: {
+            options: {
+                id: {
+                    required: true
+                }
+            }
+        },
+        // @NOTE: should have permissions when moving out of Alpha
+        permissions: false,
+        async query(frame) {
+            const model = await collectionsService.api.edit(Object.assign(frame.data.collections[0], {
+                id: frame.options.id
+            }), frame.options);
+
+            if (!model) {
+                throw new errors.NotFoundError({
+                    message: tpl(messages.collectionNotFound)
+                });
+            }
+
+            // @NOTE: cache invalidation has to be done manually for now
+            //        because the model's wasChanged is not returned from
+            //        the service using in-memory repository layer
+            // if (model.wasChanged()) {
+            this.headers.cacheInvalidate = true;
+            // } else {
+            //     this.headers.cacheInvalidate = false;
+            // }
+
+            return model;
+        }
+    },
+
+    destroy: {
+        statusCode: 204,
+        headers: {
+            cacheInvalidate: true
+        },
+        options: [
+            'id'
+        ],
+        validation: {
+            options: {
+                id: {
+                    required: true
+                }
+            }
+        },
+        // @NOTE: should have permissions when moving out of Alpha
+        permissions: false,
+        async query(frame) {
+            return await collectionsService.api.destroy(frame.options.id);
+        }
+    }
+};

package/core/server/api/endpoints/index.js

@@ -12,6 +12,10 @@ module.exports = {
         return apiFramework.pipeline(require('./authentication'), localUtils);
     },
 
+    get collections() {
+        return apiFramework.pipeline(require('./collections'), localUtils);
+    },
+
     get db() {
         return apiFramework.pipeline(require('./db'), localUtils);
     },

package/core/server/api/endpoints/utils/serializers/output/config.js

@@ -21,7 +21,8 @@ module.exports = {
             'tenor',
             'editor',
             'pintura',
-            'adminX'
+            'adminX',
+            'signupForm'
         ];
 
         frame.response = {

package/core/server/api/endpoints/utils/serializers/output/mappers/collections.js

@@ -0,0 +1,38 @@
+/**
+ *
+ * @param {import('@tryghost/collections').Collection} collection
+ *
+ * @returns {SerializedCollection}
+ */
+const mapper = (collection) => {
+    const json = collection.toJSON();
+
+    const serialized = {
+        id: json.id,
+        title: json.title,
+        slug: json.slug,
+        description: json.description,
+        type: json.type,
+        filter: json.filter,
+        feature_image: json.featureImage,
+        created_at: json.createdAt.toISOString().replace(/\d{3}Z$/, '000Z'),
+        updated_at: json.updatedAt.toISOString().replace(/\d{3}Z$/, '000Z')
+    };
+
+    return serialized;
+};
+
+module.exports = mapper;
+
+/**
+ * @typedef {Object} SerializedCollection
+ * @prop {string} id
+ * @prop {string} title
+ * @prop {string} slug
+ * @prop {string} description
+ * @prop {string} type
+ * @prop {string} filter
+ * @prop {string} feature_image
+ * @prop {string} created_at
+ * @prop {string} updated_at
+ */

package/core/server/api/endpoints/utils/serializers/output/mappers/index.js

@@ -3,6 +3,7 @@ module.exports = {
     activityFeedEvents: require('./activity-feed-events'),
     authors: require('./authors'),
     comments: require('./comments'),
+    collections: require('./collections'),
     emails: require('./emails'),
     emailBatches: require('./email-batches'),
     emailFailures: require('./email-failures'),

package/core/server/run-update-check.js

@@ -1,4 +1,4 @@
-const {parentPort} = require('worker_threads');
+const {parentPort, workerData} = require('worker_threads');
 
 const postParentPortMessage = (message) => {
     if (parentPort) {
@@ -40,10 +40,15 @@ if (parentPort) {
 
     const settings = require('./services/settings/settings-service');
     await settings.init();
+
+    const tiers = require('./services/tiers');
+    await tiers.init();
     // Finished INIT
 
     await updateCheck({
-        rethrowErrors: true
+        rethrowErrors: true,
+        forceUpdate: workerData.forceUpdate,
+        updateCheckUrl: workerData.updateCheckUrl
     });
 
     postParentPortMessage(`Ran update check`);

package/core/server/services/collections/index.js

@@ -0,0 +1,22 @@
+const {CollectionsService, CollectionsRepositoryInMemory} = require('@tryghost/collections');
+
+class CollectionsServiceWrapper {
+    api;
+
+    constructor() {
+        const inMemoryCollectionsRepository = new CollectionsRepositoryInMemory();
+        const collectionsService = new CollectionsService({
+            repository: inMemoryCollectionsRepository
+        });
+
+        this.api = {
+            browse: collectionsService.getAll.bind(collectionsService),
+            read: collectionsService.getById.bind(collectionsService),
+            add: collectionsService.save.bind(collectionsService),
+            edit: collectionsService.edit.bind(collectionsService),
+            destroy: collectionsService.destroy.bind(collectionsService)
+        };
+    }
+}
+
+module.exports = new CollectionsServiceWrapper();

package/core/server/services/members/content-gating.js

@@ -46,7 +46,7 @@ function checkPostAccess(post, member) {
             return BLOCK_ACCESS;
         }
         visibility = post.tiers.map((product) => {
-            return `product:${product.slug}`;
+            return `product:'${product.slug}'`;
         }).join(',');
     }
 

package/core/server/services/members/emails/signin.js

@@ -4,7 +4,7 @@ module.exports = ({t, siteTitle, email, url, accentColor = '#15212A', siteDomain
   <head>
     <meta name="viewport" content="width=device-width">
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>🔑 ${t('Secure sign in link for {{siteTitle}}', {siteTitle})}</title>
+    <title>🔑 ${t('Secure sign in link for {{siteTitle}}', {siteTitle, interpolation: {escapeValue: false}})}</title>
     <style>
     /* -------------------------------------
         RESPONSIVE AND MOBILE FRIENDLY STYLES
@@ -107,7 +107,7 @@ module.exports = ({t, siteTitle, email, url, accentColor = '#15212A', siteDomain
           <div class="content" style="box-sizing: border-box; display: block; Margin: 0 auto; max-width: 600px; padding: 30px 20px;">
 
             <!-- START CENTERED CONTAINER -->
-            <span class="preheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">${t('Welcome back to {{siteTitle}}!', {siteTitle})}</span>
+            <span class="preheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">${t('Welcome back to {{siteTitle}}!', {siteTitle, interpolation: {escapeValue: false}})}</span>
             <table class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background: #ffffff; border-radius: 8px;">
 
               <!-- START MAIN CONTENT AREA -->
@@ -117,7 +117,7 @@ module.exports = ({t, siteTitle, email, url, accentColor = '#15212A', siteDomain
                     <tr>
                       <td style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 14px; vertical-align: top;">
                         <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 20px; color: #15212A; font-weight: bold; line-height: 24px; margin: 0; margin-bottom: 15px;">${t('Hey there,')}</p>
-                        <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; color: #3A464C; font-weight: normal; margin: 0; line-height: 24px; margin-bottom: 32px;">${t('Welcome back! Use this link to securely sign in to your {{siteTitle}} account:', {siteTitle})}</p>
+                        <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; color: #3A464C; font-weight: normal; margin: 0; line-height: 24px; margin-bottom: 32px;">${t('Welcome back! Use this link to securely sign in to your {{siteTitle}} account:', {siteTitle, interpolation: {escapeValue: false}})}</p>
                         <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box;">
                           <tbody>
                             <tr>
@@ -125,7 +125,7 @@ module.exports = ({t, siteTitle, email, url, accentColor = '#15212A', siteDomain
                                 <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
                                   <tbody>
                                     <tr>
-                                      <td style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; vertical-align: top; background-color: ${accentColor}; border-radius: 5px; text-align: center;"> <a href="${url}" target="_blank" style="display: inline-block; color: #ffffff; background-color: ${accentColor}; border: solid 1px ${accentColor}; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 16px; font-weight: normal; margin: 0; padding: 9px 22px 10px; border-color: ${accentColor};">${t('Sign in to {{siteTitle}}', {siteTitle})}</a> </td>
+                                      <td style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; vertical-align: top; background-color: ${accentColor}; border-radius: 5px; text-align: center;"> <a href="${url}" target="_blank" style="display: inline-block; color: #ffffff; background-color: ${accentColor}; border: solid 1px ${accentColor}; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 16px; font-weight: normal; margin: 0; padding: 9px 22px 10px; border-color: ${accentColor};">${t('Sign in to {{siteTitle}}', {siteTitle, interpolation: {escapeValue: false}})}</a> </td>
                                     </tr>
                                   </tbody>
                                 </table>
@@ -145,7 +145,7 @@ module.exports = ({t, siteTitle, email, url, accentColor = '#15212A', siteDomain
 
                     <tr>
                       <td style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 14px; vertical-align: top; padding-top: 80px;">
-                        <p class="small" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 16px; font-size: 11px; color: #738A94; font-weight: normal; margin: 0;">If you did not make this request, you can safely ignore this email.</p>
+                        <p class="small" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 16px; font-size: 11px; color: #738A94; font-weight: normal; margin: 0;">${t('If you did not make this request, you can safely ignore this email.')}</p>
                       </td>
                     </tr>
                     <tr>