Laravel-Vue-AddUser.php

public function addUser(Request $request) {
        $username1 = $request->get('username');
        $username2 = $request->get('remoteUsername');
        $exists = User::where('username',$username2)->first();
        $callingUser = User::where('username',$username1)->first();
        $uuid1 = $callingUser->uuid;
        if($exists) {
            $uuid2 = $exists->uuid;
            $pubnub = new PubnubConfig($uuid1);
            $pubnub->grantOne($uuid1,$uuid2);
            return response()->json($uuid2);
        }
        else {
            return response()->json("404");
        }
    }

Laravel-Vue-Chat.vue

<template>
  <div class="chat-container">
    <div class="heading">
      <h1>{{ title + username}}</h1>
    </div>
    <div class="body">
      <friend-list :username = "username"></friend-list>
      <div class="right-body">
        <div class="table">
          <chat-log :username = "username" v-chat-scroll></chat-log>
          <message-input :username = "username" :authUUID= "authUUID"></message-input>
        </div>
      </div>
    </div>
  </div>
</template>

Laravel-Vue-ChatLog.vue

<template>
  <div
    class="chat-log"
    ref="chatLogContainer"
  >
  
   <message-bubble
      v-for="(message,index) in getCurrentChatMessages"
      :key="index"
      :time="message.time"
      :text="message.text"
      :from="message.username"
    ></message-bubble>
  </div>
</template>

Laravel-Vue-ChatLog_Creation.js

created() {
	 this.$pnSubscribe({
        channels: [this.currentChat]
  })
}

Laravel-Vue-ChatLog_Watch.js

watch: {
  currentChat: function() {
    let currentChatKey = []
    currentChatKey.push(this.currentChat)
    this.$pnSubscribe({
      channels: currentChatKey
    })
    let mL = []
    Pubnub.getInstance().history({
      channel: currentChatKey,
      count: 15, // how many items to fetch
      stringifiedTimeToken: true, // false is the default
	  })
	  .then(response => {
		  response.messages.forEach(message => {
        mL.push(message.entry)
        this.$store.state.friends.forEach(friend => {
          if(friend.chatKey == this.currentChat) {
            friend.lastMessage = message.entry.text
          }
        })
		  })
    })
    this.$store.commit('updateChat',{chatKey: this.currentChat,messages: mL})
    this.incomingMessage =  this.$pnGetMessage(this.currentChat,this.storeMessages)
  } 
}

Laravel-Vue-FriendList.vue

<template>
  <div class="friend-list">
    <div class="new-chat">
      <div class="add-one-one" @click="newChat">+</div>
      <div class="name-input">
        <input v-model="friendUsername" type="text" placeholder="Friend's Username">
      </div>
    </div>
    <friend-list-item
      v-for="(friend, index) of friends"
      :key="index"
      :index="index"
      :name="friend.name"
    ></friend-list-item>
    
  </div>
</template>

Laravel-Vue-FriendList_CheckAndAdd.js

checkAndAdd(msg) {
    if(msg.message.toName == this.username) {
      let subscribedChannels = []
      this.$store.state.friends.push({name: msg.message.fromName, chatKey: msg.message.chatKey, lastMessage: ''})
      this.$store.state.friends.forEach(friend => {
        subscribedChannels.push(friend.chatKey)
      })
      this.$pnSubscribe({
        channels: subscribedChannels
      });
      let mL = []
      Pubnub.getInstance().history({
        channel: msg.message.chatKey,
        count: 15, // how many items to fetch
        stringifiedTimeToken: true, // false is the default
	    })
	    .then(response => {
		    response.messages.forEach(message => {
          mL.push(message.entry)
          this.$store.state.friends.forEach(friend => {
            if(friend.chatKey == msg.message.chatKey) {
              friend.lastMessage = message.entry.text
            }
          })
		    })
      })
      this.$store.commit('addChat',{chatKey: msg.message.chatKey, messages: mL})  
      //console.log(this.$store.state.friends)
    }
  }

Laravel-Vue-FriendList_NewChat.js

