From f32783a652cf26ac4852f7862ae530b6479a437a Mon Sep 17 00:00:00 2001 From: LEE JAE HO Date: Wed, 26 Jul 2017 07:18:39 +0900 Subject: [PATCH 1/2] #1658 Fix broken validation error Messages in LoginForm 1. remove duplicated ```formatMessage```. 1. showMessage function pushs converted formatMessage --- .../imports/ui/components/LoginForm.jsx | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/vulcan-accounts/imports/ui/components/LoginForm.jsx b/packages/vulcan-accounts/imports/ui/components/LoginForm.jsx index eeee3f0a8..254670ec1 100755 --- a/packages/vulcan-accounts/imports/ui/components/LoginForm.jsx +++ b/packages/vulcan-accounts/imports/ui/components/LoginForm.jsx @@ -108,7 +108,7 @@ export class AccountsLoginForm extends Tracker.Component { }); } - const loggingInMessage = this.context.intl.formatMessage({id: 'accounts.logging_in'}); + const loggingInMessage = 'accounts.logging_in'; if (this.state.formState == STATES.PROFILE) { if (!this.props.currentUser && this.state.messages.length === 0) { @@ -626,7 +626,7 @@ export class AccountsLoginForm extends Tracker.Component { onSubmitHook(error,formState); if (error) { const errorId = `accounts.error_${error.reason.toLowerCase().replace(/ /g, '_')}`; - this.showMessage(this.context.intl.formatMessage({id: errorId}) || this.context.intl.formatMessage({id: 'accounts.error_unknown'}), 'error'); + this.showMessage(this.context.intl.formatMessage({id: errorId}) || 'accounts.error_unknown', errorId, 'error'); } else { loginResultCallback(() => this.state.onSignedInHook()); @@ -689,7 +689,7 @@ export class AccountsLoginForm extends Tracker.Component { // do nothing } else { const errorId = `accounts.error_${error.reason.toLowerCase().replace(/ /g, '_')}`; - this.showMessage((error.reason && this.context.intl.formatMessage({id: errorId})) || this.context.intl.formatMessage({id: 'accounts.error_unknown'})) + this.showMessage((error.reason && this.context.intl.formatMessage({id: errorId})) || 'accounts.error_unknown' && errorId) } } else { this.setState({ formState: STATES.PROFILE }); @@ -751,7 +751,7 @@ export class AccountsLoginForm extends Tracker.Component { Accounts.createUser(_options, (error) => { if (error) { const errorId = `accounts.error_${error.reason.toLowerCase().replace(/ /g, '_')}`; - this.showMessage(this.context.intl.formatMessage({id: errorId}) || this.context.intl.formatMessage({id: 'accounts.error_unknown'}), 'error'); + this.showMessage(this.context.intl.formatMessage({id: errorId}) || 'accounts.error_unknown' && errorId, 'error'); if (this.context.intl.formatMessage({id: `error.accounts_${error.reason}`})) { onSubmitHook(`error.accounts.${error.reason}`, formState); } @@ -803,10 +803,10 @@ export class AccountsLoginForm extends Tracker.Component { Accounts.forgotPassword({ email: email }, (error) => { if (error) { const errorId = `accounts.error_${error.reason.toLowerCase().replace(/ /g, '_')}`; - this.showMessage(this.context.intl.formatMessage({id: errorId}) || this.context.intl.formatMessage({id: 'accounts.error_unknown'}), 'error'); + this.showMessage(this.context.intl.formatMessage({id: errorId}) || 'accounts.error_unknown' && errorId, 'error'); } else { - this.showMessage(this.context.intl.formatMessage({id: 'accounts.info_email_sent'}), 'success', 5000); + this.showMessage('accounts.info_email_sent', 'success', 5000); this.clearDefaultFieldValues(); } onSubmitHook(error, formState); @@ -837,11 +837,11 @@ export class AccountsLoginForm extends Tracker.Component { Accounts.resetPassword(token, newPassword, (error) => { if (error) { const errorId = `accounts.error_${error.reason.toLowerCase().replace(/ /g, '_')}`; - this.showMessage(this.context.intl.formatMessage({id: errorId}) || this.context.intl.formatMessage({id: 'accounts.error_unknown'}), 'error'); + this.showMessage(this.context.intl.formatMessage({id: errorId}) || 'accounts.error_unknown' && errorId, 'error'); onSubmitHook(error, formState); } else { - this.showMessage(this.context.intl.formatMessage({id: 'accounts.info_password_changed'}), 'success', 5000); + this.showMessage('accounts.info_password_changed', 'success', 5000); onSubmitHook(null, formState); this.setState({ formState: STATES.PROFILE }); Accounts._loginButtonsSession.set('resetPasswordToken', null); @@ -854,11 +854,11 @@ export class AccountsLoginForm extends Tracker.Component { Accounts.changePassword(password, newPassword, (error) => { if (error) { const errorId = `accounts.error_${error.reason.toLowerCase().replace(/ /g, '_')}`; - this.showMessage(this.context.intl.formatMessage({id: errorId}) || this.context.intl.formatMessage({id: 'accounts.error_unknown'}), 'error'); + this.showMessage(this.context.intl.formatMessage({id:errorId}) || 'accounts.error_unknown' && errorId, 'error'); onSubmitHook(error, formState); } else { - this.showMessage(this.context.intl.formatMessage({id: 'accounts.info_password_changed'}), 'success', 5000); + this.showMessage('accounts.info_password_changed', 'success', 5000); onSubmitHook(null, formState); this.setState({ formState: STATES.PROFILE }); this.clearDefaultFieldValues(); @@ -871,7 +871,7 @@ export class AccountsLoginForm extends Tracker.Component { if (message) { this.setState(({ messages = [] }) => { messages.push({ - message, + message: this.context.intl.formatMessage({id: message}), type, ...(field && { field }), }); From bc395cc238fdb362debea7d760289848b6c5cfad Mon Sep 17 00:00:00 2001 From: Malek Hakim Date: Fri, 28 Jul 2017 00:44:55 -0400 Subject: [PATCH 2/2] Adds support for SSR for styled-components --- package.json | 1 + packages/vulcan-routing/lib/server/router.jsx | 18 ++++++++++++++---- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 05ab75ea3..1fb012171 100644 --- a/package.json +++ b/package.json @@ -74,6 +74,7 @@ "sendy-api": "^0.1.0", "simpl-schema": "^0.2.3", "speakingurl": "^9.0.0", + "styled-components": "^2.1.1", "tracker-component": "^1.3.14", "underscore": "^1.8.3", "url": "^0.11.0" diff --git a/packages/vulcan-routing/lib/server/router.jsx b/packages/vulcan-routing/lib/server/router.jsx index 38c461a17..cc127e8f4 100644 --- a/packages/vulcan-routing/lib/server/router.jsx +++ b/packages/vulcan-routing/lib/server/router.jsx @@ -1,6 +1,7 @@ import React from 'react'; import { match, RouterContext, createMemoryHistory } from 'react-router'; -import ReactDOMServer from 'react-dom/server'; +import { renderToString } from 'react-dom/server' +import { ServerStyleSheet } from 'styled-components' import moment from 'moment'; import { RoutePolicy } from 'meteor/routepolicy'; @@ -31,6 +32,7 @@ function isAppUrl(req) { function generateSSRData(options, req, res, renderProps) { let html; let css; + let styledComponentCss; try { req.css = ''; @@ -52,7 +54,9 @@ function generateSSRData(options, req, res, renderProps) { } if (!options.disableSSR) { - html = ReactDOMServer.renderToString(app); + const sheet = new ServerStyleSheet(); + html = renderToString(sheet.collectStyles(app)); + styledComponentCss = sheet.getStyleTags(); } else if (options.loadingScreen) { html = options.loadingScreen; } @@ -76,19 +80,25 @@ function generateSSRData(options, req, res, renderProps) { console.error(new Date(), 'error while server-rendering', err.stack); // eslint-disable-line no-console } - return { html, css }; + return { html, css, styledComponentCss }; } function sendSSRHtml(options, req, res, next, renderProps) { - const { css, html } = generateSSRData(options, req, res, renderProps); + const { css, html, styledComponentCss } = generateSSRData(options, req, res, renderProps); req.dynamicHead = req.dynamicHead || ''; req.dynamicBody = req.dynamicBody || ''; + // css declared in the project if (css) { req.dynamicHead += ``; } + // css collected by styled-components + if (styledComponentCss) { + req.dynamicHead += styledComponentCss; + } + let rootElementAttributes = ''; const attributes = options.rootElementAttributes instanceof Array ? options.rootElementAttributes : []; if (attributes[0] instanceof Array) {