fix(security-dialog) fix form event propagation after migrating to React 17

In addition, replace the from with a div because they shouldn't be
nested.

Since we are no longer in a form, manually validate the password. This
was necessary regardless, because it was possible to bypass the digits
rule by pressing "add".

react/features/security/components/security-dialog/web/PasswordForm.js

@@ -85,9 +85,7 @@ class PasswordForm extends Component<Props, State> {
         super(props);
 
         // Bind event handlers so they are only bound once per instance.
-        this._onEnteredPasswordChange
+        this._onEnteredPasswordChange = this._onEnteredPasswordChange.bind(this);
-            = this._onEnteredPasswordChange.bind(this);
-        this._onPasswordSubmit = this._onPasswordSubmit.bind(this);
         this._onKeyPress = this._onKeyPress.bind(this);
     }
 
@@ -122,31 +120,28 @@ class PasswordForm extends Component<Props, State> {
      */
     _renderPasswordField() {
         if (this.props.editEnabled) {
-            let digitPattern, placeHolderText;
+            let placeHolderText;
 
             if (this.props.passwordNumberOfDigits) {
                 placeHolderText = this.props.t('passwordDigitsOnly', {
                     number: this.props.passwordNumberOfDigits });
-                digitPattern = '\\d*';
             }
 
             return (
-                <form
+                <div
-                    className = 'info-password-form'
+                    className = 'info-password-form'>
-                    onKeyPress = { this._onKeyPress }
-                    onSubmit = { this._onPasswordSubmit }>
                     <input
                         aria-label = { this.props.t('info.addPassword') }
                         autoFocus = { true }
                         className = 'info-password-input'
                         maxLength = { this.props.passwordNumberOfDigits }
                         onChange = { this._onEnteredPasswordChange }
-                        pattern = { digitPattern }
+                        onKeyPress = { this._onKeyPress }
                         placeholder = { placeHolderText }
                         spellCheck = { 'false' }
                         type = 'text'
                         value = { this.state.enteredPassword } />
-                </form>
+                </div>
             );
         } else if (this.props.locked === LOCKED_LOCALLY) {
             return (
@@ -182,23 +177,6 @@ class PasswordForm extends Component<Props, State> {
         this.setState({ enteredPassword: event.target.value });
     }
 
-    _onPasswordSubmit: (Object) => void;
-
-    /**
-     * Invokes the passed in onSubmit callback to notify the parent that a
-     * password submission has been attempted.
-     *
-     * @param {Object} event - DOM Event for form submission.
-     * @private
-     * @returns {void}
-     */
-    _onPasswordSubmit(event) {
-        event.preventDefault();
-        event.stopPropagation();
-
-        this.props.onSubmit(this.state.enteredPassword);
-    }
-
     _onKeyPress: (Object) => void;
 
     /**
@@ -211,7 +189,10 @@ class PasswordForm extends Component<Props, State> {
      */
     _onKeyPress(event) {
         if (event.key === 'Enter') {
+            event.preventDefault();
             event.stopPropagation();
+
+            this.props.onSubmit(this.state.enteredPassword);
         }
     }
 }

react/features/security/components/security-dialog/web/PasswordSection.js

@@ -10,6 +10,7 @@ import { NOTIFY_CLICK_MODE } from '../../../../toolbox/constants';
 
 import PasswordForm from './PasswordForm';
 
+const DIGITS_ONLY = /^\d+$/;
 const KEY = 'add-passcode';
 
 type Props = {
@@ -97,6 +98,10 @@ function PasswordSection({
      * @returns {void}
      */
     function onPasswordSubmit(enteredPassword) {
+        if (enteredPassword && passwordNumberOfDigits && !DIGITS_ONLY.test(enteredPassword)) {
+            // Don't set the password.
+            return;
+        }
         setPassword(conference, conference.lock, enteredPassword);
     }
 
@@ -142,7 +147,7 @@ function PasswordSection({
      */
     function onPasswordSave() {
         if (formRef.current) {
-            const { value } = formRef.current.querySelector('form > input');
+            const { value } = formRef.current.querySelector('div > input');
 
             if (value) {
                 onPasswordSubmit(value);