v1.3.0-beta/pin for create and join

app/src/Create.js

@@ -61,6 +61,7 @@ const createRoom = async (data) => {
   data.props.notify('Starting party...');
 
   const apidata = {
+    roomPin: data.createPin,
     roomName: data.createName,
     userName: data.name,
     player: {
@@ -100,7 +101,9 @@ const createRoom = async (data) => {
 const Create = (props) => {
   const [name, setName] = useState(getName() || '');
   const [createName, setCreateName] = useState('');
+  const [createPin, setCreatePin] = useState('');
   const [joinName, setJoinName] = useState(getRoomId() || '');
+  const [joinPin, setJoinPin] = useState('');
   const { notify } = props;
 
   return (
@@ -139,8 +142,17 @@ const Create = (props) => {
             helperText={createName.length > 0 ? `${createName.length}/24` : null}
             label="Party Name"
           />
+          <TextField
+            fullWidth
+            type="number"
+            value={createPin}
+            className="card-field addFocus"
+            onChange={(e) => (e.target.value.length <= 10 ? setCreatePin(e.target.value) : null)}
+            helperText={createPin.length > 0 ? `${createPin.length}/10` : null}
+            label="Pin Code"
+          />
           <Button
-            onClick={() => createRoom({ name, createName, props })}
+            onClick={() => createRoom({ name, createName, props, createPin })}
             disabled={createName === ''}
             color="primary"
             fullWidth
@@ -159,11 +171,19 @@ const Create = (props) => {
             value={joinName}
             className="card-field addFocus"
             onChange={(e) => setJoinName(e.target.value)}
-            label="Party Code"
+            label="Party Name"
+          />
+          <TextField
+            fullWidth
+            type="number"
+            value={joinPin}
+            className="card-field addFocus"
+            onChange={(e) => setJoinPin(e.target.value)}
             helperText="Ask your party leader for this code"
+            label="Pin Code"
           />
           <Button
-            onClick={() => joinRoom({ joinName, name, props })}
+            onClick={() => joinRoom({ joinName, name, props, joinPin })}
             disabled={joinName === ''}
             variant="contained"
             color="secondary"