Add fl-server frontend

[rawdaGastan]

We need to support a frontend for flist server

• create flist server #61

Pages

• login page: we should add a page to allow the user to log in and save the token generated (jwt token)
• create flist page: we should support a page to create a flist with its requirements (needs to apply valiadations)
• follow up on flist creation page: we should support a page to follow up the progress for a flist (maybe it should be integrated with the previous one
• list flists page: we should support listing different flists for each username exists (public no auth needed)
• preview flist page: we should support previewing flist (public no auth needed)

Requirements

• a good UI should be provided before starting the frontend part
• Use vue 3 in frontend implementation

NOTE: The api is available using swagger.json
when running the server

[ehab-hassan]

Login page with logo
https://www.figma.com/proto/pRMxGO2AIjWlofvUSJH0Dn/RFS?node-id=2-240&t=eIGAIRtZRB8W1g2q-0&scaling=contain&content-scaling=fixed&page-id=0%3A1


color #A559AA

[ehab-hassan]

all 4 pages are updated here
https://www.figma.com/proto/pRMxGO2AIjWlofvUSJH0Dn/RFS?node-id=119-196&t=B4PK7xwM2ZcG6qom-0&scaling=contain&content-scaling=fixed&page-id=0%3A1

• Home (without sign in)
• Sign in
• User page when sign in
• Create a flist page

[ehab-hassan]

The theme changed to be like a dashboard

https://www.figma.com/proto/pRMxGO2AIjWlofvUSJH0Dn/RFS?node-id=119-196&t=5Q84f9sPQjfRicBC-0&scaling=contain&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=119%3A196

there is one page to show dark mode when you click light/dark mode

use this image for login and home

[ehab-hassan]

preview page
https://www.figma.com/proto/pRMxGO2AIjWlofvUSJH0Dn/RFS?node-id=403-266&t=uvaxUKXWMClLp8PR-0&scaling=contain&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=119%3A196

[ashraffouda]

applied the steps here
https://github.com/threefoldtech/rfs/tree/master/frontend
logged in and created two flists from create flist page

and I was able to list and view them
flist list page