-
Notifications
You must be signed in to change notification settings - Fork 0
TwitterBaby_Front_End_Documentation
Input Field: username, email, first name, last name, password
- User name rule: required, [\w\-\s\/+. It cannot contain charactors like ‘@’, ‘*’ etc.
- Email: required, must follow email format.
- First name: required, [\w\-\s\/+, It cannot contain charactors like ‘@’, ‘*’ etc.
- Last name: Optional
- Password: required, min length 6, max length 16.
Any rule is broken, a red error message will be displayed on the screen and [Sign Up] button will be invalid(became to gray color). When the user corrects the inputs for these forms, the error messages disappear.
If sign up is successful, the input data will be stored in the Mongo DB in the backend. Then the web page will navigate to the login web page after three seconds.
Input Field: email, password If log in failure, a red error message will be displayed on the screen. If log in successfully, the user will be navigated to the user's homepage.
- Navigate to the user profile webpage by clicking the right-up corner button [user profile].
- In the user profile webpage, user info will be displayed.
- [Edit Profile] button which is on the right side of the webpage allows users to edit their profiles.
- A pop-up dialog will be triggered after clicking the [Edit profile] button.
- First Name, Last Name, Email, Bio are allowed to change/update.
Input Field: friend's username If friend's username searched is in the database, the page will show the user's home page. If friend's username searched is not in the database, the page will be a 404 not found page.
When search completed, there will be a user information dashboard on the left of the browser window. And there will be a follow button if you have not followed this person. You can click this button to follow this person.
If you have followed the person you search for, there will be a unfollow button. And you can click this button to unfollow the person.
Input Field: Tweet Content
There is a post area for posting a new tweet in the home page. Users can post a new tweet easily.
This function allows users to show and post comments for tweets.
- One [show comments] icon button at the bottom of the tweet card can be triggered to open a dialog.
- The dialog will show the tweet in the top, the text area in the middle, the comment list in the bottom.
- The text area in the middle is used for adding a comment.
- If a comment is added, the new comment will show in comment list immediately.
Users can delete the tweet they posted by clicking the delete button which is on the top-right corner of the tweet row.
Input Field: Retweet Content User can retweet a tweet by clicking the retweet button which is on the bottom-left corner of the tweet row. After clicking, there will be a dialog and user can enter the content and click submit button to submit it.
There is a refresh button on the right side of nav-bar. When someone whom the user followed posts new tweets, the refresh button will show a red point to notify the user.
There is a notification button on the right side of nav-bar. When someone follows the user, the refresh button will show a red number to notify the user.