SwitchHosts/ui/frame/sudo.jsx

/**
 * @author oldj
 * @blog http://oldj.net
 */

'use strict'

import React from 'react'
import Agent from '../Agent'
import MyFrame from './frame'
import './sudo.less'

export default class SudoPrompt extends React.Component {
  constructor (props) {
    super(props)

    this.onSuccess = null
    this.state = {
      show: false,
      pswd: ''
    }
  }

  componentDidMount () {
    Agent.on('sudo_prompt', (success) => {
      this.setState({show: true})
      this.onSuccess = success
      setTimeout(() => {
        let el = this.refs.body
        el && el.querySelector('input').focus()
      }, 100)
    })
  }

  onOK () {
    let pswd = this.refs.pswd.value
    if (!pswd) {
      let el = this.refs.body
      el && el.querySelector('input').focus()
      return
    }

    this.setState({
      show: false,
      pswd: pswd
    })

    Agent.emit('sudo_pswd', pswd)
    if (typeof this.onSuccess === 'function') {
      this.onSuccess(pswd)
    }
    this.onSuccess = null
  }

  onCancel () {
    Agent.emit('sudo_cancel')
    this.setState({
      show: false
    })
    this.onSuccess = null
  }

  body () {
    let {lang} = this.props
    return (
      <div ref="body">
        <div className="ln">
          <div className="title">{lang.sudo_pswd}</div>
          <div className="cnt">
            <input
              type="password"
              ref="pswd"
              onKeyDown={e => (e.keyCode === 13 && this.onOK() ||
                                 e.keyCode === 27 && this.onCancel())}
            />
          </div>
        </div>
      </div>
    )
  }

  render () {
    let {lang} = this.props
    return (
      <MyFrame
        show={this.state.show}
        head={lang.input_sudo_pswd}
        body={this.body()}
        onOK={() => this.onOK()}
        onCancel={() => this.onCancel()}
        lang={lang}
      />
    )
  }
}