Merge pull request #2023 from ZBoxApp/PLT-7-templates

PLT-7: Refactoring frontend (chunk 6)

i18n/en.json

@@ -3203,6 +3203,22 @@
     "id": "web.find_team.title",
     "translation": "Find Team"
   },
+  {
+    "id": "web.footer.about",
+    "translation": "About"
+  },
+  {
+    "id": "web.footer.help",
+    "translation": "Help"
+  },
+  {
+    "id": "web.footer.privacy",
+    "translation": "Privacy"
+  },
+  {
+    "id": "web.footer.terms",
+    "translation": "Terms"
+  },
   {
     "id": "web.get_access_token.bad_client_id.app_error",
     "translation": "invalid_request: Bad client_id"

i18n/es.json

@@ -3203,6 +3203,22 @@
     "id": "web.find_team.title",
     "translation": "Encontrar Equipo"
   },
+  {
+    "id": "web.footer.about",
+    "translation": "Acerca"
+  },
+  {
+    "id": "web.footer.help",
+    "translation": "Ayuda"
+  },
+  {
+    "id": "web.footer.privacy",
+    "translation": "Privacidad"
+  },
+  {
+    "id": "web.footer.terms",
+    "translation": "Términos"
+  },
   {
     "id": "web.get_access_token.bad_client_id.app_error",
     "translation": "invalid_request: client_id malo"

web/react/components/authorize.jsx

@@ -3,7 +3,7 @@
 
 import * as Client from '../utils/client.jsx';
 
-import {FormattedMessage} from 'mm-intl';
+import {FormattedMessage, FormattedHTMLMessage} from 'mm-intl';
 
 export default class Authorize extends React.Component {
     constructor(props) {
@@ -35,9 +35,18 @@ export default class Authorize extends React.Component {
     }
     render() {
         return (
-            <div className='authorize-box'>
+            <div className='container-fluid'>
-                <div className='authorize-inner'>
+                <div className='oauth-prompt'>
-                    <h3>
+                    <div className='prompt__heading'>
+                        <div className='prompt__app-icon'>
+                            <img
+                                src='/static/images/icon50x50.png'
+                                width='50'
+                                height='50'
+                                alt=''
+                            />
+                        </div>
+                        <div className='text'>
                             <FormattedMessage
                                 id='authorize.title'
                                 defaultMessage='An application would like to connect to your {teamName} account'
@@ -45,28 +54,27 @@ export default class Authorize extends React.Component {
                                     teamName: this.props.teamName
                                 }}
                             />
-                    </h3>
+                        </div>
-                    <label>
+                    </div>
-                        <FormattedMessage
+                    <p>
+                        <FormattedHTMLMessage
                             id='authorize.app'
-                            defaultMessage='The app {appName} would like the ability to access and modify your basic information.'
+                            defaultMessage='The app <strong>{appName}</strong> would like the ability to access and modify your basic information.'
                             values={{
                                 appName: this.props.appName
                             }}
                         />
-                    </label>
+                    </p>
-                    <br/>
+                    <h2 className='prompt__allow'>
-                    <br/>
+                        <FormattedHTMLMessage
-                    <label>
-                        <FormattedMessage
                             id='authorize.access'
-                            defaultMessage='Allow {appName} access?'
+                            defaultMessage='Allow <strong>{appName}</strong> access?'
                             values={{
                                 appName: this.props.appName
                             }}
                         />
-                    </label>
+                    </h2>
-                    <br/>
+                    <div className='prompt__buttons'>
                         <button
                             type='submit'
                             className='btn authorize-btn'
@@ -89,6 +97,7 @@ export default class Authorize extends React.Component {
                         </button>
                     </div>
                 </div>
+            </div>
         );
     }
 }

web/react/components/signup_team_confirm.jsx

@@ -0,0 +1,39 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {FormattedMessage, FormattedHTMLMessage} from 'mm-intl';
+
+export default class SignupTeamConfirm extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div className='signup-team__container'>
+                <h3>
+                    <FormattedMessage
+                        id='signup_team_confirm.title'
+                        defaultMessage='Sign up Complete'
+                    />
+                </h3>
+                <p>
+                    <FormattedHTMLMessage
+                        id='signup_team_confirm.checkEmail'
+                        defaultMessage='Please check your email: <strong>{email}</strong><br />Your email contains a link to set up your team'
+                        values={{
+                            email: this.props.email
+                        }}
+                    />
+                </p>
+            </div>
+        );
+    }
+}
+
+SignupTeamConfirm.defaultProps = {
+    email: ''
+};
+SignupTeamConfirm.propTypes = {
+    email: React.PropTypes.string
+};

