application/components/layout/ceo-appbar.js

import React, {Component} from 'react';

import ceoTheme from './../../theme';

import Menu from 'material-ui/Menu';
import MenuItem from 'material-ui/MenuItem';
import IconMenu from 'material-ui/IconMenu';
import IconButton from 'material-ui/IconButton';
import RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';
import TextField from 'material-ui/TextField';
import FontIcon from 'material-ui/FontIcon';
import Avatar from 'material-ui/Avatar';

import {fade} from 'material-ui/utils/colorManipulator';

import {Row, Col} from './../flexbox';

import {Link, browserHistory} from 'react-router';

import Config from '../../config';
import CurrentUser from '../../current-user';

import CeoLogoSmall from './ceo-logo-small';

import {ENTER_KEY} from '../../util/key-codes';
import URI from 'urijs';


class CeoAppBar extends Component {

    constructor(props) {
        super(props);

        const isAdmin = CurrentUser.hasRole('Administrator');
        const hasSsl = (Config.get('base_url').indexOf('https://') !== -1);

        let hasChecked = parseInt(localStorage.getItem('_notification'));
        if (hasChecked) {
            const delta = Date.now() - hasChecked;
            if (delta > (604800*1000)) { // 7 days
                hasChecked = false;
            } else {
                hasChecked = true;
            }
        }

        let showNotification = false;
        if (isAdmin && !hasSsl && !hasChecked) {
            showNotification = true;
        }

        this.state = {
            showNotification: showNotification
        };
    }

    // hacky, but alignments are a bear
    loadHelp(e) {
        browserHistory.push('/ceo/support');
    }

    handleKeyPress(e) {
        const val = e.target.value;
        if (e.keyCode !== ENTER_KEY) {
            return;
        }

        const query =  URI(URI.buildQuery({'q': val}))
            .duplicateQueryParameters(false)
            .normalizeQuery()
            .toString();

        const search_url = '/ceo/search?' + query;

        browserHistory.push(search_url);
    }

    handleCloseNotification(e) {
        e.preventDefault();
        e.stopPropagation();

        this.setState({
            showNotification: false
        });

        localStorage.setItem('_notification', Date.now());
    }

    render() {

        if (this.state.showNotification) {
            const buttonStyles = {
                border: '1px solid #999',
                borderRadius: '6px',
                fontWeight: '700',
                padding: '2px 8px',
                color: '#333',
                textDecoration: 'none',
                display: 'inline-block',
                marginLeft: '10px',
            };

            return (
                <div className="appbar" style={{'backgroundColor':'#FFFFE0', 'height': '45px', 'padding':'10px'}}>
                    <div>
                        <strong>Hey There!</strong> Your site may not have an SSL certificate? SNworks provides them for free, just <a href="https://snworks.zendesk.com/hc/en-us/articles/360000949786-Enabling-SSL" target="_blank">follow these directions or contact support</a>.
                        <a href="#" style={buttonStyles} onClick={this.handleCloseNotification.bind(this)}>OK</a>
                    </div>
                </div>
            );
        }

        return (
            <div className='appbar' style={{'backgroundColor':ceoTheme.palette.primary1Color}}>
                <div className='appbar-logo'>
                    <Link to='/ceo'>
                        <div className='appbar-title'>
                            <CeoLogoSmall width='auto' height='24px' fill='#FFFFFF' />
                        </div>
                    </Link>
                </div>
                <div className='appbar-search'>
                    <div className="box appbar-input-wrap">
                        <FontIcon className='mui-icons' style={{color:'#FFFFFF'}}>search</FontIcon>
                        <input className="appbar-input" type="text" placeholder="Search" onKeyUp={this.handleKeyPress.bind(this)} />
                    </div>
                </div>
                <div className='appbar-nav'>
                    <div>
                        <FlatButton
                            label='Service Status'
                            labelStyle={{'color':'white'}}
                            href='http://uptime.getsnworks.com'
                            target='_blank'
                            />
                        <FlatButton
                            label='Help'
                            labelStyle={{'color':'white'}}
                            onClick={this.loadHelp.bind(this)}
                            />
                        <FlatButton
                            label='Visit Site'
                            labelStyle={{'color':'white'}}
                            href={Config.get('base_url')}
                            target='_blank'
                            />
                    </div>
                    <IconMenu
                        style={{marginRight: '-4px'}}
                        anchorOrigin={{horizontal: 'right', vertical: 'bottom'}}
                        targetOrigin={{horizontal: 'right', vertical: 'top'}}
                        iconButtonElement={
                            <IconButton style={{'padding':'0px'}}>
                                <Avatar src={CurrentUser.getGravatar() ? CurrentUser.getGravatar() : ''}/>
                            </IconButton>
                        }
                        >
                        <MenuItem primaryText="Change password" onClick={this.props.onRequestPasswordChange} />
                        <MenuItem primaryText="Log out" linkButton={true} href='/ceo/auth/logout' />
                    </IconMenu>
                </div>
            </div>
        );
    }
}

export default CeoAppBar;