Add document title management for the ascribe app

js/components/ascribe_settings/account_settings.js

@@ -103,4 +103,4 @@ let AccountSettings = React.createClass({
     }
 });
 
-export default AccountSettings;
+export default AccountSettings;

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;
+export default ContractSettings;

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">

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/>

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

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;
     }
 

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"

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

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}>

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">

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;
+}