Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

PasswordRequiredPrompt.web.js 3.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. // @flow
  2. import React, { Component } from 'react';
  3. import { connect } from 'react-redux';
  4. import { FieldTextStateless as TextField } from '@atlaskit/field-text';
  5. import { setPassword } from '../../base/conference';
  6. import { Dialog } from '../../base/dialog';
  7. import { translate } from '../../base/i18n';
  8. /**
  9. * The type of the React {@code Component} props of
  10. * {@link PasswordRequiredPrompt}.
  11. */
  12. type Props = {
  13. /**
  14. * The JitsiConference which requires a password.
  15. */
  16. conference: Object,
  17. /**
  18. * The redux store's {@code dispatch} function.
  19. */
  20. dispatch: Dispatch<*>,
  21. /**
  22. * The translate function.
  23. */
  24. t: Function
  25. };
  26. /**
  27. * The type of the React {@code Component} state of
  28. * {@link PasswordRequiredPrompt}.
  29. */
  30. type State = {
  31. /**
  32. * The password entered by the local participant.
  33. */
  34. password: string
  35. }
  36. /**
  37. * Implements a React Component which prompts the user when a password is
  38. * required to join a conference.
  39. */
  40. class PasswordRequiredPrompt extends Component<Props, State> {
  41. state = {
  42. password: ''
  43. };
  44. /**
  45. * Initializes a new PasswordRequiredPrompt instance.
  46. *
  47. * @param {Object} props - The read-only properties with which the new
  48. * instance is to be initialized.
  49. */
  50. constructor(props: Props) {
  51. super(props);
  52. // Bind event handlers so they are only bound once per instance.
  53. this._onPasswordChanged = this._onPasswordChanged.bind(this);
  54. this._onSubmit = this._onSubmit.bind(this);
  55. }
  56. /**
  57. * Implements React's {@link Component#render()}.
  58. *
  59. * @inheritdoc
  60. * @returns {ReactElement}
  61. */
  62. render() {
  63. return (
  64. <Dialog
  65. isModal = { true }
  66. onSubmit = { this._onSubmit }
  67. titleKey = 'dialog.passwordRequired'
  68. width = 'small'>
  69. { this._renderBody() }
  70. </Dialog>
  71. );
  72. }
  73. /**
  74. * Display component in dialog body.
  75. *
  76. * @returns {ReactElement}
  77. * @protected
  78. */
  79. _renderBody() {
  80. return (
  81. <div>
  82. <TextField
  83. autoFocus = { true }
  84. compact = { true }
  85. label = { this.props.t('dialog.passwordLabel') }
  86. name = 'lockKey'
  87. onChange = { this._onPasswordChanged }
  88. shouldFitContainer = { true }
  89. type = 'text'
  90. value = { this.state.password } />
  91. </div>
  92. );
  93. }
  94. _onPasswordChanged: ({ target: { value: * }}) => void;
  95. /**
  96. * Notifies this dialog that password has changed.
  97. *
  98. * @param {Object} event - The details of the notification/event.
  99. * @private
  100. * @returns {void}
  101. */
  102. _onPasswordChanged({ target: { value } }) {
  103. this.setState({
  104. password: value
  105. });
  106. }
  107. _onSubmit: () => boolean;
  108. /**
  109. * Dispatches action to submit value from this dialog.
  110. *
  111. * @private
  112. * @returns {boolean}
  113. */
  114. _onSubmit() {
  115. const { conference } = this.props;
  116. // We received that password is required, but user is trying anyway to
  117. // login without a password. Mark the room as not locked in case she
  118. // succeeds (maybe someone removed the password meanwhile). If it is
  119. // still locked, another password required will be received and the room
  120. // again will be marked as locked.
  121. this.props.dispatch(
  122. setPassword(conference, conference.join, this.state.password));
  123. // We have used the password so let's clean it.
  124. this.setState({
  125. password: undefined
  126. });
  127. return true;
  128. }
  129. }
  130. export default translate(connect()(PasswordRequiredPrompt));