Vue.js 2 Forum

 

Demo link: https://vue-forums.firebaseapp.com/

Video link: https://youtu.be/33WeNhsAcBk

Application Description Page: https://ashot72.github.io/Vue2Forum/description/index.html

Git Repository: https://github.com/Ashot72/Vue2Forum

 

Figure 1

This is the initial forums page which is an anonymous page, meaning you can access this page without being authenticated.

 

Figure 2

If you try to navigate to another page you will see an error message. You must Sign In to navigate to other pages.

 

Figure 3

There are two options under Sign In link: Sign In and Sign Up. Let's Sign Up.

 

Figure 4

A valid email address and password require to Sign Up. You can see that Sign Up button is disabled by default. The reason is that there are some validators attached to text boxes.

 

Figure 5

Email must be a valid one and Password must be at least 6 characters in length.

 

Figure 6

Email is required and Password and Confirm Password must be the same.

 

Figure 7

Async validator is attached to Email field by checking against a list of users to ensure that an email is not taken while typing.

 

Figure 9

Registering as david@gmail.com.

 

Figure 10

Users can access any page and also see Add new Forum link after being signed up.

 

Figure 11

The user redirected to topics page of forum SharePoint 2013. The forum has two topics. First topic has 2 replies and 9 views and the last poster is robet@gmail.com.

 

Figure 12

This is the posts page of topic Ribbon is not showing sometimes after checkout the page.

The logged-on user is david@gmail.com and posters are ashota@gmail.com and robert@gmail.com. That is the reason that david@gmail.com can only reply.

 

Figure 13

Logged-on user is robert@gmail.com and he can edit posts created by him.

 

Figure 14

Edit link is clicked and Edit Post dialog is popped-up to update the post.

 

Figure 15

 

Logged-on user is ashota@gmail.com and he can delete the last post. If a post does not have a reply and the last poster is the logged-on one then it can be deleted.

Here is the last post was made by ashota@gmail.com and he can delete it.

 

Figure 16

The original poster can mark posts as answered/not answered. Marked answers will be embedded in a gray border.

 

Figure 17

Only the original poster (topic creator) can edit and delete the topic.

 

Figure 18

Editing the topic.

 

Figure 19

Delete topic confirmation.

 

Figure 20

The same is true with forums. Only forum creator can edit/delete the forum otherwise links are not available.

 

Figure 21

Errors will be displayed in a dialog. This time user was trying to access with a wrong email address.

The application is responsive and here are some phone screenshots.

 

Figure 22

Menu to sign in/sign up.

 

Figure 23

Signing In.

 

Figure 24

Sign In dialog

 

Figure 25

Forums page.

 

Figure 26

Topics page.

 

Figure 27

Posts page.