Add input field to specify call name

package-lock.json

@@ -3282,9 +3282,9 @@
       }
     },
     "@types/body-parser": {
-      "version": "1.17.1",
-      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.17.1.tgz",
-      "integrity": "sha512-RoX2EZjMiFMjZh9lmYrwgoP9RTpAjSHiJxdp4oidAQVO02T7HER3xj9UKue5534ULWeqVEkujhWcyvUce+d68w==",
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.0.tgz",
+      "integrity": "sha512-W98JrE0j2K78swW4ukqMleo8R7h/pFETjM2DQ90MF6XK2i4LO4W3gQ71Lt4w3bfm2EvVSyWHplECvB5sK22yFQ==",
       "dev": true,
       "requires": {
         "@types/connect": "*",
@@ -3304,9 +3304,9 @@
       "dev": true
     },
     "@types/connect": {
-      "version": "3.4.32",
-      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.32.tgz",
-      "integrity": "sha512-4r8qa0quOvh7lGD0pre62CAb1oni1OO6ecJLGCezTmhQ8Fz50Arx9RUszryR8KlgK6avuSXvviL6yWyViQABOg==",
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.33.tgz",
+      "integrity": "sha512-2+FrkXY4zllzTNfJth7jOqEHC+enpLeGslEhpnTAkg21GkRrWV4SsAtqchtT4YS9/nODBU2/ZfsBY2X4J/dX7A==",
       "dev": true,
       "requires": {
         "@types/node": "*"
@@ -4877,7 +4877,8 @@
         },
         "kind-of": {
           "version": "6.0.2",
-          "resolved": "",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
+          "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==",
           "dev": true
         }
       }
@@ -14804,7 +14805,8 @@
         },
         "kind-of": {
           "version": "6.0.2",
-          "resolved": "",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
+          "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==",
           "dev": true
         }
       }

package.json

@@ -61,6 +61,7 @@
     "@babel/core": "^7.7.2",
     "@babel/polyfill": "^7.7.0",
     "@babel/preset-env": "^7.7.1",
+    "@types/body-parser": "^1.19.0",
     "@types/classnames": "^2.2.9",
     "@types/debug": "^4.1.5",
     "@types/ejs": "^2.6.3",
@@ -84,6 +85,7 @@
     "babel-core": "^7.0.0-bridge.0",
     "babel-minify": "^0.5.1",
     "babelify": "^10.0.0",
+    "body-parser": "^1.19.0",
     "chastifol": "^4.1.0",
     "classnames": "^2.2.6",
     "core-js": "^3.4.1",

src/scss/style.scss

@@ -69,6 +69,11 @@ body.call {
     @include button-style($color-fg, darken($color-bg, 5%));
   }
 
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 1rem rgba(black, 0.4);
+  }
+
   &:active {
     outline: none;
     transform: translate(0px, 1px);
@@ -95,10 +100,29 @@ body.call {
     color: $color-primary;
   }
 
-  input {
-    font-family: $font-monospace;
+  input[type="text"] {
+    font-size: 1rem;
+    padding: 1rem 1rem 0.75rem;
+    width: 100%;
+    margin-bottom: 1rem;
+    background: none;
+    border: none;
+    border-bottom: 2px solid rgba($color-warning, 0);
+    transition: border-bottom 200ms ease-in;
+    text-align: center;
+    color: white;
+    position: relative;
+
+    &:focus {
+      border-bottom: 2px solid $color-warning;
+      outline: none;
+    }
+  }
+
+  input[type="submit"] {
+    // font-family: $font-monospace;
     @include button($color-primary, $color-warning);
-    font-size: 1.1rem;
+    font-size: 1rem;
     padding: 1rem 1rem;
   }
 

src/server/app.test.ts

@@ -27,15 +27,23 @@ describe('server/app', () => {
 
   })
 
-  describe('GET /call', () => {
+  describe('POST /call', () => {
 
     it('redirects to a new call', () => {
       return request(app)
-      .get('/call')
+      .post('/call')
       .expect(302)
       .expect('location', new RegExp(`^${BASE_URL}/call/[0-9a-f-]{36}$`))
     })
 
+    it('redirects to specific call', () => {
+      return request(app)
+      .post('/call')
+      .send('call=test%20id')
+      .expect(302)
+      .expect('location', `${BASE_URL}/call/test%20id`)
+    })
+
   })
 
   describe('GET /call/<uuid>', () => {

src/server/app.ts

@@ -1,5 +1,6 @@
 import { config } from './config'
 import _debug from 'debug'
+import bodyParser from 'body-parser'
 import express from 'express'
 import handleSocket from './socket'
 import path from 'path'
@@ -38,6 +39,7 @@ app.use((req, res, next) => {
   })
   next()
 })
+app.use(bodyParser.urlencoded({ extended: false }))
 
 const router = express.Router()
 router.use('/res', express.static(path.join(__dirname, '../../res')))

src/server/routes/call.ts

@@ -8,8 +8,9 @@ const router = Router()
 const BASE_URL: string = config.baseUrl
 const cfgIceServers = config.iceServers
 
-router.get('/', (req, res) => {
-  res.redirect(`${BASE_URL}/call/${v4()}`)
+router.post('/', (req, res) => {
+  const callId = req.body.call ? encodeURIComponent(req.body.call) : v4()
+  res.redirect(`${BASE_URL}/call/${callId}`)
 })
 
 router.get('/:callId', (req, res) => {

views/index.html

@@ -10,12 +10,13 @@
   </a>
 
   <div id="container">
-    <form id="form" method="get" action="<%= baseUrl + '/call' %>">
+    <form id="form" method="post" action="<%= baseUrl + '/call' %>" autocomplete="off">
       <h1>
         <img src="<%= baseUrl + '/res/peer-calls.svg' %>" width="100%" alt="Peer Calls">
       </h1>
       <p>Group peer-to-peer calls for everyone. Create a private room. Share the link.</p>
-      <input type="submit" value="New Session">
+      <input type="text" value="" name="call" placeholder="Room ID (Leave empty for random)" autofocus>
+      <input type="submit" value="Start Session">
     </form>
   </div>