add login screen

add router

package-lock.json

@@ -1273,12 +1273,41 @@
       }
     },
     "@vue/cli-plugin-router": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-router/-/cli-plugin-router-4.2.3.tgz",
-      "integrity": "sha512-RGtgFQCTMS1X1wtFt752RMgr/LlF9cfpH37MkwjhF2wpnyTp+hkKl/09QORAKW91I8iFpZFH7xZKMBS3r1WbCw==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npm.taobao.org/@vue/cli-plugin-router/download/@vue/cli-plugin-router-4.3.1.tgz",
+      "integrity": "sha1-C6WJ9Omh8+ZKj/bM2S984oRVhr8=",
       "dev": true,
       "requires": {
-        "@vue/cli-shared-utils": "^4.2.3"
+        "@vue/cli-shared-utils": "^4.3.1"
+      },
+      "dependencies": {
+        "@vue/cli-shared-utils": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npm.taobao.org/@vue/cli-shared-utils/download/@vue/cli-shared-utils-4.3.1.tgz",
+          "integrity": "sha1-p0v01Tgl1KSwWoSwPgI5dIcbw4o=",
+          "dev": true,
+          "requires": {
+            "@hapi/joi": "^15.0.1",
+            "chalk": "^2.4.2",
+            "execa": "^1.0.0",
+            "launch-editor": "^2.2.1",
+            "lru-cache": "^5.1.1",
+            "node-ipc": "^9.1.1",
+            "open": "^6.3.0",
+            "ora": "^3.4.0",
+            "read-pkg": "^5.1.1",
+            "request": "^2.88.2",
+            "request-promise-native": "^1.0.8",
+            "semver": "^6.1.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npm.taobao.org/semver/download/semver-6.3.0.tgz?cache=0&sync_timestamp=1586534511518&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver%2Fdownload%2Fsemver-6.3.0.tgz",
+          "integrity": "sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0=",
+          "dev": true
+        }
       }
     },
     "@vue/cli-plugin-vuex": {
@@ -11290,6 +11319,11 @@
         }
       }
     },
+    "vue-router": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.1.6.tgz?cache=0&sync_timestamp=1586343646335&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.1.6.tgz",
+      "integrity": "sha1-RfWjo4Q+MXAsBh3YKTk1VOQyj4k="
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

package.json

@@ -12,12 +12,14 @@
     "jquery": "^3.4.1",
     "pdfjs-dist": "^2.3.200",
     "vue": "^2.6.11",
+    "vue-router": "^3.1.6",
     "vuetify": "^2.2.11",
     "webrtc-adapter": "^7.5.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.2.0",
     "@vue/cli-plugin-eslint": "~4.2.0",
+    "@vue/cli-plugin-router": "^4.3.1",
     "@vue/cli-service": "~4.2.0",
     "axios": "^0.18.0",
     "babel-eslint": "^10.0.3",

src/App.vue

@@ -1,36 +1,6 @@
 <template>
-  <v-app fill-height dark>
-    <v-content fill-height >
-      <v-text-field   v-if="!start" v-model="username" label="please enter name"></v-text-field> <v-btn v-if="!start" @click="startM">Start</v-btn>
-      <VueJanus v-if="start" server="https://vid.w3ic.org/janus" :room="room" :username="username"/>
-    </v-content>
-  </v-app>
+  <v-content>
+    <router-view></router-view>
+  </v-content>
 </template>
 
-<script>
-import VueJanus from "@/lib/VueJanus";
-
-export default {
-  name: 'App',
-
-  components: {
-    VueJanus
-  },
-
-  data: () => ({
-    test: ' ',
-    room:1234,
-    username: '',
-    start:false
-  }),
-  mounted () {
-  },
-  methods: {
-    startM () {
-      if (this.username) {
-        this.start = true
-      }
-    }
-  }
-};
-</script>

src/lib/VueJanus.vue

@@ -1,7 +1,6 @@
 <template>
-
     <v-container fill-height>
-        <PdfShare v-if="sharePdf" :username="username"  :opaque-id="opaqueId" :room="room" :janus-init="janusInit" ></PdfShare>
+     <PdfShare v-if="sharePdf" :username="username"  :opaque-id="opaqueId" :room="room" :janus-init="janusInit" ></PdfShare>
         <v-dialog
                 v-model="mozillaAlert"
                 max-width="600"
@@ -130,7 +129,7 @@
                         @click="sharePdf=true"
                     >
                         <v-icon>mdi-pdf-box</v-icon>
-                    </v-btn> 
+                    </v-btn>
                 </template>
 
                 <span>Toggle Share PDF</span>
@@ -151,7 +150,7 @@
 
                 <span>Toggle Theme</span>
             </v-tooltip>
-            
+
             <v-tooltip right>
                 <template v-slot:activator="{ on }">
                     <v-btn
@@ -168,7 +167,7 @@
 
                 <span>Toggle Camera</span>
             </v-tooltip>
-            
+
             <v-tooltip right>
                 <template v-slot:activator="{ on }">
                     <v-btn

src/main.js

@@ -3,12 +3,13 @@ import './plugins/axios'
 import JanusPlugin from "@/plugins/janus"
 import App from './App.vue'
 import vuetify from './plugins/vuetify';
+import router from './router'
 
 
 Vue.config.productionTip = false
-console.log("janus is installed", Vue.$janus)
 new Vue({
   vuetify,
   JanusPlugin,
+  router,
   render: h => h(App)
 }).$mount('#app')

src/plugins/axios.js

@@ -9,7 +9,7 @@ import axios from "axios";
 // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
 
 let config = {
-  // baseURL: process.env.baseURL || process.env.apiUrl || ""
+  baseURL: process.env.baseURL || process.env.apiUrl || "http://localhost:5000/api/"
   // timeout: 60 * 1000, // Timeout
   // withCredentials: true, // Check cross-site Access-Control
 };

src/router/index.js

@@ -0,0 +1,20 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+  const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: () => import(/* webpackChunkName: "about" */ '../views/Home.vue')
+  }
+]
+
+const router = new VueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes
+})
+
+export default router

src/views/Home.vue

@@ -0,0 +1,40 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="12" md="6" sm="12">
+        <v-text-field placeholder="Name/Nickname" v-model="name"></v-text-field>
+      </v-col>
+      <v-col cols="12" md="6" sm="12">
+        <v-text-field placeholder="Code" v-model="code"></v-text-field>
+      </v-col>
+      <v-col cols="12" md="12" sm="12">
+        <v-text-field v-if="passwd" v-model="password" placeholder="Password" type="password"></v-text-field>
+
+      </v-col>
+      <v-col cols="12" md="6" sm="12"><v-btn @click="passwd=!passwd" text>Password Login</v-btn></v-col>
+      <v-col cols="12" md="6" sm="12">
+        <v-btn @click="login">Login</v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: 'Home',
+  data:() => ({
+    passwd: false,
+    name:'',
+    code:'',
+    password:''
+  }),
+  methods: {
+    login () {
+      this.$axios.post('login', {
+        username: this.code,
+        password: this.password
+      })
+    }
+  }
+}
+</script>