Akutelles login.html file

index.js

@@ -42,20 +42,30 @@ app.get('/login', (req, res) => {
   res.sendFile(__dirname + '/views/login.html');
 });
 
-
+/**
+* Summary:
+* Function for handling updating the List of users eho are currently online.
+* 
+*
+* Description:
+* Function will call addUserToActiveUsers() when a clients connects to the chatroom.
+* Function will call deleteUserFromActiveUsers() when a clients diconnects from the chatroom.
+*
+* 
+* @param {Object} response
+* @triggers addUserToActiveUsers()
+* @triggers deleteUserFromActiveUsers()
+* @listens  socket.on() 'userLogin' event
+* @listens  socket.on() 'disconnect' event
+*/
 io.on('connection', (socket) => {
   
-  // Triggered by emit() from client, when entering the chatroom
-  // SocketID => name
   socket.on('userLogin', async function(response) {
     await addUserToActiveUsers(response, socket);
-    
   });
   
-  // when disconnecting from chatroom
   socket.on('disconnect', async function(response) {
     await deleteUserFromActiveUsers(response, socket);
-
   });
 });
 
@@ -80,7 +90,7 @@ async function addUserToActiveUsers(response, socket) {
     activeUsers.set(socket.id, response.name);
     
     var userArr = Array.from(activeUsers.values());
-    
+    console.log(userArr);
     io.emit('updateUserlist', {
       userList : userArr
     });
@@ -147,15 +157,18 @@ io.on('connection', (socket) => {
 * Summary:
 * Function for forwarding private chat messages.
 * 
+*
 * Description:
+* Function checks whether the receiver is online at the moment.
+* If the receiver is online, the private message is sent to him/her.
 * Function will take the username of the sender, the private message, the name of the receiver  from the response.
 * Server will append the current time and call io.emit() 'chat message' event.
 * 
 *
 * 
 * @param {Object} response
-* @triggers io.emit() 'chat message' event
-* @listens  socket.on() 'chat message' event
+* @triggers io.emit() 'private message' event
+* @listens  socket.on() 'private message' event
 */
 io.on('connection', (socket) => {
   socket.on('private message', (response) => {
@@ -188,6 +201,23 @@ io.on('connection', (socket) => {
     })
     })
 
+/**
+* Summary:
+* Function for forwarding group chat messages.
+* 
+*
+* Description:
+* Function checks whether the receivers are online at the moment.
+* If the receivers are online, the group message is sent to them.
+* Function will take the username of the sender, the private message, the name of the receiver  from the response.
+* Server will append the current time and call io.emit() 'chat message' event.
+* 
+*
+* 
+* @param {Object} response
+* @triggers io.emit() 'groupMessage' event
+* @listens  socket.on() 'groupMessage' event
+*/
   socket.on('groupMessage', (response) => {
     
     let sender = response.name;

views/login.html

@@ -22,20 +22,7 @@
             const form = document.getElementById('login-form');
             form.addEventListener('submit', submitLoginData);
 
-        /**
-         * Summary:
-         * Handles Login of Client.
-         *
-         * Description:
-         * Logindata of Client, username and password are sent to server.
-         * If Serverresponse 200 Clientlogin accepted, the Username is saved in a cookie, and the client is redirected into the chatroom
-         * If Serverresponse != 200 inputform for username/password are emptied.
-         * 
-         * @fires   fetch to "/login"
-         * @fires   function getCookie()
-         * @listens submit event of "Submit" Button
-         */
-            function submitLoginData(event) {
+            async function submitLoginData(event) {
                
                 event.preventDefault();
 
@@ -61,62 +48,71 @@
                     .then(response => response.json())
                     .then((result) => {
                        
-                        console.log("Result ", result);
-                        
+                        var token = result.accessToken;
                         var status = result.statusCode;
-                        console.log("Status ", status);
                         
-                        var token = result.token;
-                        console.log("Token ", token);
+                        document.cookie = `token=${token}`;
+                        if (status == 200){
+                            authToken();
+                        }
+                    })
+                    .catch(error => console.log('error', error));
+              }
+              
+              function getCookie(name) {
+                    const value = `; ${document.cookie}`;
+                    const parts = value.split(`; ${name}=`);
+                    
+                    if (parts.length === 2) return parts.pop().split(';').shift();
+              }
+
+              async function authToken(){
+                var token = getCookie("token").split(',');
+                var myHeaders = new Headers();
+
+                myHeaders.append("Authorization", token[0]);
 
-                        if (status === "200") {
+                var requestOptions = {
+                    method: 'GET',
+                    headers: myHeaders,
+                    redirect: 'follow'
+                };
 
+                fetch("http://localhost:3000/authenticate", requestOptions)
+                    .then((response) => {
+                        // Weiterleitung an Chatroom, bei erfolreicher Anmeldung (StatusCode == 200)                        
+                        if (response.status === 200) {
+                            // Rückmeldung an Client                            
                             var divErfolgreich = document.createElement('div');
                             divErfolgreich.textContent = "Erfolgreich eingeloggt! Sie werden in den Chatroom weitergeleitet";
                             document.body.appendChild(divErfolgreich);
-
+                            // Speichern des Username in Cookie                            
                             setCookie(username.value.trim());
-                                                        
+                            /* socket.emit('userLogin', {                                
+                            name : username.value.trim()                            
+                            }); */
+                            // Kurzer Timeout, dass der Client die Nachricht lesen kann                            
                             setTimeout(function() {
                                 window.location.href = "/chatroom";
                             }, 2000);
-
                         }
                         // Bei nicht erfolgreichem Login (StatusCode != 200) werden die Eingabefelder geleert und dem Client eine Rückmeldung gegeben                        
                         else {
-                            
                             username.value = "";
                             password.value = "";
-
                             var loginFailed = document.createElement('div');
                             loginFailed.setAttribute("id", "loginFailed");
                             loginFailed.textContent = "Login fehlgeschlagen, bitte versuche es erneut";
                             document.body.appendChild(loginFailed);
                         }
-
-                        console.log(result)
                     })
                     .catch(error => console.log('error', error));
                 }
 
-         /**
-        * Summary:
-        * Hanldes Cookie for Login.
-        *
-        * Description:
-        * If UserLogin is successful, this function creates a cookie and stores the username of the logged in client.
-        * Format: "key" : "username:name"   --> "" : "username:John"
-        * 
-        * @ToDo    write "username" in key field and the name in "value" field 
-        * @listens  function submitLoginData()
-        *
-        * @param   {String}  name         Name is the input of the client, written in the loginform.
-        *
-        */
                 function setCookie(name) {
-                console.log("Username setCookie");
-                document.cookie = "username:" + name;
+                    document.cookie = "username=" + name;
                 }
+                    
         </script>
 
 	</body>