User Account Access Control in cyberpanel?

[Simbaclaws]

Hi there,

I'm not sure whether I should ask this here or not.

Basically what I want to do is not have reseller and user accounts that can create websites for their "part" of your server. But what I want to have is the ability to define which user can access which parts of the cyberpanel interface.

Basically some form of access control for users.

So that I can have a admin that can create websites, and have a user that can for example only access the file manager of a specific website that the admin created. Or give them access to specific settings within their email account. So that they can for example request to change their password. Basic things like these... (configurable options for which part of the interface to display to a user would be a nice feature to have)

Is this something that can be considered to be added in a future release as a feature?

If not, do you accept pull requests to this project in case someone has made this functionality? I'm considering contributing to this project if it means I can have access control. Although I'm not sure if I'd have much time to spend or knowledge to share.

Is there a guide on getting started on development of cyberpanel? Like a developer documentation of some sort? I'd see this as a personal effort to help improve an open source product.

[usmannasir]

Hi @Simbaclaws

Right now we don't have any plans to implement such thing. However, this can be achieved by implementing an ACL at website/object level and then defining what features are accessible to that user for the said object.

We can for sure accept pull requests if this is something you can pull of.

If you need any help in understanding you can reach out to us.

And yes I've a dedicated youtube tutorial which helps you setting up CyberPanel dev environment -> https://www.youtube.com/watch?v=52WAqotaX5c

thanks.

[Simbaclaws]

Dear @usmannasir,

Thank you for your kind response. I'll try to find some time to see if I can set something up :)

Sounds like a fun project.

Are there any other developer resources other than the youtube channel?

I'll try asking questions in github if I can't figure something out.

Thank you.

[Simbaclaws]

I want to start out simple, do some css and html modifications. See if I can make the UI a bit more flashier.... So I forked the repo for my remote cyberpanel development server.

