From 8ebd92c53d3ee5d31abc48db8fcf25182900e665 Mon Sep 17 00:00:00 2001 From: Jerko Steiner Date: Wed, 11 Mar 2020 14:24:36 +0100 Subject: [PATCH] Add input field to specify call name --- package-lock.json | 18 ++++++++++-------- package.json | 2 ++ src/scss/style.scss | 30 +++++++++++++++++++++++++++--- src/server/app.test.ts | 12 ++++++++++-- src/server/app.ts | 2 ++ src/server/routes/call.ts | 5 +++-- views/index.html | 5 +++-- 7 files changed, 57 insertions(+), 17 deletions(-) diff --git a/package-lock.json b/package-lock.json index 26ec4cd..b0d028b 100644 --- a/package-lock.json +++ b/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 } } diff --git a/package.json b/package.json index bdb5468..3dd8b06 100644 --- a/package.json +++ b/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", diff --git a/src/scss/style.scss b/src/scss/style.scss index 577358f..33d44e3 100644 --- a/src/scss/style.scss +++ b/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; } diff --git a/src/server/app.test.ts b/src/server/app.test.ts index e10e3db..68a41c0 100644 --- a/src/server/app.test.ts +++ b/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/', () => { diff --git a/src/server/app.ts b/src/server/app.ts index d25fb95..f96c551 100644 --- a/src/server/app.ts +++ b/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'))) diff --git a/src/server/routes/call.ts b/src/server/routes/call.ts index af307f5..ce40d42 100644 --- a/src/server/routes/call.ts +++ b/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) => { diff --git a/views/index.html b/views/index.html index 8489d15..5c7779a 100644 --- a/views/index.html +++ b/views/index.html @@ -10,12 +10,13 @@
-
+

Peer Calls

Group peer-to-peer calls for everyone. Create a private room. Share the link.

- + +