User-Project-Management-Front-end.md

+# User & Project management Front end
+
+## Keycloak admin
+Keycloak admin panel allows admins to configure Keycloak and also manage user accounts. Some of the most common features are:
+- Configure login page (ex. Show/hide register, show/hide forgot password)
+- Manage users (ex. add an account, remove an account, impersonate user, etc.)
+- Create and assign roles and groups
+
+![image](uploads/user_project_management/keycloak_admin_1.png)
+
+![image](uploads/user_project_management/keycloak_admin_2.png)
+
+## User management
+
+### Register
+If the user registration function is enabled on Keycloak, the user can create an account by clicking on the *Register* link from the login page.
+
+Link: [Project Management Api](http://160.40.52.130:3001/swagger/index.html)
+
+![image](uploads/user_project_management/login.png)
+
+![image](uploads/user_project_management/register.png)
+
+### Login
+If the user is not logged in, they will be redirected to the login page when trying to access the Dashboard. 
+
+### Settings
+By clicking on the *Settings menu* in the Dashboard, the user is redirected to a *Settings page* (provided by Keycloak) where they can update their account. 
+
+![image](uploads/user_project_management/settings_1.png)
+
+![image](uploads/user_project_management/settings_2.png)
+
+### Logout
+The *logout button* is found on the upper left corner in the Dashboard menu. Clicking on this button will logout the user from Keycloak and redirect them to the *login page*. 
+
+![image](uploads/user_project_management/logout.png)
+
+## Project management
+
+### List projects
+Access *Projects page* from menu in the Dashboard, this page lists all the projects that the user has access to.
+
+![image](uploads/user_project_management/projects.png)
+
+### Create new project
+From the *Projects page*, click on the *New project button*. A popup appears with the following fields: project name, endpoint (link to repository ex. Github), username and password (to repository) and description. Click on *Save changes* and the project is created. 
+
+![image](uploads/user_project_management/new_project.png)
+
+### Select project
+To select a project, just click on a card. The selected project gets a green border and a storage session is added with all information about the selected project (used by toolboxes).
+
+![image](uploads/user_project_management/selected_project.png)
+
+### Edit project
+Click on the *Edit button* and all information about the project appears in a popup, where all fields are editable. Click *Save changes* and the project is updated. 
+
+![image](uploads/user_project_management/edit_project.png)
+
+### Delete project
+Click on the *Delete button*, a verification popup will appear. Click *Delete* and the project is removed. (The removed project is in fact not removed from the database, just inactive and will not appear in the *Projects list* in the Dashboard). 
+
+![image](uploads/user_project_management/delete_project.png)
+