Vijayakrishnan Krishnan 5 năm trước cách đây
mục cha
commit
dc76f506a7

+ 60 - 18
resources/views/join.blade.php

@@ -1,24 +1,66 @@
-@extends('layouts.guest-home')
+@extends('layouts.join')
 @section('content')
+    <form action="/api/client/createAsGuest"
+          method="post"
+          enctype="multipart/form-data"
+          onsubmit="return joinMeeting(this)">
+        @csrf
 
-    <div class="d-flex">
-        <h1 class="font-weight-bold">Consult your doctor from the comfort of your home!</h1>
-    </div>
+        <p class="login-box-msg">Welcome! Please check in.</p>
 
-    <div class="d-flex mt-4 mt-sm-5">
-        <div class="form-container">
-            <div class="form">
-                <h3 class="border-bottom border-success text-center font-weight-bold py-3 m-0">Join Meeting</h3>
-                <p class="px-4 text-dark m-0 py-3"><b>Mr. John Doe</b> would like you to join him/her on her video
-                    consultation with the doctor/</p>
-                <div class="px-4 mb-4" autofocus="true">
-                    <input type="text" class="form-control py-3" placeholder="Your name">
-                </div>
-                <div class="px-4 pb-4">
-                    <button class="btn btn-success font-weight-bold w-100">Join Meeting</button>
-                </div>
-            </div>
+        @if (session('message'))
+            <div class="alert alert-danger">{{ session('message') }}</div>
+        @endif
+
+        <div class="form-group mb-3">
+            <input type="text" name="nameFirst" class="form-control" placeholder="First Name" required>
+        </div>
+        <div class="form-group mb-3">
+            <input type="text" name="nameLast" class="form-control" placeholder="Last Name" required>
+        </div>
+        <div class="form-group mb-3">
+            <input type="date" name="dob" class="form-control" placeholder="Date of Birth" required>
+        </div>
+        <div class="form-group mb-3">
+            <input type="text" name="medicareNumber" class="form-control" placeholder="Medicare Number" required>
+        </div>
+        <div class="form-group mb-3">
+            <input type="text" name="ssn" class="form-control" placeholder="SSN" required>
         </div>
-    </div>
 
+        <button type="submit" class="btn btn-primary btn-block mx-auto w-50 mt-4 mb-2">Check In</button>
+    </form>
+    <script>
+        function joinMeeting(_form) {
+            $.post('/api/session/createStrangerSession', {}, function (_data) {
+                var sessionKey = _data.data;
+                $.ajax({
+                    type: 'post',
+                    url: '/api/client/createAsGuest',
+                    headers: {
+                        'sessionKey': sessionKey
+                    },
+                    data: $(_form).serialize(),
+                    dataType: 'json'
+                })
+                    .done(function (_data) {
+                        console.log(_data);
+                        if(_data.success) {
+                            localStorage.clientFirstName = $('[name="nameFirst"]').val();
+                            localStorage.clientLastName = $('[name="nameLast"]').val();
+                            localStorage.clientSessionKey = _data.data;
+                            // window.location = '/meet';
+                        }
+                        else {
+                            alert(_data.message);
+                        }
+                    })
+                    .fail(function (_data) {
+                        console.log(_data);
+                        alert(_data.message);
+                    });
+            }, 'json');
+            return false;
+        }
+    </script>
 @endsection

