snapshot of https://github.com/jitsi/jitsi-meet.git @ fd1749dd28f4138aa80234fc7f311b19aaffa0e7 (2026-09-15)

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

@@ -0,0 +1,115 @@
+import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Input from '../../../../base/ui/components/web/Input';
+import { LOCKED_LOCALLY } from '../../../../room-lock/constants';
+
+/**
+ * The type of the React {@code Component} props of {@link PasswordForm}.
+ */
+interface IProps {
+
+    /**
+     * Whether or not to show the password editing field.
+     */
+    editEnabled: boolean;
+
+    /**
+     * The value for how the conference is locked (or undefined if not locked)
+     * as defined by room-lock constants.
+     */
+    locked?: string;
+
+    /**
+     * Callback to invoke when the local participant is submitting a password
+     * set request.
+     */
+    onSubmit: Function;
+
+    /**
+     * The current known password for the JitsiConference.
+     */
+    password?: string;
+
+    /**
+     * The number of digits to be used in the password.
+     */
+    passwordNumberOfDigits?: number;
+
+    /**
+     * Whether or not the password should be visible.
+     */
+    visible: boolean;
+}
+
+/**
+ * React {@code Component} for displaying and editing the conference password.
+ *
+ * @returns {ReactElement}
+ */
+export default function PasswordForm({
+    editEnabled,
+    locked,
+    onSubmit,
+    password,
+    passwordNumberOfDigits,
+    visible
+}: IProps) {
+    const { t } = useTranslation();
+    const [ enteredPassword, setEnteredPassword ] = useState('');
+    const onKeyPress = useCallback(event => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            event.stopPropagation();
+
+            onSubmit(enteredPassword);
+        }
+    }, [ onSubmit, enteredPassword ]);
+
+    if (!editEnabled && enteredPassword && enteredPassword !== '') {
+        setEnteredPassword('');
+    }
+
+    const placeHolderText
+        = passwordNumberOfDigits ? t('passwordDigitsOnly', { number: passwordNumberOfDigits }) : t('dialog.password');
+
+
+    return (
+        <div className = 'info-password'>
+            { locked && <>
+                <span className = 'info-label'>
+                    {t('info.password')}
+                </span>
+                <span className = 'spacer'>&nbsp;</span>
+                <span className = 'info-password-field info-value'>
+                    {locked === LOCKED_LOCALLY ? (
+                        <div className = 'info-password-local'>
+                            { visible ? password : '******' }
+                        </div>
+                    ) : (
+                        <div className = 'info-password-remote'>
+                            { t('passwordSetRemotely') }
+                        </div>
+                    ) }
+                </span>
+            </>
+            }
+            {
+                editEnabled && <div
+                    className = 'info-password-form'>
+                    <Input
+                        accessibilityLabel = { t('info.addPassword') }
+                        autoFocus = { true }
+                        id = 'info-password-input'
+                        maxLength = { passwordNumberOfDigits }
+                        mode = { passwordNumberOfDigits ? 'numeric' : undefined }
+                        onChange = { setEnteredPassword }
+                        onKeyPress = { onKeyPress }
+                        placeholder = { placeHolderText }
+                        type = 'password'
+                        value = { enteredPassword } />
+                </div>
+            }
+        </div>
+    );
+}