Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement a basic version of users' profile fly-out menu #134

Open
joausaga opened this issue Mar 4, 2018 · 2 comments
Open

Implement a basic version of users' profile fly-out menu #134

joausaga opened this issue Mar 4, 2018 · 2 comments

Comments

@joausaga
Copy link
Member

joausaga commented Mar 4, 2018

Implement a fly-out menu following the design presented here and having these functionalities:
1- Display the name and username of the user;
2- Have a button that allows users to log out of the system. The session of the user should be deleted after he/she logs out of the system. After the logout, the user should be redirected to the login page;
3- Have a menu with two options: one to access to the user profile information and another to access the configurations of the system. When the user clicks on these options the vuejs modal should be displayed. For the basic version of the menu, the content of the modal can be empty.

@joausaga
Copy link
Member Author

@Ana-Cris: next things TODO in this issue
1- It is not clear that clicking on the avatar makes a menu to be displayed. We need to add a visual clue that indicates that the picture is an interactive feature of the system. See, for example, the arrow (visual clue) on the right side of the picture in the top menu of Github.
2- Change the title of modal according to the name of the option selected.

joausaga added a commit that referenced this issue May 11, 2018
Improvement of the issue #134 - fly-out menu
@Ana-Cris
Copy link
Collaborator

Implementation:

1- Display the name and username of the user

To implement this funcionality a Get Request was added to the API (Backend.vue). The output is the list of users. This list is used in the function DisplayName() in Header.vue. The function compares each username in the list with the username of the Logged in user.

2- Allow log out of the system

The logout () function in Header.vue nulls the content of the variables Backend.username and the Backend.token that saves the user's token. Then the user is redirected to the Login page.

3- Vue.js Modal

The Modal.vue file is the template of the Modal.
It was created two functions: one to open the Modal and another to close it. (openModal (id) and closeModal() in Header.vue). The parameter "id" allows identify the title of the Modal, if the user clicks on "Settings" or "My Profile" buttons.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants