coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fixes: Collection creation notification email

Browse Source 
Added: Unsubscribe option to notification email footers
Added: Two new notification types (emails not written yet)
Fixed: Validation added to notification setting events
This commit is contained in:
Tom Moor
2018-12-05 23:44:41 -08:00
parent cc8dacba32
commit 9ca0038d39
8 changed files with 131 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
app/scenes/Settings/Notifications.js
View File

@ -2,10 +2,12 @@
import * as React from 'react'; import * as React from 'react';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import { observer, inject } from 'mobx-react'; import { observer, inject } from 'mobx-react';
import styled from 'styled-components';
import CenteredContent from 'components/CenteredContent'; import CenteredContent from 'components/CenteredContent';
import PageTitle from 'components/PageTitle'; import PageTitle from 'components/PageTitle';
import HelpText from 'components/HelpText'; import HelpText from 'components/HelpText';
import NotificationListItem from './components/NotificationListItem'; import NotificationListItem from './components/NotificationListItem';
import Notice from 'shared/components/Notice';
import UiStore from 'stores/UiStore'; import UiStore from 'stores/UiStore';
import NotificationSettingsStore from 'stores/NotificationSettingsStore'; import NotificationSettingsStore from 'stores/NotificationSettingsStore';
@ -31,6 +33,20 @@ const options = [
title: 'Collection created', title: 'Collection created',
description: 'Receive a notification whenever a new collection is created', description: 'Receive a notification whenever a new collection is created',
}, },
{
separator: true,
},
{
event: 'emails.onboarding',
title: 'Getting started',
description:
'Tips on getting started with Outline`s features and functionality',
},
{
event: 'emails.features',
title: 'New features',
description: 'Receive an email when new features of note are added',
},
]; ];
@observer @observer
@ -60,9 +76,16 @@ class Notifications extends React.Component<Props> {
render() { render() {
const { notificationSettings } = this.props; const { notificationSettings } = this.props;
const showSuccessNotice = window.location.search === '?success';
return ( return (
<CenteredContent> <CenteredContent>
{showSuccessNotice && (
<Notice>
Unsubscription successful. Your notification settings were updated
</Notice>
)}
<PageTitle title="Notifications" /> <PageTitle title="Notifications" />
<h1>Notifications</h1> <h1>Notifications</h1>
@ -71,6 +94,8 @@ class Notifications extends React.Component<Props> {
</HelpText> </HelpText>
{options.map(option => { {options.map(option => {
if (option.separator) return <Separator />;
const setting = notificationSettings.getByEvent(option.event); const setting = notificationSettings.getByEvent(option.event);
return ( return (
@ -90,4 +115,8 @@ class Notifications extends React.Component<Props> {
} }
} }
const Separator = styled.hr`
padding-bottom: 12px;
`;
export default inject('notificationSettings', 'ui')(Notifications); export default inject('notificationSettings', 'ui')(Notifications);

17
server/api/notificationSettings.js
View File

@ -57,4 +57,21 @@ router.post('notificationSettings.delete', auth(), async ctx => {
}; };
}); });
router.post('notificationSettings.unsubscribe', async ctx => {
const { id, token } = ctx.body;
ctx.assertPresent(id, 'id is required');
ctx.assertPresent(token, 'token is required');
const setting = await NotificationSetting.findById(id);
if (setting) {
if (token !== setting.unsubscribeToken) {
ctx.redirect(`${process.env.URL}?notice=invalid-auth`);
}
await setting.destroy();
}
ctx.redirect(`${process.env.URL}/settings/notifications?success`);
});
export default router; export default router;

12
server/emails/CollectionNotificationEmail.js
View File

@ -13,6 +13,7 @@ export type Props = {
actor: User, actor: User,
collection: Collection, collection: Collection,
eventName: string, eventName: string,
unsubscribeUrl: string,
}; };
export const collectionNotificationEmailText = ({ export const collectionNotificationEmailText = ({
@ -20,7 +21,7 @@ export const collectionNotificationEmailText = ({
collection, collection,
eventName = 'created', eventName = 'created',
}: Props) => ` }: Props) => `
"${document.title}" ${eventName} ${collection.name}
${actor.name} ${eventName} the collection "${collection.name}" ${actor.name} ${eventName} the collection "${collection.name}"
@ -31,17 +32,16 @@ export const CollectionNotificationEmail = ({
actor, actor,
collection, collection,
eventName = 'created', eventName = 'created',
unsubscribeUrl,
}: Props) => { }: Props) => {
return ( return (
<EmailTemplate> <EmailTemplate>
<Header /> <Header />
<Body> <Body>
<Heading> <Heading>{collection.name}</Heading>
"{collection.name}" {eventName}
</Heading>
<p> <p>
{actor.name} {eventName} the collection "{collection.title}". {actor.name} {eventName} the collection "{collection.name}".
</p> </p>
<EmptySpace height={10} /> <EmptySpace height={10} />
<p> <p>
@ -51,7 +51,7 @@ export const CollectionNotificationEmail = ({
</p> </p>
</Body> </Body>
<Footer /> <Footer unsubscribeUrl={unsubscribeUrl} />
</EmailTemplate> </EmailTemplate>
); );
}; };

4
server/emails/DocumentNotificationEmail.js
View File

@ -14,6 +14,7 @@ export type Props = {
document: Document, document: Document,
collection: Collection, collection: Collection,
eventName: string, eventName: string,
unsubscribeUrl: string,
}; };
export const documentNotificationEmailText = ({ export const documentNotificationEmailText = ({
@ -36,6 +37,7 @@ export const DocumentNotificationEmail = ({
document, document,
collection, collection,
eventName = 'published', eventName = 'published',
unsubscribeUrl,
}: Props) => { }: Props) => {
return ( return (
<EmailTemplate> <EmailTemplate>
@ -60,7 +62,7 @@ export const DocumentNotificationEmail = ({
</p> </p>
</Body> </Body>
<Footer /> <Footer unsubscribeUrl={unsubscribeUrl} />
</EmailTemplate> </EmailTemplate>
); );
}; };

25
server/emails/components/Footer.js
View File

@ -4,14 +4,24 @@ import { Table, TBody, TR, TD } from 'oy-vey';
import { twitterUrl, spectrumUrl } from '../../../shared/utils/routeHelpers'; import { twitterUrl, spectrumUrl } from '../../../shared/utils/routeHelpers';
import theme from '../../../shared/styles/theme'; import theme from '../../../shared/styles/theme';
export default () => { type Props = {
const style = { unsubscribeUrl?: string,
};
export default ({ unsubscribeUrl }: Props) => {
const footerStyle = {
padding: '20px 0', padding: '20px 0',
borderTop: `1px solid ${theme.smokeDark}`, borderTop: `1px solid ${theme.smokeDark}`,
color: theme.slate, color: theme.slate,
fontSize: '14px', fontSize: '14px',
}; };
const unsubStyle = {
padding: '0',
color: theme.slate,
fontSize: '14px',
};
const linkStyle = { const linkStyle = {
color: theme.slate, color: theme.slate,
fontWeight: 500, fontWeight: 500,
@ -29,7 +39,7 @@ export default () => {
<Table width="100%"> <Table width="100%">
<TBody> <TBody>
<TR> <TR>
<TD style={style}> <TD style={footerStyle}>
<a href={process.env.URL} style={linkStyle}> <a href={process.env.URL} style={linkStyle}>
Outline Outline
</a> </a>
@ -41,6 +51,15 @@ export default () => {
</a> </a>
</TD> </TD>
</TR> </TR>
{unsubscribeUrl && (
<TR>
<TD style={unsubStyle}>
<a href={unsubscribeUrl} style={linkStyle}>
Unsubscribe from these emails
</a>
</TD>
</TR>
)}
</TBody> </TBody>
</Table> </Table>
); );

29
server/models/NotificationSetting.js
View File

@ -1,4 +1,5 @@
// @flow // @flow
import crypto from 'crypto';
import { DataTypes, sequelize } from '../sequelize'; import { DataTypes, sequelize } from '../sequelize';
const NotificationSetting = sequelize.define( const NotificationSetting = sequelize.define(
@ -11,14 +12,42 @@ const NotificationSetting = sequelize.define(
}, },
event: { event: {
type: DataTypes.STRING, type: DataTypes.STRING,
validate: {
isIn: [
[
'documents.publish',
'documents.update',
'collections.create',
'emails.onboarding',
'emails.features',
],
],
},
}, },
}, },
{ {
timestamps: true, timestamps: true,
updatedAt: false, updatedAt: false,
getterMethods: {
unsubscribeUrl: function() {
const token = NotificationSetting.getUnsubscribeToken(this.userId);
return `${process.env.URL}/api/notificationSettings.unsubscribe?token=${
token
}&id=${this.id}`;
},
unsubscribeToken: function() {
return NotificationSetting.getUnsubscribeToken(this.userId);
},
},
} }
); );
NotificationSetting.getUnsubscribeToken = userId => {
const hash = crypto.createHash('sha256');
hash.update(`${userId}-${process.env.SECRET_KEY}`);
return hash.digest('hex');
};
NotificationSetting.associate = models => { NotificationSetting.associate = models => {
NotificationSetting.belongsTo(models.User, { NotificationSetting.belongsTo(models.User, {
as: 'user', as: 'user',

18
server/models/User.js
View File

@ -133,16 +133,24 @@ User.beforeCreate(setRandomJwtSecret);
User.afterCreate(user => sendEmail('welcome', user.email)); User.afterCreate(user => sendEmail('welcome', user.email));
// By default when a user signs up we subscribe them to email notifications // By default when a user signs up we subscribe them to email notifications
// when documents they created are edited by other team members. // when documents they created are edited by other team members and onboarding
User.afterCreate((user, options) => User.afterCreate(async (user, options) => {
NotificationSetting.findOrCreate({ await NotificationSetting.findOrCreate({
where: { where: {
userId: user.id, userId: user.id,
teamId: user.teamId, teamId: user.teamId,
event: 'documents.update', event: 'documents.update',
}, },
transaction: options.transaction, transaction: options.transaction,
}) });
); await NotificationSetting.findOrCreate({
where: {
userId: user.id,
teamId: user.teamId,
event: 'emails.onboarding',
},
transaction: options.transaction,
});
});
export default User; export default User;

14
server/services/notifications.js
View File

@ -61,12 +61,21 @@ export default class Notifications {
document, document,
collection, collection,
actor: document.updatedBy, actor: document.updatedBy,
unsubscribeUrl: setting.unsubscribeUrl,
}); });
}); });
} }
async collectionCreated(event: Event) { async collectionCreated(event: Event) {
const collection = await Collection.findById(event.model.id); const collection = await Collection.findById(event.model.id, {
include: [
{
model: User,
required: true,
as: 'user',
},
],
});
if (!collection) return; if (!collection) return;
const notificationSettings = await NotificationSetting.findAll({ const notificationSettings = await NotificationSetting.findAll({
@ -92,7 +101,8 @@ export default class Notifications {
to: setting.user.email, to: setting.user.email,
eventName: 'created', eventName: 'created',
collection, collection,
actor: collection.createdBy, actor: collection.user,
unsubscribeUrl: setting.unsubscribeUrl,
}) })
); );
} }