summaryrefslogtreecommitdiff
path: root/ui/app/components/password_field.js
blob: 654b8a5765392cae649d43bdcd0a7bf6a17fddc1 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
//
// A validating password field, with a label and error messages.
//

import React from 'react'
import { FormGroup, ControlLabel, FormControl, HelpBlock} from 'react-bootstrap'
import Validate from 'lib/validate'

export default class PasswordField extends React.Component {

  static get defaultProps() {
    return {
      id: null,                // required. controlId of the element
      label: "Password",
      onChange: null,          // callback passed current password
      validationMode: "crack", // one of 'none', 'match', 'crack'
      matchText: null,         // used if validationMode == 'match'
      inputRef: null,          // a ref to the input. Used to set focus
    }
  }

  constructor(props) {
    super(props)
    this.state = {
      password: null,       // password value
      passwordState: null,  // password validation state
      passwordError: false, // password help message
    }
    this.keypress = this.keypress.bind(this)
  }

  componentDidMount() {
    if (this.props.validationMode == 'crack') {
      Validate.loadPasswdLib()
    }
  }

  render() {
    let passwordHelp = null

    if (this.state.passwordError) {
      passwordHelp = <HelpBlock>{this.state.passwordError}</HelpBlock>
    }

    return (
      <FormGroup controlId={this.props.id} validationState={this.state.passwordState}>
        <ControlLabel>{this.props.label}</ControlLabel>
        <FormControl
            type="password"
            inputRef={this.props.inputRef}
            value={this.state.password || ""}
            onChange={this.keypress}
        />
        {this.state.passwordState == 'success' ? null : <FormControl.Feedback/>}
        {passwordHelp}
      </FormGroup>
    )
  }

  keypress(e) {
    let password = e.target.value
    if (this.props.onChange) {
      this.props.onChange(password)
    }
    this.setState({password: password})
    if (this.props.validationMode == 'crack') {
      if (password.length > 0) {
        this.validateCrack(password)
      } else {
        this.setState({
          passwordState: null,
          passwordError: null
        })
      }
    } else if (this.props.validationMode == 'match') {
      this.validateMatch(password)
    }
  }

  validateCrack(password) {
    let state = null
    let message = null
    let result = Validate.passwordStrength(password)
    if (result) {
      message = "Time to crack: " + result.crack_times_display.offline_slow_hashing_1e4_per_second
      if (result.score == 0) {
        state = 'error'
      } else if (result.score == 1 || result.score == 2) {
        state = 'warning'
      } else {
        state = 'success'
      }
    }
    this.setState({
      passwordState: state,
      passwordError: message
    })
  }

  validateMatch(password) {
    if (this.props.matchText) {
      if (password != this.props.matchText) {
        this.setState({
          passwordState: 'error',
          passwordError: "Does not match"
        })
      } else {
        this.setState({
          passwordState: 'success',
          passwordError: null
        })
      }
    }
  }

}