+ 81 - 0
resources/views/layouts/join.blade.php

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Stag | Pro</title>
+    <!-- Tell the browser to be responsive to screen width -->
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/AdminLTE-3.0.5/plugins/fontawesome-free/css/all.min.css">
+    <!-- Ionicons -->
+    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
+    <!-- icheck bootstrap -->
+    <link rel="stylesheet"
+          href="/AdminLTE-3.0.5/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/AdminLTE-3.0.5/dist/css/adminlte.css">
+    <!-- Google Font: Source Sans Pro -->
+    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
+</head>
+<body class="hold-transition login-page">
+
+<style>
+    .auth-branding {
+        background: #444343 !important;
+        box-shadow: none !important;
+        border-bottom: 1px solid #262626;
+        padding: 0.5rem 0;
+        margin: 0;
+        border-top-left-radius: 8px;
+        border-top-right-radius: 8px;
+        font-size: 1.4rem;
+    }
+
+    .auth-branding img {
+        line-height: .8;
+        margin-left: 0;
+        margin-right: .5rem;
+        margin-top: -3px;
+        max-height: 33px;
+    }
+
+    .login-card-body {
+        border-bottom-left-radius: 8px;
+        border-bottom-right-radius: 8px;
+    }
+</style>
+<div class="login-box">
+    <div class="login-logo auth-branding text-center border-0">
+        <img src="/AdminLTE-3.0.5/dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
+             style="opacity: .8">
+        <span class="brand-text font-weight-light text-white"><b>Stag</b> Pro</span>
+    </div>
+    <!-- /.login-logo -->
+    <div class="card">
+        <div class="card-body login-card-body">
+            @yield('content')
+        </div>
+        <!-- /.login-card-body -->
+    </div>
+</div>
+<!-- /.login-box -->
+
+<!-- jQuery -->
+<script src="/AdminLTE-3.0.5/plugins/jquery/jquery.min.js"></script>
+<!-- Bootstrap 4 -->
+<script src="/AdminLTE-3.0.5/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+<!-- AdminLTE App -->
+<script src="/AdminLTE-3.0.5/dist/js/adminlte.js"></script>
+
+<!-- check if clientSessionID already exists, if so take to meet page -->
+<script>
+    window.onload = function() {
+        if(localStorage.clientSessionKey) {
+            window.location = '/meet';
+        }
+    }
+</script>
+</body>
+</html>

+ 29 - 9
resources/views/meet.blade.php

@@ -39,6 +39,10 @@
                 started: false,
                 client: false,
                 pro: false,
