Online Chatroom

Website Detail Description

• Login Page

  

• SignUp Page

  

• Friend Page

  Once logined, the website will display the friend page, and will show all of your friends. The button on the left will open the toggle menu, and the button on the right is the logout button.

  

• Change personal photo

  You can change your photo by clicking on your own photo and upload from computer. If a user hasn't changed photo yet, it will display the default picture. If a user has logged in from Google, it will display the user's picture from Google, but the user can still change it afterwards.

  

• Add friend

  Click on users from the menu, and you can see all users. You can click on any user to send friend request.

  

  After clicking on "Add friend", it will show the alert message and dismiss the modal.

  

  If you are already friends or friend request has already been sent (or you click on yourself), the "Add friend" button won't show.

  

• Friend Requests

  The person who received friend requests can see it in the "Requests" page, and can choose to accept.

  

  After accepting the friend request, both of them will see each other in their "Friend" page and the request will be deleted and displays "no requests".

  

• Group Page

  When you don't have any groups, it will display "no groups". You can create a new group with the button "Add".

  

  You can enter a name for the group, and choose a group photo. Click on the friends you want to add from the friend list, and it will disappear from the friend list and appear on the selected list.

  

  A new group is then created !

  

  Click on the group and you will go to the chat page. The title above is the group name.

  

  Type in any thing and you can also send pictures.

  

  Friends that are added into the group will also see the group on their page.

  

  And everyone can chat now!

  

• Chat with single friend

  Click on a friend from friend page and you can chat and send pictures with that friend. The title above shows the friend's name.