web/react/pages/signup_team_confirm.jsx

@@ -0,0 +1,64 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import SignupTeamConfirm from '../components/signup_team_confirm.jsx';
+import * as Client from '../utils/client.jsx';
+
+var IntlProvider = ReactIntl.IntlProvider;
+
+class Root extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            translations: null,
+            loaded: false
+        };
+    }
+
+    static propTypes() {
+        return {
+            map: React.PropTypes.object.isRequired
+        };
+    }
+
+    componentWillMount() {
+        Client.getTranslations(
+            this.props.map.Locale,
+            (data) => {
+                this.setState({
+                    translations: data,
+                    loaded: true
+                });
+            },
+            () => {
+                this.setState({
+                    loaded: true
+                });
+            }
+        );
+    }
+
+    render() {
+        if (!this.state.loaded) {
+            return <div></div>;
+        }
+
+        return (
+            <IntlProvider
+                locale={this.props.map.Locale}
+                messages={this.state.translations}
+            >
+                <SignupTeamConfirm
+                    email={this.props.map.Email}
+                />
+            </IntlProvider>
+        );
+    }
+}
+
+global.window.setup_signup_team_confirm_page = function setup(props) {
+    ReactDOM.render(
+        <Root map={props} />,
+        document.getElementById('signup-team-confirm')
+    );
+};

web/static/i18n/en.json

@@ -397,8 +397,8 @@
   "admin.user_item.makeInactive": "Make Inactive",
   "admin.user_item.resetPwd": "Reset Password",
   "authorize.title": "An application would like to connect to your {teamName} account",
-  "authorize.app": "The app {appName} would like the ability to access and modify your basic information.",
+  "authorize.app": "The app <strong>{appName}</strong> would like the ability to access and modify your basic information.",
-  "authorize.access": "Allow {appName} access?",
+  "authorize.access": "Allow <strong>{appName}</strong> access?",
   "authorize.deny": "Deny",
   "authorize.allow": "Allow",
   "claim.account.noEmail": "No email specified",
@@ -470,6 +470,8 @@
   "password_send.description": "To reset your password, enter the email address you used to sign up for {teamName}.",
   "password_send.reset": "Reset my password",
   "signup_team_complete.completed": "You've already completed the signup process for this invitation or this invitation has expired.",
+  "signup_team_confirm.title": "Sign up Complete",
+  "signup_team_confirm.checkEmail": "Please check your email: <strong>{email}</strong><br />Your email contains a link to set up your team",
   "signup_team.noTeams": "There are no teams include in the Team Directory and team creation has been disabled.",
   "signup_team.choose": "Choose a Team",
   "signup_team.createTeam": "Or Create a Team",

web/static/i18n/es.json

@@ -484,6 +484,8 @@
   "signup_team.noTeams": "No hay equipos en el Directorio de Equipos y la creación de equipos ha sido deshabilitada.",
   "signup_team.none": "No se ha habilitado ningún método para creación de equipos.  Por favor contacta a un administrador de sistema para solicitar acceso.",
   "signup_team_complete.completed": "Ya haz completado el proceso de entrada para esta invitación, o esta invitación ya ha expirado.",
