Web Client UI

[patrickap]

I am interested in the possibility of having a more advanced and modern web client interface for SFTPGo. Ideally, this could include features such as a file preview with associated metadata, a media gallery as well as an audio player. What would be the best approach for integrating these features into SFTPGo? Should the Rest API be used, or is there another preferred method? I am willing to contribute to this effort, however, I am unsure of my level of involvement at this time. It would be helpful to have a general understanding of the process and feasibility.

[drakkan]

Hello,

this is a feature I would like to add but Web development is not my preferred skill and so I'm postponing it.
I think the WebClient UI should be improved to be similar to Nextcloud/Filestash and we should also allow to easily switch to a dark theme.
Currently to have a dark theme you have to rebuild SBAdmin2 and this is something that many users are unable to do and you will have a dark theme only, no ability to switch.

I think server side templates rendering (as used now) has some advantages over using REST API only, for example you can easily pass objects and parameters, not sure if it can work with things like React/Vue etc.

What do you plan to use? It would be useful to have a proof of concept (that initially does not talk to the backend) to better understand what we can achieve. If you could provide something based on plain HTML/JS I would be glad to integrate it with the backend myself.

[drakkan]

Hi @drakkan I am currently working on a proof of concept app and I am considering the best approach for authentication. Currently, there are two separate endpoints, but I am thinking that it would be more efficient to maintain one endpoint that returns the corresponding role "admin" or "user" to the frontend.

I would like to hear your thoughts on this matter. Do you believe that this change would be too significant?

Thanks for working on this! We have different database tables for users and admins so we need a way to know which table we need to query, this is why we have two separate endpoints.

I suggest starting with the WebClient UI, it's smaller and therefore easier to write a proof of concept and I think only the web client (read file manager) needs advanced user interactions like drag and drop. Currently I think the WebClient needs improvement, but the WebAdmin is OK.

WebClient and WebAdmin are separate applications with completely different functionality and target users. We should keep them separate, and this also allows us to work on just one of them, the WebClient, and maybe even rewrite the WebAdmin in the future.

In your proof of concept I suggest you focus on the file manager section of the WebClient, this is what needs improvement.

[patrickap]

Hi @drakkan

I have a first version. The project has progressed quite a bit in terms of the basic setup. It' almost fully configured including a11y, i18n, and reusable components such as dropdowns, dialogs, toasts, buttons, inputs, .... In principle, the next step would be to call the API to authenticate the user and load the files. In my opinion, we would need another endpoint /user/token/refresh for this purpose, so that the access token does not need to be persisted in the frontend. Here is the current built version:

sftpgo-client_2023-03-12.zip

Run "npm install"
Run "npm run preview"

Type in anything to sign in...

[drakkan]

Hi @drakkan

I have a first version. The project has progressed quite a bit in terms of the basic setup. It' almost fully configured including a11y, i18n, and reusable components such as dropdowns, dialogs, toasts, buttons, inputs, .... In principle, the next step would be to call the API to authenticate the user and load the files. In my opinion, we would need another endpoint /user/token/refresh for this purpose, so that the access token does not need to be persisted in the frontend. Here is the current built version:

sftpgo-client_2023-03-12.zip

Run "npm install" Run "npm run preview"

Type in anything to sign in...

It looks a good starting point. Thank you!
Don't worry about the token refresh for now. I think we can set a cookie server side and auto-renew it as needed, like we do with the current web client. Please try to implement the file manager (also fake data, without API calls are ok) with the drag and drop, copy, rename with directory choice and other features like filestash/nextcloud.

FYI, I also plan to ask Colorlib (authors of AdminLTE theme) if they are interested in providing a js file browser with the advanced features we need, but this is currently stalled as obviously I will have to pay for this component and currently SFTPGo doesn't have enough sponsorships.

I'm also reevaluating the future of the project, if a more advanced UI is contributed by the community (for example from you) and I feel confident to maintain it and therefore accept the pull request, it will of course remain open source. Otherwise it may only be available in a paid version of SFTPGo.

[patrickap]

Hi @drakkan

Thank you for taking the time to provide me with your feedback. At this time, I must inform you that I will not be able to devote any additional time to this project in the foreseeable future. Please know that it required significant effort on my part, and I do believe that what I have provided thus far can serve as a valuable starting point.

I will provide you with the full source code, in the hopes that someone else may be able to pick up where I left off and complete the project.

sftpgo-ui.zip

[drakkan]

Hi @drakkan

Thank you for taking the time to provide me with your feedback. At this time, I must inform you that I will not be able to devote any additional time to this project in the foreseeable future. Please know that it required significant effort on my part, and I do believe that what I have provided thus far can serve as a valuable starting point.

I will provide you with the full source code, in the hopes that someone else may be able to pick up where I left off and complete the project.

sftpgo-ui.zip

Thanks for your help, much appreciated. I perfectly understand that this is a lot of work. Let's see how it will evolve. Your work could be a starting point. Thank you

[Chouille]

Hello @drakkan
I don't have many time yet but maybe i can help you on this topic and i will help you with pleasure on your project if it's possible.
Can you sum up all your ideas, feature requests, wanted layout designs/schema, ... i will recontact you as soon as i have something to show.

[drakkan]

Hello @drakkan I don't have many time yet but maybe i can help you on this topic and i will help you with pleasure on your project if it's possible. Can you sum up all your ideas, feature requests, wanted layout designs/schema, ... i will recontact you as soon as i have something to show.

Are you a UI/UX expert? What projects have you worked on in the past? You say you have no time, but this is a time consuming task.

I'm already paying a UI/UX company to help me improve the WebUI. Not yet sure if the new UI will be available to everyone. I'm starting to get annoyed by all these leeches