From 66dbf3da7168eb2c7713054cd170feb8296a2d1d Mon Sep 17 00:00:00 2001
From: vrde <agranzot@gmail.com>
Date: Tue, 13 Oct 2015 16:42:40 +0200
Subject: [PATCH] Add document title management for the ascribe app

---
 .../ascribe_settings/account_settings.js      |  2 +-
 .../ascribe_settings/contract_settings.js     |  5 +++-
 .../ascribe_settings/settings_container.js    |  4 +++
 js/components/coa_verify_container.js         |  3 ++
 js/components/login_container.js              |  3 ++
 js/components/logout_container.js             |  5 ++++
 js/components/password_reset_container.js     |  3 ++
 js/components/piece_list.js                   |  3 ++
 js/components/register_piece.js               |  3 ++
 js/components/signup_container.js             |  3 ++
 js/utils/dom_utils.js                         | 30 +++++++++++++++++++
 11 files changed, 62 insertions(+), 2 deletions(-)
 create mode 100644 js/utils/dom_utils.js

diff --git a/js/components/ascribe_settings/account_settings.js b/js/components/ascribe_settings/account_settings.js
index 1898c599..e7bc4c2a 100644
--- a/js/components/ascribe_settings/account_settings.js
+++ b/js/components/ascribe_settings/account_settings.js
@@ -103,4 +103,4 @@ let AccountSettings = React.createClass({
     }
 });
 
-export default AccountSettings;
\ No newline at end of file
+export default AccountSettings;
diff --git a/js/components/ascribe_settings/contract_settings.js b/js/components/ascribe_settings/contract_settings.js
index 741039ee..71d97542 100644
--- a/js/components/ascribe_settings/contract_settings.js
+++ b/js/components/ascribe_settings/contract_settings.js
@@ -23,6 +23,7 @@ import GlobalNotificationActions from '../../actions/global_notification_actions
 import AclProxy from '../acl_proxy';
 
 import { getLangText } from '../../utils/lang_utils';
+import { setDocumentTitle } from '../../utils/dom_utils';
 import { mergeOptions, truncateTextAtCharIndex } from '../../utils/general_utils';
 
 
