User Account Settings feature (4 PEOPLE ON THIS)

[calstatelaacm]

Requirements:

( The code has already been outlined, look through the java files for exact locations to code)

The goal of this task is to create a display that allows users to see thier account information. Look at the code, I have created the methods already, you just need to fill in all the TODOs in the code

In the top right corner, when user clicks on the graduation cap, it should take them to a view that shows all the information about their account. You as a group will come up with ideas and implement all the necessary code for this feature.

Follow the following steps in order to implement this feature:

First, talk to deric about what the UI is supposed to look like. The display should show the following information somewhere in the page, in an organized manner.

• Full Name
• Email
• CIN
• Phone number
• Secret Code (only the last 30% of the string)
• The SSU's posted by them (latest to oldest)

Hint: Look at the HumanUser.java class to see what information we have about each user.

Second, come up with the list of REST API's that you will need to make calls to. Typically, you will be calling:

/SSU/{userid} to get all the SSU posted by the user

You will need to create a custom API to get the user specific information (this has already been created. you just need to fill in the method inside HumanUserControllers.java )

localhost:8080/userdata/info that returns JSON data consisting Name, email, CIN, phonenumber, etc.

In order to receive that data, you will need to look at what methods are available inside HumanUserFactory.java. Talk to people working on #15 and #18. If you need any extra methods inside the factory, let them know. However, the following method should be enough:

    @Override
    public HumanUser getById(String id)

For now, just have the API return some dummy data, a JSON object with some default values for names, email, etc etc (since the factory method hasn't been filled yet). Use postman to check if the REST API is functional or not.

Lastly, you will need to make a an axios.get call to the /userdata/info url from the frontend and fill the vue template with the data received.

Frontend code: For frontend, go to frontend/pages/accountSettings folder. You will put the html + javascript + css stuff in those files.

HINT: Don't start coding right away. PLAN FIRST. WRITE DOWN IDEAS. DRAW PICTURES OF THE DISPLAY. Then once you have a solid plan of what you will do, implement the requirements.

[exelarios]

mock up: https://drive.google.com/drive/folders/1ROqSD9Xb9MRz8IngvLJB_9ZlQwhvzNzQ?usp=sharing

yellow: #f1c40f font: Oswald

font-family: 'Oswald', sans-serif;

[PranilDahal]

Finished by the group.