Hex Artifact Content
Not logged in

Artifact 8a0a7bf70c0b9a47053637928d4e67061f05a4e9:


0000: 69 6d 70 6f 72 74 20 52 65 61 63 74 2c 20 7b 20  import React, { 
0010: 43 6f 6d 70 6f 6e 65 6e 74 2c 20 50 72 6f 70 54  Component, PropT
0020: 79 70 65 73 20 7d 20 66 72 6f 6d 20 27 72 65 61  ypes } from 'rea
0030: 63 74 27 3b 0a 69 6d 70 6f 72 74 20 63 6c 61 73  ct';.import clas
0040: 73 4e 61 6d 65 73 20 66 72 6f 6d 20 27 63 6c 61  sNames from 'cla
0050: 73 73 6e 61 6d 65 73 27 3b 0a 69 6d 70 6f 72 74  ssnames';.import
0060: 20 7b 20 54 72 61 6e 73 6c 61 74 65 2c 20 49 31   { Translate, I1
0070: 38 6e 20 7d 20 66 72 6f 6d 20 27 72 65 61 63 74  8n } from 'react
0080: 2d 72 65 64 75 78 2d 69 31 38 6e 27 3b 0a 69 6d  -redux-i18n';.im
0090: 70 6f 72 74 20 7a 78 63 76 62 6e 20 66 72 6f 6d  port zxcvbn from
00a0: 20 27 7a 78 63 76 62 6e 27 3b 0a 69 6d 70 6f 72   'zxcvbn';.impor
00b0: 74 20 43 4f 4e 53 54 41 4e 54 53 20 66 72 6f 6d  t CONSTANTS from
00c0: 20 27 2e 2e 2f 2e 2e 2f 63 6f 6e 73 74 61 6e 74   '../../constant
00d0: 73 2e 6a 73 6f 6e 27 3b 0a 69 6d 70 6f 72 74 20  s.json';.import 
00e0: 46 69 65 6c 64 53 74 72 65 6e 67 74 68 20 66 72  FieldStrength fr
00f0: 6f 6d 20 27 2e 2f 66 69 65 6c 64 5f 73 74 72 65  om './field_stre
0100: 6e 67 74 68 27 3b 0a 69 6d 70 6f 72 74 20 7b 20  ngth';.import { 
0110: 67 65 74 53 74 72 65 6e 67 74 68 4d 73 67 20 7d  getStrengthMsg }
0120: 20 66 72 6f 6d 20 27 2e 2e 2f 75 74 69 6c 73 27   from '../utils'
0130: 3b 0a 0a 0a 65 78 70 6f 72 74 20 64 65 66 61 75  ;...export defau
0140: 6c 74 20 63 6c 61 73 73 20 43 72 65 61 74 65 41  lt class CreateA
0150: 63 63 6f 75 6e 74 50 61 73 73 77 6f 72 64 20 65  ccountPassword e
0160: 78 74 65 6e 64 73 20 43 6f 6d 70 6f 6e 65 6e 74  xtends Component
0170: 20 7b 0a 20 20 73 74 61 74 69 63 20 70 72 6f 70   {.  static prop
0180: 54 79 70 65 73 20 3d 20 7b 0a 20 20 20 20 6e 61  Types = {.    na
0190: 76 50 6f 73 3a 20 50 72 6f 70 54 79 70 65 73 2e  vPos: PropTypes.
01a0: 6e 75 6d 62 65 72 2c 0a 20 20 20 20 65 72 72 6f  number,.    erro
01b0: 72 3a 20 50 72 6f 70 54 79 70 65 73 2e 73 74 72  r: PropTypes.str
01c0: 69 6e 67 2c 0a 20 20 20 20 70 61 73 73 77 6f 72  ing,.    passwor
01d0: 64 53 74 72 65 6e 67 74 68 3a 20 50 72 6f 70 54  dStrength: PropT
01e0: 79 70 65 73 2e 6e 75 6d 62 65 72 2c 0a 20 20 20  ypes.number,.   
01f0: 20 75 73 65 72 53 65 63 72 65 74 3a 20 50 72 6f   userSecret: Pro
0200: 70 54 79 70 65 73 2e 73 74 72 69 6e 67 2c 0a 20  pTypes.string,. 
0210: 20 20 20 75 73 65 72 50 61 73 73 77 6f 72 64 3a     userPassword:
0220: 20 50 72 6f 70 54 79 70 65 73 2e 73 74 72 69 6e   PropTypes.strin
0230: 67 2c 0a 20 20 20 20 73 65 74 43 72 65 61 74 65  g,.    setCreate
0240: 41 63 63 4e 61 76 50 6f 73 3a 20 50 72 6f 70 54  AccNavPos: PropT
0250: 79 70 65 73 2e 66 75 6e 63 2c 0a 20 20 20 20 63  ypes.func,.    c
0260: 6c 65 61 72 45 72 72 6f 72 3a 20 50 72 6f 70 54  learError: PropT
0270: 79 70 65 73 2e 66 75 6e 63 2c 0a 20 20 20 20 73  ypes.func,.    s
0280: 65 74 41 63 63 50 61 73 73 77 6f 72 64 3a 20 50  etAccPassword: P
0290: 72 6f 70 54 79 70 65 73 2e 66 75 6e 63 2c 0a 20  ropTypes.func,. 
02a0: 20 20 20 63 72 65 61 74 65 41 63 63 6f 75 6e 74     createAccount
02b0: 3a 20 50 72 6f 70 54 79 70 65 73 2e 66 75 6e 63  : PropTypes.func
02c0: 2c 0a 20 20 20 20 73 65 74 50 61 73 73 77 6f 72  ,.    setPasswor
02d0: 64 53 74 72 65 6e 67 74 68 3a 20 50 72 6f 70 54  dStrength: PropT
02e0: 79 70 65 73 2e 66 75 6e 63 2c 0a 20 20 20 20 73  ypes.func,.    s
02f0: 65 74 45 72 72 6f 72 3a 20 50 72 6f 70 54 79 70  etError: PropTyp
0300: 65 73 2e 66 75 6e 63 2c 0a 20 20 7d 3b 0a 0a 20  es.func,.  };.. 
0310: 20 63 6f 6e 73 74 72 75 63 74 6f 72 28 29 20 7b   constructor() {
0320: 0a 20 20 20 20 73 75 70 65 72 28 29 3b 0a 20 20  .    super();.  
0330: 20 20 74 68 69 73 2e 68 61 6e 64 6c 65 49 6e 70    this.handleInp
0340: 75 74 43 68 61 6e 67 65 20 3d 20 74 68 69 73 2e  utChange = this.
0350: 68 61 6e 64 6c 65 49 6e 70 75 74 43 68 61 6e 67  handleInputChang
0360: 65 2e 62 69 6e 64 28 74 68 69 73 29 3b 0a 20 20  e.bind(this);.  
0370: 20 20 74 68 69 73 2e 68 61 6e 64 6c 65 53 75 62    this.handleSub
0380: 6d 69 74 20 3d 20 74 68 69 73 2e 68 61 6e 64 6c  mit = this.handl
0390: 65 53 75 62 6d 69 74 2e 62 69 6e 64 28 74 68 69  eSubmit.bind(thi
03a0: 73 29 3b 0a 20 20 20 20 74 68 69 73 2e 74 6f 67  s);.    this.tog
03b0: 67 6c 65 50 61 73 73 77 6f 72 64 20 3d 20 74 68  glePassword = th
03c0: 69 73 2e 74 6f 67 67 6c 65 50 61 73 73 77 6f 72  is.togglePasswor
03d0: 64 2e 62 69 6e 64 28 74 68 69 73 29 3b 0a 20 20  d.bind(this);.  
03e0: 7d 0a 0a 20 20 63 6f 6d 70 6f 6e 65 6e 74 44 69  }..  componentDi
03f0: 64 4d 6f 75 6e 74 28 29 20 7b 0a 20 20 20 20 69  dMount() {.    i
0400: 66 20 28 74 68 69 73 2e 70 72 6f 70 73 2e 75 73  f (this.props.us
0410: 65 72 50 61 73 73 77 6f 72 64 29 20 7b 0a 20 20  erPassword) {.  
0420: 20 20 20 20 74 68 69 73 2e 70 61 73 73 77 6f 72      this.passwor
0430: 64 45 6c 65 2e 76 61 6c 75 65 20 3d 20 74 68 69  dEle.value = thi
0440: 73 2e 70 72 6f 70 73 2e 75 73 65 72 50 61 73 73  s.props.userPass
0450: 77 6f 72 64 3b 0a 20 20 20 20 20 20 74 68 69 73  word;.      this
0460: 2e 63 6f 6e 66 69 72 6d 50 61 73 73 77 6f 72 64  .confirmPassword
0470: 45 6c 65 2e 76 61 6c 75 65 20 3d 20 74 68 69 73  Ele.value = this
0480: 2e 70 72 6f 70 73 2e 75 73 65 72 50 61 73 73 77  .props.userPassw
0490: 6f 72 64 3b 0a 20 20 20 20 7d 0a 20 20 20 20 74  ord;.    }.    t
04a0: 68 69 73 2e 70 61 73 73 77 6f 72 64 45 6c 65 2e  his.passwordEle.
04b0: 66 6f 63 75 73 28 29 3b 0a 20 20 7d 0a 0a 20 20  focus();.  }..  
04c0: 63 6c 65 61 72 46 69 65 6c 64 4d 73 67 28 29 20  clearFieldMsg() 
04d0: 7b 0a 20 20 20 20 74 68 69 73 2e 63 6f 6e 66 69  {.    this.confi
04e0: 72 6d 50 61 73 73 77 6f 72 64 4d 73 67 45 6c 65  rmPasswordMsgEle
04f0: 2e 74 65 78 74 43 6f 6e 74 65 6e 74 20 3d 20 27  .textContent = '
0500: 27 3b 0a 20 20 20 20 74 68 69 73 2e 70 72 6f 70  ';.    this.prop
0510: 73 2e 63 6c 65 61 72 45 72 72 6f 72 28 29 3b 0a  s.clearError();.
0520: 20 20 7d 0a 0a 20 20 68 61 6e 64 6c 65 49 6e 70    }..  handleInp
0530: 75 74 43 68 61 6e 67 65 28 65 29 20 7b 0a 20 20  utChange(e) {.  
0540: 20 20 69 66 20 28 65 2e 6b 65 79 43 6f 64 65 20    if (e.keyCode 
0550: 3d 3d 3d 20 31 33 29 20 7b 0a 20 20 20 20 20 20  === 13) {.      
0560: 72 65 74 75 72 6e 3b 0a 20 20 20 20 7d 0a 0a 20  return;.    }.. 
0570: 20 20 20 74 68 69 73 2e 63 6c 65 61 72 46 69 65     this.clearFie
0580: 6c 64 4d 73 67 28 29 3b 0a 0a 20 20 20 20 63 6f  ldMsg();..    co
0590: 6e 73 74 20 65 6c 65 20 3d 20 74 68 69 73 2e 70  nst ele = this.p
05a0: 61 73 73 77 6f 72 64 45 6c 65 3b 0a 20 20 20 20  asswordEle;.    
05b0: 63 6f 6e 73 74 20 76 61 6c 75 65 20 3d 20 65 6c  const value = el
05c0: 65 2e 76 61 6c 75 65 2e 74 72 69 6d 28 29 3b 0a  e.value.trim();.
05d0: 20 20 20 20 74 68 69 73 2e 70 72 6f 70 73 2e 73      this.props.s
05e0: 65 74 50 61 73 73 77 6f 72 64 53 74 72 65 6e 67  etPasswordStreng
05f0: 74 68 28 7a 78 63 76 62 6e 28 76 61 6c 75 65 29  th(zxcvbn(value)
0600: 2e 67 75 65 73 73 65 73 5f 6c 6f 67 31 30 29 3b  .guesses_log10);
0610: 0a 20 20 7d 0a 0a 20 20 68 61 6e 64 6c 65 53 75  .  }..  handleSu
0620: 62 6d 69 74 28 65 29 20 7b 0a 20 20 20 20 65 2e  bmit(e) {.    e.
0630: 70 72 65 76 65 6e 74 44 65 66 61 75 6c 74 28 29  preventDefault()
0640: 3b 0a 0a 20 20 20 20 74 68 69 73 2e 63 6c 65 61  ;..    this.clea
0650: 72 46 69 65 6c 64 4d 73 67 28 29 3b 0a 0a 20 20  rFieldMsg();..  
0660: 20 20 63 6f 6e 73 74 20 70 61 73 73 77 6f 72 64    const password
0670: 20 3d 20 74 68 69 73 2e 70 61 73 73 77 6f 72 64   = this.password
0680: 45 6c 65 2e 76 61 6c 75 65 2e 74 72 69 6d 28 29  Ele.value.trim()
0690: 3b 0a 20 20 20 20 63 6f 6e 73 74 20 63 6f 6e 66  ;.    const conf
06a0: 69 72 6d 50 61 73 73 77 6f 72 64 20 3d 20 74 68  irmPassword = th
06b0: 69 73 2e 63 6f 6e 66 69 72 6d 50 61 73 73 77 6f  is.confirmPasswo
06c0: 72 64 45 6c 65 2e 76 61 6c 75 65 2e 74 72 69 6d  rdEle.value.trim
06d0: 28 29 3b 0a 20 20 20 20 69 66 20 28 21 70 61 73  ();.    if (!pas
06e0: 73 77 6f 72 64 20 7c 7c 20 21 63 6f 6e 66 69 72  sword || !confir
06f0: 6d 50 61 73 73 77 6f 72 64 29 20 7b 0a 20 20 20  mPassword) {.   
0700: 20 20 20 72 65 74 75 72 6e 3b 0a 20 20 20 20 7d     return;.    }
0710: 0a 20 20 20 20 69 66 20 28 74 68 69 73 2e 70 72  .    if (this.pr
0720: 6f 70 73 2e 70 61 73 73 77 6f 72 64 53 74 72 65  ops.passwordStre
0730: 6e 67 74 68 20 3c 20 43 4f 4e 53 54 41 4e 54 53  ngth < CONSTANTS
0740: 2e 50 41 53 53 50 48 52 41 53 45 5f 53 54 52 45  .PASSPHRASE_STRE
0750: 4e 47 54 48 2e 53 4f 4d 45 57 48 41 54 5f 53 45  NGTH.SOMEWHAT_SE
0760: 43 55 52 45 29 20 7b 0a 20 20 20 20 20 20 74 68  CURE) {.      th
0770: 69 73 2e 70 72 6f 70 73 2e 73 65 74 45 72 72 6f  is.props.setErro
0780: 72 28 49 31 38 6e 2e 74 28 27 6d 65 73 73 61 67  r(I18n.t('messag
0790: 65 73 2e 6e 65 65 64 5f 74 6f 5f 62 65 5f 73 74  es.need_to_be_st
07a0: 72 6f 6e 67 65 72 27 2c 20 7b 20 6e 61 6d 65 3a  ronger', { name:
07b0: 20 49 31 38 6e 2e 74 28 27 41 63 63 6f 75 6e 74   I18n.t('Account
07c0: 20 50 61 73 73 77 6f 72 64 27 29 20 7d 29 29 3b   Password') }));
07d0: 0a 20 20 20 20 20 20 72 65 74 75 72 6e 3b 0a 20  .      return;. 
07e0: 20 20 20 7d 0a 20 20 20 20 69 66 20 28 70 61 73     }.    if (pas
07f0: 73 77 6f 72 64 20 21 3d 3d 20 63 6f 6e 66 69 72  sword !== confir
0800: 6d 50 61 73 73 77 6f 72 64 29 20 7b 0a 20 20 20  mPassword) {.   
0810: 20 20 20 74 68 69 73 2e 63 6f 6e 66 69 72 6d 50     this.confirmP
0820: 61 73 73 77 6f 72 64 4d 73 67 45 6c 65 2e 74 65  asswordMsgEle.te
0830: 78 74 43 6f 6e 74 65 6e 74 20 3d 20 49 31 38 6e  xtContent = I18n
0840: 2e 74 28 27 65 6e 74 72 69 65 73 5f 6d 69 73 6d  .t('entries_mism
0850: 61 74 63 68 27 29 3b 0a 20 20 20 20 20 20 72 65  atch');.      re
0860: 74 75 72 6e 3b 0a 20 20 20 20 7d 0a 20 20 20 20  turn;.    }.    
0870: 74 68 69 73 2e 70 72 6f 70 73 2e 73 65 74 41 63  this.props.setAc
0880: 63 50 61 73 73 77 6f 72 64 28 70 61 73 73 77 6f  cPassword(passwo
0890: 72 64 29 3b 0a 0a 20 20 20 20 74 68 69 73 2e 70  rd);..    this.p
08a0: 72 6f 70 73 2e 63 72 65 61 74 65 41 63 63 6f 75  rops.createAccou
08b0: 6e 74 28 74 68 69 73 2e 70 72 6f 70 73 2e 75 73  nt(this.props.us
08c0: 65 72 53 65 63 72 65 74 2c 20 70 61 73 73 77 6f  erSecret, passwo
08d0: 72 64 29 3b 0a 20 20 7d 0a 0a 20 20 74 6f 67 67  rd);.  }..  togg
08e0: 6c 65 50 61 73 73 77 6f 72 64 28 65 29 20 7b 0a  lePassword(e) {.
08f0: 20 20 20 20 6c 65 74 20 73 72 63 20 3d 20 6e 75      let src = nu
0900: 6c 6c 3b 0a 20 20 20 20 69 66 20 28 65 2e 74 61  ll;.    if (e.ta
0910: 72 67 65 74 2e 64 61 74 61 73 65 74 2e 74 61 72  rget.dataset.tar
0920: 67 65 74 20 3d 3d 3d 20 27 70 61 73 73 77 6f 72  get === 'passwor
0930: 64 27 29 20 7b 0a 20 20 20 20 20 20 73 72 63 20  d') {.      src 
0940: 3d 20 27 70 61 73 73 77 6f 72 64 45 6c 65 27 3b  = 'passwordEle';
0950: 0a 20 20 20 20 7d 20 65 6c 73 65 20 69 66 20 28  .    } else if (
0960: 65 2e 74 61 72 67 65 74 2e 64 61 74 61 73 65 74  e.target.dataset
0970: 2e 74 61 72 67 65 74 20 3d 3d 3d 20 27 63 6f 6e  .target === 'con
0980: 66 69 72 6d 50 61 73 73 77 6f 72 64 27 29 20 7b  firmPassword') {
0990: 0a 20 20 20 20 20 20 73 72 63 20 3d 20 27 63 6f  .      src = 'co
09a0: 6e 66 69 72 6d 50 61 73 73 77 6f 72 64 45 6c 65  nfirmPasswordEle
09b0: 27 3b 0a 20 20 20 20 7d 20 65 6c 73 65 20 7b 0a  ';.    } else {.
09c0: 20 20 20 20 20 20 72 65 74 75 72 6e 3b 0a 20 20        return;.  
09d0: 20 20 7d 0a 20 20 20 20 69 66 20 28 21 74 68 69    }.    if (!thi
09e0: 73 5b 73 72 63 5d 2e 76 61 6c 75 65 2e 74 72 69  s[src].value.tri
09f0: 6d 28 29 29 20 7b 0a 20 20 20 20 20 20 72 65 74  m()) {.      ret
0a00: 75 72 6e 3b 0a 20 20 20 20 7d 0a 20 20 20 20 69  urn;.    }.    i
0a10: 66 20 28 74 68 69 73 5b 73 72 63 5d 2e 67 65 74  f (this[src].get
0a20: 41 74 74 72 69 62 75 74 65 28 27 74 79 70 65 27  Attribute('type'
0a30: 29 20 3d 3d 3d 20 27 70 61 73 73 77 6f 72 64 27  ) === 'password'
0a40: 29 20 7b 0a 20 20 20 20 20 20 65 2e 74 61 72 67  ) {.      e.targ
0a50: 65 74 2e 63 6c 61 73 73 4c 69 73 74 2e 61 64 64  et.classList.add
0a60: 28 27 61 63 74 69 76 65 27 29 3b 0a 20 20 20 20  ('active');.    
0a70: 20 20 72 65 74 75 72 6e 20 74 68 69 73 5b 73 72    return this[sr
0a80: 63 5d 2e 73 65 74 41 74 74 72 69 62 75 74 65 28  c].setAttribute(
0a90: 27 74 79 70 65 27 2c 20 27 74 65 78 74 27 29 3b  'type', 'text');
0aa0: 0a 20 20 20 20 7d 0a 20 20 20 20 65 2e 74 61 72  .    }.    e.tar
0ab0: 67 65 74 2e 63 6c 61 73 73 4c 69 73 74 2e 72 65  get.classList.re
0ac0: 6d 6f 76 65 28 27 61 63 74 69 76 65 27 29 3b 0a  move('active');.
0ad0: 20 20 20 20 72 65 74 75 72 6e 20 74 68 69 73 5b      return this[
0ae0: 73 72 63 5d 2e 73 65 74 41 74 74 72 69 62 75 74  src].setAttribut
0af0: 65 28 27 74 79 70 65 27 2c 20 27 70 61 73 73 77  e('type', 'passw
0b00: 6f 72 64 27 29 3b 0a 20 20 7d 0a 0a 20 20 72 65  ord');.  }..  re
0b10: 6e 64 65 72 28 29 20 7b 0a 20 20 20 20 63 6f 6e  nder() {.    con
0b20: 73 74 20 7b 20 70 61 73 73 77 6f 72 64 53 74 72  st { passwordStr
0b30: 65 6e 67 74 68 20 7d 20 3d 20 74 68 69 73 2e 70  ength } = this.p
0b40: 72 6f 70 73 3b 0a 0a 20 20 20 20 72 65 74 75 72  rops;..    retur
0b50: 6e 20 28 0a 20 20 20 20 20 20 3c 64 69 76 3e 0a  n (.      <div>.
0b60: 20 20 20 20 20 20 20 20 3c 68 33 20 63 6c 61 73          <h3 clas
0b70: 73 4e 61 6d 65 3d 22 68 65 61 64 69 6e 67 20 6d  sName="heading m
0b80: 64 22 3e 3c 54 72 61 6e 73 6c 61 74 65 20 76 61  d"><Translate va
0b90: 6c 75 65 3d 22 41 63 63 6f 75 6e 74 20 50 61 73  lue="Account Pas
0ba0: 73 77 6f 72 64 22 20 2f 3e 3c 2f 68 33 3e 0a 20  sword" /></h3>. 
0bb0: 20 20 20 20 20 20 20 3c 64 69 76 20 63 6c 61 73         <div clas
0bc0: 73 4e 61 6d 65 3d 22 69 6e 74 72 6f 22 3e 0a 20  sName="intro">. 
0bd0: 20 20 20 20 20 20 20 20 20 3c 64 69 76 20 63 6c           <div cl
0be0: 61 73 73 4e 61 6d 65 3d 22 69 6e 74 72 6f 2d 63  assName="intro-c
0bf0: 6e 74 22 3e 0a 20 20 20 20 20 20 20 20 20 20 20  nt">.           
0c00: 20 3c 54 72 61 6e 73 6c 61 74 65 20 76 61 6c 75   <Translate valu
0c10: 65 3d 22 41 75 74 68 49 6e 74 72 6f 2e 64 65 73  e="AuthIntro.des
0c20: 63 2e 70 61 73 73 77 6f 72 64 22 20 2f 3e 0a 20  c.password" />. 
0c30: 20 20 20 20 20 20 20 20 20 3c 2f 64 69 76 3e 0a           </div>.
0c40: 20 20 20 20 20 20 20 20 20 20 3c 64 69 76 20 63            <div c
0c50: 6c 61 73 73 4e 61 6d 65 3d 22 69 6e 74 72 6f 2d  lassName="intro-
0c60: 63 6e 74 22 3e 0a 20 20 20 20 20 20 20 20 20 20  cnt">.          
0c70: 20 20 3c 64 69 76 20 63 6c 61 73 73 4e 61 6d 65    <div className
0c80: 3d 22 66 6f 72 6d 20 69 6e 74 72 6f 2d 66 6f 72  ="form intro-for
0c90: 6d 22 3e 0a 20 20 20 20 20 20 20 20 20 20 20 20  m">.            
0ca0: 20 20 3c 66 6f 72 6d 20 69 64 3d 22 41 63 63 50    <form id="AccP
0cb0: 61 73 73 77 6f 72 64 46 6f 72 6d 22 20 6f 6e 53  asswordForm" onS
0cc0: 75 62 6d 69 74 3d 7b 74 68 69 73 2e 68 61 6e 64  ubmit={this.hand
0cd0: 6c 65 53 75 62 6d 69 74 7d 3e 0a 20 20 20 20 20  leSubmit}>.     
0ce0: 20 20 20 20 20 20 20 20 20 20 20 3c 64 69 76 20             <div 
0cf0: 63 6c 61 73 73 4e 61 6d 65 3d 22 66 6f 72 6d 2d  className="form-
0d00: 67 72 70 22 3e 0a 20 20 20 20 20 20 20 20 20 20  grp">.          
0d10: 20 20 20 20 20 20 20 20 3c 69 6e 70 75 74 0a 20          <input. 
0d20: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20                  
0d30: 20 20 20 74 79 70 65 3d 22 70 61 73 73 77 6f 72     type="passwor
0d40: 64 22 0a 20 20 20 20 20 20 20 20 20 20 20 20 20  d".             
0d50: 20 20 20 20 20 20 20 6e 61 6d 65 3d 22 70 61 73         name="pas
0d60: 73 77 6f 72 64 22 0a 20 20 20 20 20 20 20 20 20  sword".         
0d70: 20 20 20 20 20 20 20 20 20 20 20 72 65 71 75 69             requi
0d80: 72 65 64 3d 22 72 65 71 75 69 72 65 64 22 0a 20  red="required". 
0d90: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20                  
0da0: 20 20 20 72 65 66 3d 7b 28 63 29 20 3d 3e 20 7b     ref={(c) => {
0db0: 20 74 68 69 73 2e 70 61 73 73 77 6f 72 64 45 6c   this.passwordEl
0dc0: 65 20 3d 20 63 3b 20 7d 7d 0a 20 20 20 20 20 20  e = c; }}.      
0dd0: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 6f 6e                on
0de0: 4b 65 79 55 70 3d 7b 74 68 69 73 2e 68 61 6e 64  KeyUp={this.hand
0df0: 6c 65 49 6e 70 75 74 43 68 61 6e 67 65 7d 0a 20  leInputChange}. 
0e00: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20                  
0e10: 20 2f 3e 0a 20 20 20 20 20 20 20 20 20 20 20 20   />.            
0e20: 20 20 20 20 20 20 3c 6c 61 62 65 6c 20 68 74 6d        <label htm
0e30: 6c 46 6f 72 3d 22 70 61 73 73 77 6f 72 64 22 3e  lFor="password">
0e40: 3c 54 72 61 6e 73 6c 61 74 65 20 76 61 6c 75 65  <Translate value
0e50: 3d 22 41 63 63 6f 75 6e 74 20 50 61 73 73 77 6f  ="Account Passwo
0e60: 72 64 22 20 2f 3e 3c 2f 6c 61 62 65 6c 3e 0a 20  rd" /></label>. 
0e70: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20                  
0e80: 20 3c 73 70 61 6e 0a 20 20 20 20 20 20 20 20 20   <span.         
0e90: 20 20 20 20 20 20 20 20 20 20 20 63 6c 61 73 73             class
0ea0: 4e 61 6d 65 3d 7b 63 6c 61 73 73 4e 61 6d 65 73  Name={classNames
0eb0: 28 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20  (.              
0ec0: 20 20 20 20 20 20 20 20 27 6d 73 67 27 2c 0a 20          'msg',. 
0ed0: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20                  
0ee0: 20 20 20 20 20 7b 0a 20 20 20 20 20 20 20 20 20       {.         
0ef0: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 65                 e
0f00: 72 72 6f 72 3a 20 74 68 69 73 2e 70 72 6f 70 73  rror: this.props
0f10: 2e 65 72 72 6f 72 0a 20 20 20 20 20 20 20 20 20  .error.         
0f20: 20 20 20 20 20 20 20 20 20 20 20 20 20 7d 0a 20               }. 
0f30: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20                  
0f40: 20 20 20 29 0a 20 20 20 20 20 20 20 20 20 20 20     ).           
0f50: 20 20 20 20 20 20 20 20 20 7d 0a 20 20 20 20 20           }.     
0f60: 20 20 20 20 20 20 20 20 20 20 20 20 20 3e 0a 20               >. 
0f70: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20                  
0f80: 20 20 20 7b 74 68 69 73 2e 70 72 6f 70 73 2e 65     {this.props.e
0f90: 72 72 6f 72 20 7c 7c 20 67 65 74 53 74 72 65 6e  rror || getStren
0fa0: 67 74 68 4d 73 67 28 70 61 73 73 77 6f 72 64 53  gthMsg(passwordS
0fb0: 74 72 65 6e 67 74 68 29 7d 0a 20 20 20 20 20 20  trength)}.      
0fc0: 20 20 20 20 20 20 20 20 20 20 20 20 3c 2f 73 70              </sp
0fd0: 61 6e 3e 0a 20 20 20 20 20 20 20 20 20 20 20 20  an>.            
0fe0: 20 20 20 20 20 20 3c 46 69 65 6c 64 53 74 72 65        <FieldStre
0ff0: 6e 67 74 68 20 73 74 72 65 6e 67 74 68 3d 7b 70  ngth strength={p
1000: 61 73 73 77 6f 72 64 53 74 72 65 6e 67 74 68 7d  asswordStrength}
1010: 20 2f 3e 0a 20 20 20 20 20 20 20 20 20 20 20 20   />.            
1020: 20 20 20 20 20 20 3c 62 75 74 74 6f 6e 20 74 79        <button ty
1030: 70 65 3d 22 62 75 74 74 6f 6e 22 20 74 61 62 49  pe="button" tabI
1040: 6e 64 65 78 3d 22 2d 31 22 20 63 6c 61 73 73 4e  ndex="-1" classN
1050: 61 6d 65 3d 22 65 79 65 2d 6f 70 74 22 20 6f 6e  ame="eye-opt" on
1060: 43 6c 69 63 6b 3d 7b 74 68 69 73 2e 74 6f 67 67  Click={this.togg
1070: 6c 65 50 61 73 73 77 6f 72 64 7d 20 64 61 74 61  lePassword} data
1080: 2d 74 61 72 67 65 74 3d 22 70 61 73 73 77 6f 72  -target="passwor
1090: 64 22 3e 7b 27 20 27 7d 3c 2f 62 75 74 74 6f 6e  d">{' '}</button
10a0: 3e 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20  >.              
10b0: 20 20 20 20 3c 73 70 61 6e 20 63 6c 61 73 73 4e      <span classN
10c0: 61 6d 65 3d 22 6d 69 6e 20 65 78 74 65 6e 64 65  ame="min extende
10d0: 64 22 3e 7b 27 27 7d 3c 2f 73 70 61 6e 3e 0a 20  d">{''}</span>. 
10e0: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 3c                 <
10f0: 2f 64 69 76 3e 0a 20 20 20 20 20 20 20 20 20 20  /div>.          
1100: 20 20 20 20 20 20 3c 64 69 76 20 63 6c 61 73 73        <div class
1110: 4e 61 6d 65 3d 22 66 6f 72 6d 2d 67 72 70 22 3e  Name="form-grp">
1120: 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20  .               
1130: 20 20 20 3c 69 6e 70 75 74 0a 20 20 20 20 20 20     <input.      
1140: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 74 79                ty
1150: 70 65 3d 22 70 61 73 73 77 6f 72 64 22 0a 20 20  pe="password".  
1160: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20                  
1170: 20 20 6e 61 6d 65 3d 22 63 50 61 73 73 77 6f 72    name="cPasswor
1180: 64 22 0a 20 20 20 20 20 20 20 20 20 20 20 20 20  d".             
1190: 20 20 20 20 20 20 20 72 65 71 75 69 72 65 64 3d         required=
11a0: 22 72 65 71 75 69 72 65 64 22 0a 20 20 20 20 20  "required".     
11b0: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 72                 r
11c0: 65 66 3d 7b 28 63 29 20 3d 3e 20 7b 20 74 68 69  ef={(c) => { thi
11d0: 73 2e 63 6f 6e 66 69 72 6d 50 61 73 73 77 6f 72  s.confirmPasswor
11e0: 64 45 6c 65 20 3d 20 63 3b 20 7d 7d 0a 20 20 20  dEle = c; }}.   
11f0: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 2f                 /
1200: 3e 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20  >.              
1210: 20 20 20 20 3c 6c 61 62 65 6c 20 68 74 6d 6c 46      <label htmlF
1220: 6f 72 3d 22 63 50 61 73 73 77 6f 72 64 22 3e 3c  or="cPassword"><
1230: 54 72 61 6e 73 6c 61 74 65 20 76 61 6c 75 65 3d  Translate value=
1240: 22 43 6f 6e 66 69 72 6d 20 41 63 63 6f 75 6e 74  "Confirm Account
1250: 20 50 61 73 73 77 6f 72 64 22 20 2f 3e 3c 2f 6c   Password" /></l
1260: 61 62 65 6c 3e 0a 20 20 20 20 20 20 20 20 20 20  abel>.          
1270: 20 20 20 20 20 20 20 20 3c 73 70 61 6e 0a 20 20          <span.  
1280: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20                  
1290: 20 20 63 6c 61 73 73 4e 61 6d 65 3d 22 6d 73 67    className="msg
12a0: 20 65 72 72 6f 72 22 0a 20 20 20 20 20 20 20 20   error".        
12b0: 20 20 20 20 20 20 20 20 20 20 20 20 72 65 66 3d              ref=
12c0: 7b 28 63 29 20 3d 3e 20 7b 0a 20 20 20 20 20 20  {(c) => {.      
12d0: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20                  
12e0: 74 68 69 73 2e 63 6f 6e 66 69 72 6d 50 61 73 73  this.confirmPass
12f0: 77 6f 72 64 4d 73 67 45 6c 65 20 3d 20 63 3b 0a  wordMsgEle = c;.
1300: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20                  
1310: 20 20 20 20 7d 7d 0a 20 20 20 20 20 20 20 20 20      }}.         
1320: 20 20 20 20 20 20 20 20 20 3e 7b 27 27 7d 3c 2f           >{''}</
1330: 73 70 61 6e 3e 0a 20 20 20 20 20 20 20 20 20 20  span>.          
1340: 20 20 20 20 20 20 20 20 3c 62 75 74 74 6f 6e 20          <button 
1350: 74 79 70 65 3d 22 62 75 74 74 6f 6e 22 20 74 61  type="button" ta
1360: 62 49 6e 64 65 78 3d 22 2d 31 22 20 63 6c 61 73  bIndex="-1" clas
1370: 73 4e 61 6d 65 3d 22 65 79 65 2d 6f 70 74 22 20  sName="eye-opt" 
1380: 6f 6e 43 6c 69 63 6b 3d 7b 74 68 69 73 2e 74 6f  onClick={this.to
1390: 67 67 6c 65 50 61 73 73 77 6f 72 64 7d 20 64 61  gglePassword} da
13a0: 74 61 2d 74 61 72 67 65 74 3d 22 63 6f 6e 66 69  ta-target="confi
13b0: 72 6d 50 61 73 73 77 6f 72 64 22 3e 7b 27 20 27  rmPassword">{' '
13c0: 7d 3c 2f 62 75 74 74 6f 6e 3e 0a 20 20 20 20 20  }</button>.     
13d0: 20 20 20 20 20 20 20 20 20 20 20 3c 2f 64 69 76             </div
13e0: 3e 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20  >.              
13f0: 3c 2f 66 6f 72 6d 3e 0a 20 20 20 20 20 20 20 20  </form>.        
1400: 20 20 20 20 3c 2f 64 69 76 3e 0a 20 20 20 20 20      </div>.     
1410: 20 20 20 20 20 3c 2f 64 69 76 3e 0a 20 20 20 20       </div>.    
1420: 20 20 20 20 20 20 3c 64 69 76 20 63 6c 61 73 73        <div class
1430: 4e 61 6d 65 3d 22 69 6e 74 72 6f 2d 66 6f 6f 74  Name="intro-foot
1440: 22 3e 0a 20 20 20 20 20 20 20 20 20 20 20 20 3c  ">.            <
1450: 62 75 74 74 6f 6e 20 63 6c 61 73 73 4e 61 6d 65  button className
1460: 3d 22 62 74 6e 20 69 6e 74 72 6f 2d 66 6f 6f 74  ="btn intro-foot
1470: 2d 6c 74 22 20 6f 6e 43 6c 69 63 6b 3d 7b 28 29  -lt" onClick={()
1480: 20 3d 3e 20 7b 20 74 68 69 73 2e 70 72 6f 70 73   => { this.props
1490: 2e 73 65 74 43 72 65 61 74 65 41 63 63 4e 61 76  .setCreateAccNav
14a0: 50 6f 73 28 74 68 69 73 2e 70 72 6f 70 73 2e 6e  Pos(this.props.n
14b0: 61 76 50 6f 73 20 2d 20 31 29 3b 20 7d 7d 3e 3c  avPos - 1); }}><
14c0: 54 72 61 6e 73 6c 61 74 65 20 76 61 6c 75 65 3d  Translate value=
14d0: 22 42 61 63 6b 22 20 2f 3e 3c 2f 62 75 74 74 6f  "Back" /></butto
14e0: 6e 3e 0a 20 20 20 20 20 20 20 20 20 20 20 20 3c  n>.            <
14f0: 62 75 74 74 6f 6e 20 74 79 70 65 3d 22 73 75 62  button type="sub
1500: 6d 69 74 22 20 66 6f 72 6d 3d 22 41 63 63 50 61  mit" form="AccPa
1510: 73 73 77 6f 72 64 46 6f 72 6d 22 20 63 6c 61 73  sswordForm" clas
1520: 73 4e 61 6d 65 3d 22 62 74 6e 20 69 6e 74 72 6f  sName="btn intro
1530: 2d 66 6f 6f 74 2d 72 74 22 3e 3c 54 72 61 6e 73  -foot-rt"><Trans
1540: 6c 61 74 65 20 76 61 6c 75 65 3d 22 43 72 65 61  late value="Crea
1550: 74 65 20 41 63 63 6f 75 6e 74 22 20 2f 3e 3c 2f  te Account" /></
1560: 62 75 74 74 6f 6e 3e 0a 20 20 20 20 20 20 20 20  button>.        
1570: 20 20 3c 2f 64 69 76 3e 0a 20 20 20 20 20 20 20    </div>.       
1580: 20 3c 2f 64 69 76 3e 0a 20 20 20 20 20 20 3c 2f   </div>.      </
1590: 64 69 76 3e 0a 20 20 20 20 29 3b 0a 20 20 7d 0a  div>.    );.  }.
15a0: 7d 0a                                            }.