feat(widgets): enable password and name inputs during init (#351)

demo/WebexMeetingsWidgetDemo.jsx

@@ -8,6 +8,8 @@ import {deconstructHydraId} from '@webex/common';
 
 export default function WebexMeetingsWidgetDemo({token, fedramp}) {
   const [destination, setDestination] = useState('');
+  const [pinOrPass, setPinOrPass] = useState('');
+  const [name, setName] = useState('');
   const [displayWidget, setDisplayWidget] = useState(false);
   const [theme, setTheme] = useState('dark');
   const [layout, setLayout] = useState('Grid');
@@ -90,6 +92,26 @@ export default function WebexMeetingsWidgetDemo({token, fedramp}) {
           type="text"
           value={destination}
         />
+        <Input
+          htmlId="meetingPasswordOrPin"
+          label="Meeting Pin or Password"
+          name="meetingPasswordOrPin"
+          onChange={(event) => setPinOrPass(event.target.value)}
+          placeholder="Meeting Pin or Password"
+          readOnly={displayWidget}
+          type="text"
+          value={pinOrPass}
+        />
+        <Input
+          htmlId="participantName"
+          label="Participant Name"
+          name="participantName"
+          onChange={(event) => setName(event.target.value)}
+          placeholder="Participant Name"
+          readOnly={displayWidget}
+          type="text"
+          value={name}
+        />
         <Button
           type="submit"
           disabled={!displayButtonEnabled}
@@ -129,6 +151,8 @@ export default function WebexMeetingsWidgetDemo({token, fedramp}) {
         <WebexMeetingsWidget
           accessToken={token}
           meetingDestination={destination}
+          meetingPasswordOrPin={pinOrPass}
+          participantName={name}
           className={`webex-meeting-widget-demo wxc-theme-${theme}`}
           layout={layout}
           fedramp={fedramp}

package.json

@@ -32,9 +32,9 @@
   ],
   "dependencies": {
     "@webex/component-adapter-interfaces": "^1.30.5",
-    "@webex/sdk-component-adapter": "1.112.13",
+    "@webex/sdk-component-adapter": "1.113.0",
     "webex": "2.60.4",
-    "@webex/components": "1.276.2"
+    "@webex/components": "1.277.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",

src/widgets/WebexMeetings/WebexMeetings.jsx

@@ -12,6 +12,8 @@ import './WebexMeetings.css';
  * Webex meeting widget presents a Webex meeting experience.
  *
  * @param {string} props.meetingDestination  ID of the virtual meeting location
+ * @param {string} props.meetingPasswordOrPin  Password or pin of the virtual meeting location
+ * @param {string} props.participantName     Name of the participant joining the meeting from the widget
  * @param {string} props.accessToken         Access token of the joining user
  * @param {string} [props.layout]            Layout for remote video (e.g. grid, focus, stack, etc)
  * @param {Function} [props.controls]        Meeting controls to display
@@ -43,6 +45,8 @@ class WebexMeetingsWidget extends Component {
       content = (
         <WebexMeeting
           meetingID={meeting.ID}
+          meetingPasswordOrPin={this.props.meetingPasswordOrPin}
+          participantName={this.props.participantName}
           logo={logo}
           layout={this.props.layout}
           controls={this.props.controls}
@@ -69,6 +73,8 @@ WebexMeetingsWidget.propTypes = {
   controlsCollapseRangeEnd: PropTypes.number,
   fedramp: PropTypes.bool,
   meetingDestination: PropTypes.string.isRequired,
+  meetingPasswordOrPin: PropTypes.string,
+  participantName: PropTypes.string,
   style: PropTypes.shape(),
   layout: PropTypes.string,
 };
@@ -80,6 +86,8 @@ WebexMeetingsWidget.defaultProps = {
   controlsCollapseRangeEnd: undefined,
   fedramp: false,
   layout: 'Grid',
+  meetingPasswordOrPin: '',
+  participantName: '',
   style: {},
 };