newChat() {
 let uri = domain + "/api/add"
 if(this.username != this.friendUsername) {
 axios.post(uri,{remoteUsername: this.friendUsername, username: this.username})
 .then(response => {
       if(response.data != "404") { 
        // console.log(this.$store.state.friends)
        // console.log(this.alreadyExists(this.friendUsername))
            if(!this.alreadyExists(this.friendUsername)) {
              let friendChannel = this.$store.state.user.uuid + "-" + response.data
              let mL = []
              this.$store.state.friends.push({name: this.friendUsername, chatKey: friendChannel, lastMessage: ''})
              Pubnub.getInstance().history({
                channel: friendChannel,
                count: 15, // how many items to fetch
                stringifiedTimeToken: true, // false is the default
	              })
	              .then(response1 => {
		              response1.messages.forEach(message => {
                    mL.push(message.entry)
                    this.$store.state.friends.forEach(friend => {
                      if(friend.chatKey == friendChannel) {
                      friend.lastMessage = message.entry.text
                      }
                    })
                 })
              })
               this.$store.commit('addChat',{chatKey: friendChannel, messages: mL})
                this.$pnPublish({
                  channel: 'control',
                  message: {
                    fromName: this.username,
                    toName: this.friendUsername,
                    chatKey: this.$store.state.user.uuid + "-" + response.data
                  }
                })       
            }
          } 
          let sc = []
          this.$store.state.friends.forEach(friend => {
            sc.push(friend.chatKey)
          })
        this.$pnSubscribe({
          channels: sc
        });
   })
 }	
}

Laravel-Vue-FriendListItem.vue

<template>
  <div class = "friend-list-item" :class = "selected" @click= "onFocus" :id = "name">
    <img :src ="profileImg" />
    <div class="text">
      <span class="name" :id = "name">{{ name }}</span>
      <span class="lastMessage" :id = "name">{{lastMessage}}</span>
    </div>
  
  </div>
</template>

laravel-Vue-FriendListItem_Computedjs

computed: {
    chatKey() {
      return this.$store.state.friends[this.index].chatKey;
    },
    ...mapState([
        'user','friends','currentChat'
    ]),
    selected() {
      return this.$store.state.currentChat === this.chatKey ? 'selected' : '';
    },
    avatarSrc() {
      return defaultProfileImg
    },
    lastMessage() {
      return this.$store.state.friends[this.index].lastMessage
    }
  }

laravel-Vue-FriendListItem_onFocus.js

  methods: {
    onFocus(event) {
      EventBus.$emit('focus-input', event);
      this.$store.commit('setCurrentChat', {chatKey: this.chatKey});
    },
   
  }

Laravel-Vue-Home.vue

<template>
    <div class = "home">
        <div class = "row">
            <div class="col l2"></div>
            <div class = "col l4">
                <div class = "card" id = "left">
                    <div class = "card-header">
                        <h5 class = "card-title center-align card-heading">Sign up</h5>
                    </div>
                    <div class="card-content">
                        <form @submit.prevent = "signUp">      
                            <label for = "username">Username</label>                            
                            <input type = "text" id = "username" name = "username" v-model = "username" required/><br><br>
                            <label for = "password">Password</label>
                            <input type = "password" name = "password" id = "password" v-model = "password" required/><br><br>
                            <label for = "password_confirmation">Re-enter Password</label>
                            <input type = "password" name = "password_confirmation" id = "password_confirmation" v-model = "passwordConfirmation" required/>
                            <div class="center-align">
                                <p class = "red-text darken-2">
                                    <span v-for = "(error,index) in errors" :key = "index">{{error}}</span><br>        
                                </p>
                                <p class = "green-text darken-2" v-if = "validated">Data validated</p>
                                <button type = "submit" class = "btn btn-medium black">Sign up</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col l4">
                <div class = "card" id = "right">
                    <div class = "card-header">
                         <h5 class = "card-title card-heading center-align">Sign in</h5>
                    </div>
                    <div class="card-content">
                        <form @submit.prevent = "signIn">
                            <label for = "username_signin">Username</label>
                            <input type = "text" name = "username_signin" id = "username_signin" v-model = "usernameSignin"><br><br>
                            <label for = "password_signin">Password</label>
                            <input type = "password" name = "password_signin" id = "password_signin" v-model = "passwordSignin"><br><br>
                            <div class="center-align" id = "signin-btn">
                                 <p class = "red-text darken-2">
                                    <span v-for = "(error,index) in errorsSignin" :key = "index">{{error}}</span><br>        
                                </p>
                                <p class = "green-text darken-2" v-if = "validatedSignin">Data validated</p>
                                <button type = "submit" class = "btn btn-medium black">Sign in</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

Laravel-Vue-MessageBubble.vue

<template>
  <div class="message-bubble" :class="me">
    <span class="from" :class="isGlobal">{{ from }}</span>
    <br :class="me + ' ' + isGlobal">
    <span class="message-text">{{ text }}</span>
  </div>
</template>

Laravel-Vue-MessageInput.vue

<template>
  <div class="message-input">
    <input type = "text" placeholder="Your message here" @keydown.enter="submitMessage" v-model = "message" class = "messageInput input-field">
  </div>
</template>

Laravel-Vue-SendMessage.js

submitMessage() {
      
        this.$pnPublish({
        	channel: this.currentChat,
        	message: {
          		username: this.username,
          		text: this.message,
              time: Date.now(),
              channel : this.currentChat
        	}	   	  
        })  
    
    this.message = '';

    }

Laravel-Vue-Signin.php

public function signIn(Request $request) {
        $username = $request->get('username');
        $password = $request->get('password');
        $exists = User::where('username',$username)->first();
        $pubnub = new PubnubConfig($exists->uuid);
        $pubnub->grantGlobal($exists->uuid);
        if($exists) {
            $passwordCorrect = Hash::check($password,$exists->password);
            return response()->json($passwordCorrect);
        }
    }

Laravel-Vue-Signin.vue

signIn() {
            if(this.usernameSignin && this.passwordSignin) {
                this.errorsSignin = []
                let uri = domain + "/api/signin"
                axios.post(uri,{username: this.usernameSignin, password: this.passwordSignin})
                .then(response => {
                    if(response.data == true) {
                        this.validatedSignin = true
                        this.$router.push({name: 'chat', params: {username: this.usernameSignin, auth: true}})
                    }
                    else {
                        this.validatedSignin = false
                        this.errorsSignin.push("Please check your credentials")
                    }
                }).catch(err => {
                    console.log(err)
                })
            }
        }

Laravel-Vue-Signup.php

public function signUp(Request $request) {
        $username = $request->get('username');
        $exists = User::where('username',$username)->first();      
       
        if($exists) {
            return response()->json("failed");
        }
        else {
            $uuid = $request->get('uuid');
            $pubnub = new PubnubConfig($uuid);
            $pubnub->grantGlobal($uuid);
            $password = bcrypt($request->get('password'));
            User::create([
            'uuid' => $uuid,
            'username' => $username,
            'password' => $password
            ]);
            return response()->json("success");   
        }
    }

Laravel-Vue-Signup.vue

signUp() {
            if(this.username && this.password && this.passwordConfirmation) {
                this.errors = []
                if(this.password === this.passwordConfirmation) {
                    this.errors = []
                    let uri = domain + "/api/signup"
                    axios.post(uri,{uuid: this.$uuid.v4(), username: this.username, password: this.password})
                    .then(response => {
                        if(response.data == "success") {
                            this.validated = true
                            this.$router.push({name: 'chat', params: {username: this.username, auth: true}})
                        }
                        else {
                            this.validated = false
                            this.errors.push("Username already exists")
                        }
                    }).catch(err => {
                        console.log("Check your controller logic")
                    })
                }
                else {
                    this.errors.push('Passwords do not match')
                }
            }
            else {
                this.errors.push('Please make sure you\'ve entered all the required fields')
            }
        }

Laravel-Vue-Store.js

export default new Vuex.Store({
    state: {
        user: {},
        friends: [],
				currentChat: 'global',
        chats: [
					{chatKey: "global", messages: []},
				]
    },
    getters: {
        getCurrentChatMessages(state) {
           return state.chats.find(chat => 
						 	chat.chatKey == state.currentChat
					 ).messages
				},
    },
    mutations: {
        setCurrentChat(state, {chatKey}) {
          state.currentChat = chatKey;
				},
				addChat(state,chat)	{
					state.chats.push(chat)
				},
				updateChat(state,payload) {
					state.chats.forEach(chat => {
						if(chat.chatKey == payload.chatKey) {
							chat.messages = payload.messages
						}
					})
				},
				addMessage(state,message) {
					state.chats.forEach(chat => {
						if(chat.chatKey == message.channel) {
							if(chat.messages.length < 15) {
								chat.messages.push(message)
							}
							else {
								chat.messages.shift()
								chat.messages.push(message)
							}
						}
					})
					state.friends.forEach(friend => {
						if(friend.chatKey == message.channel) {
							friend.lastMessage = message.text
						}
					})
				}
  
    },
    actions: {

    }
 })