But where are the css files generated? Which build tools do I need (I'm a bit new to django and python in general), and where do I alter the css for the cyberpanel website? Changing the source files obviously won't work...

Is there no explanation anywhere on how to get started with the cyberpanel codebase?

[Simbaclaws]

I'm trying out some css and html effects for cyberpanel's UI in my local instance....

I haven't yet altered the actual code and css because I'm still having issues finding the right files to change.

I'll probably have to redo a lot of what I currently have locally. But I know how to do it now.

Anyways. Here are some example videos of some UI changes I made for fun.

https://user-images.githubusercontent.com/12895506/179380234-6c86fb57-983e-45ca-b3fd-521391693759.mp4

https://user-images.githubusercontent.com/12895506/179380235-c2201c17-bce9-41f2-aae7-d9a1a7195c29.mp4

[Simbaclaws]

Hi @Simbaclaws

Right now we don't have any plans to implement such thing. However, this can be achieved by implementing an ACL at website/object level and then defining what features are accessible to that user for the said object.

We can for sure accept pull requests if this is something you can pull of.

If you need any help in understanding you can reach out to us.

And yes I've a dedicated youtube tutorial which helps you setting up CyberPanel dev environment -> https://www.youtube.com/watch?v=52WAqotaX5c

thanks.

I was thinking more in the lines of having user roles and permissions. Where you can create a role for a user and basically check the permissions for each, with a setup screen that allows you to click on checkboxes for all of the different UI options (as permissions) in Cyberpanel for each user role. This way you could assign specific users to specific roles to only view specific parts of the html. Just render them only when the user has permissions for it.

All that needs to be done is setup permissions and roles within the user model of the database. I'm pretty sure you'd be able to create a role model with permissions that has a relationship to the user model. And then using those permissions within the html with django to check whether the user role has said permission for given UI display.

[usmannasir]

I want to start out simple, do some css and html modifications. See if I can make the UI a bit more flashier.... So I forked the repo for my remote cyberpanel development server.

But where are the css files generated? Which build tools do I need (I'm a bit new to django and python in general), and where do I alter the css for the cyberpanel website? Changing the source files obviously won't work...

Is there no explanation anywhere on how to get started with the cyberpanel codebase?

You can do CSS modifications directly from CyberPanel -> https://community.cyberpanel.net/t/community-generated-cyberpanel-themes/32230

However, you can not edit html, and if you do so it will be changed again to default after OS re-install.

[usmannasir]

Hi @Simbaclaws Right now we don't have any plans to implement such thing. However, this can be achieved by implementing an ACL at website/object level and then defining what features are accessible to that user for the said object. We can for sure accept pull requests if this is something you can pull of. If you need any help in understanding you can reach out to us. And yes I've a dedicated youtube tutorial which helps you setting up CyberPanel dev environment -> https://www.youtube.com/watch?v=52WAqotaX5c thanks.

I was thinking more in the lines of having user roles and permissions. Where you can create a role for a user and basically check the permissions for each, with a setup screen that allows you to click on checkboxes for all of the different UI options (as permissions) in Cyberpanel for each user role. This way you could assign specific users to specific roles to only view specific parts of the html. Just render them only when the user has permissions for it.

All that needs to be done is setup permissions and roles within the user model of the database. I'm pretty sure you'd be able to create a role model with permissions that has a relationship to the user model. And then using those permissions within the html with django to check whether the user role has said permission for given UI display.

It looks really simple when you say it, but there are many places where you need to create and add checks with great care to make this works.

[Simbaclaws]

I got a correct dev environment setup with my own install scripts and git repo. Where I can now run a cyberpanel.sh file from my server in order to install my own version of cyberpanel from my own git repo.... Took me quite some work to get that to work because I had to find all the files referencing the main repo and change their values, including checksums. It might be better to change this to environment variables in the future?

I'm currently just doing it to create a somewhat different UI just to get me started, that I don't think your repo would want. You probably have your own ideas about how this should work and look by default.

However, once I am more familiar with the code, I will be working on implementing a role based permission system. (From a different Repo, so that it can be easily put in a PR) And yes I do think it might take a bit of time.

[Simbaclaws]

Which bundler are you using for the generation of finalBase.css?

Or do you minify it from other files somehow? Currently I have to edit a minified file to get things to show up. Which is a horrible process.

EDIT: I created a gulpfile:

const {src,dest} = require('gulp');
const concat = require('gulp-concat');
const minifyCss = require('gulp-clean-css');

const bundleCss = () => {
        return src(['./baseTemplate/assets/bootstrap/css/*.css', './websiteFunctions/*.css', './baseTemplate/assets/helpers/*.css', './baseTemplate/assets/elements/*.css', './baseTemplate/assets/icons/iconsCombined.css', './baseTemplate/assets/widgets/widgetsCombined.css', './baseTemplate/assets/snippets/*.css']).pipe(concat('finalBase.css')).pipe(minifyCss()).pipe(dest('./baseTemplate/assets/finalBase/'));
}

exports.bundleCss = bundleCss;

[usmannasir]

I got a correct dev environment setup with my own install scripts and git repo. Where I can now run a cyberpanel.sh file from my server in order to install my own version of cyberpanel from my own git repo.... Took me quite some work to get that to work because I had to find all the files referencing the main repo and change their values, including checksums. It might be better to change this to environment variables in the future?

I'm currently just doing it to create a somewhat different UI just to get me started, that I don't think your repo would want. You probably have your own ideas about how this should work and look by default.

However, once I am more familiar with the code, I will be working on implementing a role based permission system. (From a different Repo, so that it can be easily put in a PR) And yes I do think it might take a bit of time.

I am sorry for late reply.

If you want to save the hassle, I can create a separate branch for you. And then you can use same cyberpanel.sh script to install your version of CyberPanel. If not there are many places you will have to edit which would take me lots of time to find and help you with.

The practical way is that I create branch for you, you can work it on your own repo and then push changes to the branch and you can easily install then.

[Simbaclaws]

Thank you for your kind response. It would be really nice having a branch to work on that I can merge into the main repository, this way I don't have to alter the scripts when at some point you might want to merge some changes I've made.

To be clear, I already have a repository and cyberpanel.sh script working on my end (complete install from my own github). So either way is fine.

Just to be clear here, do you want me to work specifically on the functionality I asked for in this issue on that branch?

Or could I get 2 branches? One for the ui changes I'm making and one for the access control I'll be working on?

Because I'd like to keep those seperate and clean.

I really appreciate the help you guys are offering.

Currently I'm learning some django and python so I can help improve the codebase at some point.

I'm still not quite sure how the finalBase.css and other static files get generated and what cli tools you'd use for it.... Since I'm a bit new to python and django in general, I've build my own gulp script right now for generating finalBase.css, but I doubt that is how I should do my workflow...

I am more of a javascript/php dev right now. And I'm quite famillair with linux, databases etc. Full stack.

[usmannasir]

I've created this branch for you https://github.com/usmannasir/cyberpanel/tree/v2.3.3-ac

It is better that you carry out both tasks in this branch (design, and access control).

Regarding CSS, for example if you are developing and you have changed some css/js files. You can do the following on your CyberPanel server

cd /usr/local/CyberCP
chmod +x upgrade.sh
./upgrade.sh

This will collect the static files and put them in correct directory for you, every time you change css/js you have to do this. You can read this as to how this is done https://github.com/usmannasir/cyberpanel/blob/v2.3.3-ac/upgrade.sh

[Simbaclaws]

Thank you, I will try to find some time to work on this. Right now I'm a bit over-employed, but whenever I find time I'll try to work on both this and the other issues I mentioned previously.

And thank you for the explanation for the css/js generation.

Does upgrade.sh also take into account the generation of the minified css and js assets? Or does it only collect and copy the static files to the /usr/local/CyberCP/static and public directories?

I can't see anywhere how finalBase.css is generated.... I'll try doing this on the branch you've created for me.

(Since I'm still working on the decoupling of cyberpanel from the main repository and cyberpanel.net server to make it easier to deploy your own development versions).

Also, would you know which files are actually being used for the CSS that I need to alter? Because there are files in: baseTemplate but also in static/baseTemplate Currently I'm editing both.... But it seems like the script only copies from static.