+  "signup_team_confirm.checkEmail": "Por favor revisa tu correo electrónico: <strong>{email}</strong><br />Se ha enviado un correo con un enlace para configurar tu equipo",
+  "signup_team_confirm.title": "Registro Completado",
   "signup_user_completed.choosePwd": "Escoge tu contraseña",
   "signup_user_completed.chooseUser": "Escoge tu nombre de usuario",
   "signup_user_completed.create": "Crea una Cuenta",

web/templates/authorize.html

@@ -2,24 +2,10 @@
 <html>
 {{template "head" . }}
 <body>
-    <div class="container-fluid">
+    <div id="authorize">
-        <div class="oauth-prompt">
-            <div class="prompt__heading">
-                <div class="prompt__app-icon">
-                    <img src="/static/images/icon50x50.png" width="50" height="50" alt="">
-                </div>
-                <div class="text">An application would like to connect to your {{.Props.TeamName}} account.</div>
-            </div>
-            <p>The app <strong>{{.Props.AppName}}</strong> would like the ability to access Mattermost on your behalf.</p>
-            <h2 class="prompt__allow">Allow <strong>{{.Props.AppName}}</strong> access?</h2>
-            <div class="prompt__buttons">
-                <input type="button" class="btn btn-link" value="Deny">
-                <input type="button" class="btn btn-primary" value="Allow">
-            </div>
-        </div>
     </div>
     <script>
-        window.setup_authorize_page('{{.Props}}');
+        window.setup_authorize_page({{.Props}});
     </script>
 </body>
 </html>

web/templates/footer.html

@@ -5,10 +5,10 @@
     </div>
     <div class="col-xs-12">
         <span class="pull-right footer-link copyright">© 2015 Mattermost, Inc.</span>
-        <a id="help_link" class="pull-right footer-link" href="#">Help</a>
+        <a id="help_link" class="pull-right footer-link" href="#">{{ .ClientCfg.FooterHelp }}</a>
-        <a id="terms_link" class="pull-right footer-link" href="#">Terms</a>
+        <a id="terms_link" class="pull-right footer-link" href="#">{{ .ClientCfg.FooterTerms }}</a>
-        <a id="privacy_link" class="pull-right footer-link" href="#">Privacy</a>
+        <a id="privacy_link" class="pull-right footer-link" href="#">{{ .ClientCfg.FooterPrivacy }}</a>
-        <a id="about_link" class="pull-right footer-link" href="#">About</a>
+        <a id="about_link" class="pull-right footer-link" href="#">{{ .ClientCfg.FooterAbout }}</a>
     </div>
 </div>
 <script>

web/templates/signup_team_confirm.html

@@ -7,11 +7,7 @@
         <div class="inner__wrap">
             <div class="row content">
                 <div class="col-sm-12">
-                    <div class="signup-team__container">
+                    <div id="signup-team-confirm"></div>
-                        <h3>Sign up Complete</h3>
-                        <p>Please check your email: {{ .Props.Email }}<br>
-                        Your email contains a link to set up your team</p>
-                    </div>
                 </div>
             </div>
             <div class="row footer">
@@ -19,6 +15,9 @@
             </div>
         </div>
     </div>
+    <script>
+window.setup_signup_team_confirm_page({{ .Props }});
+    </script>
 </body>
 </html>
 {{end}}

web/web.go

@@ -54,6 +54,11 @@ func (me *HtmlTemplatePage) Render(c *api.Context, w http.ResponseWriter) {
 	me.Props["Locale"] = me.Locale
 	me.SessionTokenIndex = c.SessionTokenIndex
 
+	me.ClientCfg["FooterHelp"] = c.T("web.footer.help")
+	me.ClientCfg["FooterTerms"] = c.T("web.footer.terms")
+	me.ClientCfg["FooterPrivacy"] = c.T("web.footer.privacy")
+	me.ClientCfg["FooterAbout"] = c.T("web.footer.about")
+
 	if err := Templates.ExecuteTemplate(w, me.TemplateName, me); err != nil {
 		c.SetUnknownError(me.TemplateName, err.Error())
 	}