@@ -86,6 +87,8 @@ let ContractSettings = React.createClass({
         let privateContracts = this.getPrivateContracts();
         let createPublicContractForm = null;
 
+        setDocumentTitle(getLangText('Contracts settings'));
+
         if(publicContracts.length === 0) {
             createPublicContractForm = (
                 <CreateContractForm
@@ -193,4 +196,4 @@ let ContractSettings = React.createClass({
     }
 });
 
-export default ContractSettings;
\ No newline at end of file
+export default ContractSettings;
diff --git a/js/components/ascribe_settings/settings_container.js b/js/components/ascribe_settings/settings_container.js
index 57c5b269..923759fd 100644
--- a/js/components/ascribe_settings/settings_container.js
+++ b/js/components/ascribe_settings/settings_container.js
@@ -15,6 +15,8 @@ import APISettings from './api_settings';
 import AclProxy from '../acl_proxy';
 
 import { mergeOptions } from '../../utils/general_utils';
+import { getLangText } from '../../utils/lang_utils';
+import { setDocumentTitle } from '../../utils/dom_utils';
 
 
 let SettingsContainer = React.createClass({
@@ -53,6 +55,8 @@ let SettingsContainer = React.createClass({
     },
 
     render() {
+        setDocumentTitle(getLangText('Account settings'));
+
         if (this.state.currentUser && this.state.currentUser.username) {
             return (
                 <div className="settings-container">
diff --git a/js/components/coa_verify_container.js b/js/components/coa_verify_container.js
index a61e2d87..339b53f1 100644
--- a/js/components/coa_verify_container.js
+++ b/js/components/coa_verify_container.js
@@ -11,10 +11,13 @@ import InputTextAreaToggable from './ascribe_forms/input_textarea_toggable';
 
 import ApiUrls from '../constants/api_urls';
 import { getLangText } from '../utils/lang_utils';
+import { setDocumentTitle } from '../utils/dom_utils';
 
 
 let CoaVerifyContainer = React.createClass({
     render() {
+        setDocumentTitle(getLangText('Verify your Certificate of Authenticity'));
+
         return (
             <div className="ascribe-login-wrapper">
                 <br/>
diff --git a/js/components/login_container.js b/js/components/login_container.js
index 33919cd6..46c14d65 100644
--- a/js/components/login_container.js
+++ b/js/components/login_container.js
@@ -6,6 +6,7 @@ import { Link } from 'react-router';
 import LoginForm from './ascribe_forms/form_login';
 
 import { getLangText } from '../utils/lang_utils';
+import { setDocumentTitle } from '../utils/dom_utils';
 
 
 let LoginContainer = React.createClass({
@@ -26,6 +27,8 @@ let LoginContainer = React.createClass({
     },
 
     render() {
+        setDocumentTitle(getLangText('Log in'));
+
         return (
             <div className="ascribe-login-wrapper">
                 <LoginForm
diff --git a/js/components/logout_container.js b/js/components/logout_container.js
index fe8dec07..205873ce 100644
--- a/js/components/logout_container.js
+++ b/js/components/logout_container.js
@@ -6,6 +6,9 @@ import { History } from 'react-router';
 import UserActions from '../actions/user_actions';
 import { alt, altWhitelabel, altUser, altThirdParty } from '../alt';
 
+import { getLangText } from '../utils/lang_utils';
+import { setDocumentTitle } from '../utils/dom_utils';
+
 
 let LogoutContainer = React.createClass({
 
@@ -22,6 +25,8 @@ let LogoutContainer = React.createClass({
     },
 
     render() {
+        setDocumentTitle(getLangText('Log out'));
+
         return null;
     }
 
diff --git a/js/components/password_reset_container.js b/js/components/password_reset_container.js
index 1009a0f4..a24cafc6 100644
--- a/js/components/password_reset_container.js
+++ b/js/components/password_reset_container.js
@@ -10,6 +10,7 @@ import ApiUrls from '../constants/api_urls';
 import GlobalNotificationModel from '../models/global_notification_model';
 import GlobalNotificationActions from '../actions/global_notification_actions';
 import { getLangText } from '../utils/lang_utils';
+import { setDocumentTitle } from '../utils/dom_utils';
 
 
 let PasswordResetContainer = React.createClass({
@@ -75,6 +76,8 @@ let PasswordRequestResetForm = React.createClass({
     },
 
     render() {
+        setDocumentTitle(getLangText('Reset your password'));
+
         return (
             <Form
                 ref="form"
diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index 62bc61d8..61efe689 100644
--- a/js/components/piece_list.js
+++ b/js/components/piece_list.js
@@ -24,6 +24,7 @@ import AppConstants from '../constants/application_constants';
 
 import { mergeOptions } from '../utils/general_utils';
 import { getLangText } from '../utils/lang_utils';
+import { setDocumentTitle } from '../utils/dom_utils';
 
 
 let PieceList = React.createClass({
@@ -153,6 +154,8 @@ let PieceList = React.createClass({
         let loadingElement = (<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />);
         let AccordionListItemType = this.props.accordionListItemType;
 
+        setDocumentTitle(getLangText('Collection'));
+
         return (
             <div>
                 <PieceListToolbar
diff --git a/js/components/register_piece.js b/js/components/register_piece.js
index 02ca79a0..f127c149 100644
--- a/js/components/register_piece.js
+++ b/js/components/register_piece.js
@@ -22,6 +22,7 @@ import RegisterPieceForm from './ascribe_forms/form_register_piece';
 
 import { mergeOptions } from '../utils/general_utils';
 import { getLangText } from '../utils/lang_utils';
+import { setDocumentTitle } from '../utils/dom_utils';
 
 
 let RegisterPiece = React.createClass( {
@@ -115,6 +116,8 @@ let RegisterPiece = React.createClass( {
     },
 
     render() {
+        setDocumentTitle(getLangText('Register a new piece'));
+
         return (
             <Row className="no-margin">
                 <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
diff --git a/js/components/signup_container.js b/js/components/signup_container.js
index 7c7b5ee7..e6c6fb73 100644
--- a/js/components/signup_container.js
+++ b/js/components/signup_container.js
@@ -6,6 +6,7 @@ import { Link } from 'react-router';
 import SignupForm from './ascribe_forms/form_signup';
 
 import { getLangText } from '../utils/lang_utils';
+import { setDocumentTitle } from '../utils/dom_utils';
 
 
 let SignupContainer = React.createClass({
@@ -28,6 +29,8 @@ let SignupContainer = React.createClass({
     },
 
     render() {
+        setDocumentTitle(getLangText('Sign up'));
+
         if (this.state.submitted){
             return (
                 <div className="ascribe-login-wrapper">
diff --git a/js/utils/dom_utils.js b/js/utils/dom_utils.js
new file mode 100644
index 00000000..13f42cf2
--- /dev/null
+++ b/js/utils/dom_utils.js
@@ -0,0 +1,30 @@
+'use strict';
+
+
+/**
+ * Get the number of unread notifications in the title.
+ *
+ * @return {int} the number of unread notifications
+ */
+export function getUnreadCount() {
+    const match = document.title.match(/^\((\d+)\)/);
+    return match ? match[1] : null;
+}
+
+
+/**
+ * Set the title in the browser window while keeping the unread notification count (if any).
+ *
+ * @return {string} the new document title
+ */
+export function setDocumentTitle(title) {
+    const count = getUnreadCount();
+    let newTitle = title;
+
+    if (count) {
+        newTitle = `(${count}) ` + newTitle;
+    }
+
+    document.title = newTitle;
+    return newTitle;
+}