+
+                sessionKey: '',
+                selfName: '',
+                selfToken: '',
             },
             methods: {
                 getInitials: function(_name) {
@@ -96,14 +100,14 @@
 
                     var self = this;
 
-                    var apiKey = '45828062';
-                    var sessionId = '1_MX40NTgyODA2Mn5-MTU5MjIxMTY1MzQ1NH5aUnB4alVsMzZSTWFnUEIvUFlqYlFjWDR-UH4';
-                    var token = '';
-                    @if($guest)
-                    token = 'T1==cGFydG5lcl9pZD00NTgyODA2MiZzaWc9NmE0YWU1NzIzN2I1ODUxNzY2YzMzN2VkNGNjMTI4ODdlYTBkNDYwOTpzZXNzaW9uX2lkPTFfTVg0ME5UZ3lPREEyTW41LU1UVTVNakl4TVRZMU16UTFOSDVhVW5CNGFsVnNNelpTVFdGblVFSXZVRmxxWWxGaldEUi1VSDQmY3JlYXRlX3RpbWU9MTU5MjIxMTY1NSZub25jZT0wLjgyMDAzMDEwNjk1NDk3MiZyb2xlPXB1Ymxpc2hlciZleHBpcmVfdGltZT0xNTkyMjk4MDU1';
-                    @else
-                    token = 'T1==cGFydG5lcl9pZD00NTgyODA2MiZzaWc9NGFjNzQ2NjgyNThjZjE4MTdiMTFmMDMwZTg5ZjFjMzhjZDJlMDFiMDpzZXNzaW9uX2lkPTFfTVg0ME5UZ3lPREEyTW41LU1UVTVNakl4TWpreE1qSTRObjUzZUhCU1dYWjRlbVF6V2pJMGN6UkRRbEp2T0RsbFduTi1VSDQmY3JlYXRlX3RpbWU9MTU5MjIxMjk0NCZub25jZT0wLjkwMjA3MTc4OTk3ODY4OTkmcm9sZT1wdWJsaXNoZXImZXhwaXJlX3RpbWU9MTU5MjI5OTM0NA==';
-                    @endif
+                    var apiKey = '46678902';
+                    var sessionId = this.sessionKey;
+                    var token = this.selfToken;
+{{--                    @if($guest)--}}
+{{--                    token = 'T1==cGFydG5lcl9pZD00NTgyODA2MiZzaWc9NmE0YWU1NzIzN2I1ODUxNzY2YzMzN2VkNGNjMTI4ODdlYTBkNDYwOTpzZXNzaW9uX2lkPTFfTVg0ME5UZ3lPREEyTW41LU1UVTVNakl4TVRZMU16UTFOSDVhVW5CNGFsVnNNelpTVFdGblVFSXZVRmxxWWxGaldEUi1VSDQmY3JlYXRlX3RpbWU9MTU5MjIxMTY1NSZub25jZT0wLjgyMDAzMDEwNjk1NDk3MiZyb2xlPXB1Ymxpc2hlciZleHBpcmVfdGltZT0xNTkyMjk4MDU1';--}}
+{{--                    @else--}}
+{{--                    token = 'T1==cGFydG5lcl9pZD00NTgyODA2MiZzaWc9NGFjNzQ2NjgyNThjZjE4MTdiMTFmMDMwZTg5ZjFjMzhjZDJlMDFiMDpzZXNzaW9uX2lkPTFfTVg0ME5UZ3lPREEyTW41LU1UVTVNakl4TWpreE1qSTRObjUzZUhCU1dYWjRlbVF6V2pJMGN6UkRRbEp2T0RsbFduTi1VSDQmY3JlYXRlX3RpbWU9MTU5MjIxMjk0NCZub25jZT0wLjkwMjA3MTc4OTk3ODY4OTkmcm9sZT1wdWJsaXNoZXImZXhwaXJlX3RpbWU9MTU5MjI5OTM0NA==';--}}
+{{--                    @endif--}}
                     var session = OT.initSession(apiKey, sessionId);
 
                     // TODO: Subscribe to remote stream (pro)
@@ -145,7 +149,23 @@
                 }
             },
             mounted: function() {
-                this.initOpenTok();
+
+                var self = this;
+
+                this.sessionKey = localStorage.clientSessionKey;
+
+                var name = [];
+                if (localStorage.clientFirstName) name.push(localStorage.clientFirstName);
+                if (localStorage.clientLastName) name.push(localStorage.clientLastName);
+                this.selfName = name.join(' ');
+                $.post('/api/openTok/getClientToken', {
+                    opentokSessionId: localStorage.clientSessionKey,
+                    name: name.join(' ')
+                }, function (_data) {
+                    self.selfToken = _data.data;
+                    self.initOpenTok();
+                });
+
             }
         });
     </script>

+ 5 - 2
routes/web.php

@@ -31,13 +31,16 @@ Route::get('/join/{meetingID}', function () {
 Route::get('/meeting/{meetingID}/{participantID}', 'GuestController@meeting');
 */
 
+Route::get('/join', function () {
+    return view('join');
+});
 Route::get('/meet', 'GuestController@meet');
 
-Route::middleware('ensureNoValidProSession')->group(function(){
+// Route::middleware('ensureNoValidProSession')->group(function(){
     Route::get('/', 'AppSessionController@proRequestSmsLogInToken')->name('pro-request-sms-login-token');
     Route::get('/pro/login', 'AppSessionController@proLogIn')->name('pro-login');
     Route::post('/pro/login', 'AppSessionController@processProLogIn')->name('process-pro-login');
-});
+// });
 
 Route::middleware('ensureValidProSession')->group(function(){
     Route::get('/dashboard', 'ProController@dashboard')->name('pro-dashboard');