The dashboard does not works like SPA(Single Page Application) for every links the page gets reload and then contents are rendered to the DOM.

currently all th tables pop onto the screen flashing it would be nice to have a loader on home screen .

Not able to see the rest of the body of the dashboard while running the web locally on the system

Models, Adapters and Enforcers part is not being displayed.

Expected

Current local UI

Current Behaviour

Links with target="_blank" on them are vulnerable to having the referrer page being swapped out in the background while the user's attention is diverted by the newly-opened tab. This is known as reverse tabnapping.

Expected Behaviour

Adding rel="noopener noreferrer" to links protects your site's users against having the site you've linked to potentially hijacking the browser (via rogue JS).

More Info:- https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/

I tried running the project locally using both yarn and npm.

There are couple of major dependencies warning like core-js@ version update required .

Running with yarn

Running with npm

Problem Faced

To Reproduce
Click multiple times the Save Change button

Actual behavior
Save Succeded pop up is coming multiple times on clicking the save button

Expected behavior
If the button is clicked multiple times, save succeeded should be coming once.

Additional Information
I am working on this

Hello, I have an error when installing the casbin-dashboard like this:

$ go get github.com/casbin/casbin-dashboard

# github.com/casbin/casbin-dashboard/object
go/src/github.com/casbin/casbin-dashboard/object/adapter.go:64:36: ormManager.engine.Id undefined (type *xorm.Engine has no field or method Id, but does have ID)
go/src/github.com/casbin/casbin-dashboard/object/model.go:62:36: ormManager.engine.Id undefined (type *xorm.Engine has no field or method Id, but does have ID)

Can you help me to solve this? Thanks.

Description
As the footer in the middle of page, should be fixed.

Additional Information
I am working on this

In the anchor tag rel="noopener noreferrer" this should be used when taget="_blank".
As using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener

##Current Behaviour
If there is no data in the table , table get contracted which looks weird.

##Expected Behaviour
Table should not contract based on the data, so that it looks consistent

@hsluoyz If possible I would love to work on this

Footer is not fixed at the bottom.

Presently it looks a bit odd without any kind of styling.

The aim is to improve it by styling the navigation bar and make it look presentable.

I would like to work on this issue.

In the current version of casbin-dashboard policies table is missed

The width of Refactor Table has been fixed onceLink， but forgot to fix the width of adapterTable.
https://github.com/casbin/casbin-dashboard/blob/c81546d8ebd70ed4d6d6e91ced471b883d663a00/web/src/AdapterTable.js#L157

This warning needs to fixed

A suggestion

When we add a new model/adapter/enforcer, we hope the new row to be the first row of the table(not the last row). It may be convenient for us to add a lot of rows and divide them into many pages.

The project needs to be split into different components for reusability. Also, a better project structure in the web client codebase.

Color of the heart icon in the footer has been given white color by typo.

Screenshot

Possible Fix - changing the rgb value

Additional Information

I am working on this.

Casbin dashboard has a page for models. We want to check whether the user has written a correct Casbin model or not. If it has syntax error, we want to prompt the error line and error reason. Just like IDE showing compile errors for languages like C++ or Java.

The syntax and semantics check can be done by frontend (like codemirror) or backend (run it on a Golang casbin enforcer) or mix the above two ways.

Current behaviour

When a list of items become large, a scrollbar appears for that list item . This creates a somewhat bad UX according to me.

Also, since pagination is applied here I feel that the scrollbar for should not be there at all

@hsluoyz Please let me know if I shall take this forward :)
Working on this one

@hsluoyz Can You help with this?
ERROR DESCRIPTION
I am getting an error on doing go run main.go while running backend.

Working on this one!

In app.conf:
dataSourceName = dbname=postgres sslmode=disable

In object/orm_manager.go:

ormManager = NewOrmManager("postgres", beego.AppConfig.String("dataSourceName"))
// ...
_, err = engine.Exec("DO $do$ BEGIN IF NOT EXISTS (SELECT FROM pg_database WHERE datname = 'casbin_metadata') THEN CREATE EXTENSION IF NOT EXISTS dblink; PERFORM dblink_exec('dbname=' || current_database(), 'CREATE DATABASE casbin_metadata'); END IF; END $do$")
// ...
engine, err := xorm.NewEngine(a.driverName, "dbname=casbin_metadata sslmode=disable")
// ...
ormManager = NewOrmManager("postgres", beego.AppConfig.String("dataSourceName"))

Then I cut/paste the Model from your example site and get this in the db:

   id    |  name   | type |                                                                                                                text                                                                                                                
---------+---------+------+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 model_1 | Model 1 | ABAC | [request_definition]r = sub, dom, obj[policy_definition]p = sub, dom, obj, act[role_definition]g = _, _g2 = _, _[policy_effect]e = some(where (p.eft == allow))[matchers]m = g(r.sub, p.sub) && g2(r.obj, p.obj) && r.act == p.act

Then I click on the edit button:

Then I get the following error:

I wonder if this has something to do with newlines in the cut/paste operation of Text? So I:

casbin_metadata=# update model set text='[request_definition]
casbin_metadata'# r = sub, dom, obj
casbin_metadata'# 
casbin_metadata'# [policy_definition]
casbin_metadata'# p = sub, dom, obj, act
casbin_metadata'# 
casbin_metadata'# [role_definition]
casbin_metadata'# g = _, _
casbin_metadata'# g2 = _, _
casbin_metadata'# 
casbin_metadata'# [policy_effect]
casbin_metadata'# e = some(where (p.eft == allow))
casbin_metadata'# 
casbin_metadata'# [matchers]
casbin_metadata'# m = g(r.sub, p.sub) && g2(r.obj, p.obj) && r.act == p.act' where id='model_1';
UPDATE 1

Resulting in:

casbin_metadata=# select * from model;
   id    |  name   | type |                           text                            
---------+---------+------+-----------------------------------------------------------
 model_1 | Model 1 | ABAC | [request_definition]                                     +
         |         |      | r = sub, dom, obj                                        +
         |         |      |                                                          +
         |         |      | [policy_definition]                                      +
         |         |      | p = sub, dom, obj, act                                   +
         |         |      |                                                          +
         |         |      | [role_definition]                                        +
         |         |      | g = _, _                                                 +
         |         |      | g2 = _, _                                                +
         |         |      |                                                          +
         |         |      | [policy_effect]                                          +
         |         |      | e = some(where (p.eft == allow))                         +
         |         |      |                                                          +
         |         |      | [matchers]                                               +
         |         |      | m = g(r.sub, p.sub) && g2(r.obj, p.obj) && r.act == p.act
(1 row)

And now I can indeed press the edit button! I think there needs to be some way to represent newlines in the Text field in a better way?

If we migrate the frontend to the typescript, it will be easier to maintain in the future. A lot of errors caused by type error will be avoided. It is easy to migrate to typescript when at the beginning.

We should also add Lint tool to make the code in a better quality. For example: We should have a uniform usage of singal quote or double quote.
For example, The Pull Request #35 is not a good pull request, I think. Because it mixed the usage of " and ', it will mess up the codebase. To avoid this, I think that we should use some lint tool with strict rules.

I would like to work on it if this proposal is accepted.

Add continuous integration to the project will help for unit testing and staging builds.

Instead of using React Boilerplate Readme,
we should use write manual Readme consisting of how to setup and start the project .

Additional Information
I am working on it .

Hi, was redirected here from web-ui issue. New to go and to this project. How do I run the dashboard locally?

##Current Behaviour
Home Page Container contract if no table on home page has data

##Expected Behaviour
Home Page Container never loses its width, means it should not depend on the data

@hsluoyz if possible I would love to work on this

Actual Behaviour

Currently we need to run

go run main.go

in one terminal and

cd web
npm start

in another.

Expected Behaviour

One line code

npm run dev

to run both concurrently on the same terminal.

Wroking on it.

Please do not make PR for trivial things like making a button bigger, making a label smaller, etc.

Please understand Casbin first, a lot of PRs just work for every React/Javascript project. The committers actually have no knowledge about Casbin.

Please make concrete contributions like adding more features that are really related to Casbin and will help Casbin users better. Not just some trivial fix that works for any React/Javascript project.

Current behaviour

App is using anchor tag which makes the page reload when clicking in app link

Expected Behavior

App should use in-app routing so that page will not refresh

Addition Information

@hsluoyz please let me know, I would like to work on it

@hsluoyz Working on this :)

Currently, the footer is not fixed at bottom of the webpage.

Expected

The footer should be fixed at bottom.

The following was created by casbin-dashboard in Postgres:

casbin=# select * from casbin_rule;
 p_type |  v0   |  v1   |  v2   | v3 | v4 | v5 
--------+-------+-------+-------+----+----+----
 p      | alice | book1 | read  |    |    | 
 p      | bob   | book2 | write |    |    | 
 g      | alice | admin |       |    |    | 
(3 rows)

But when I go to pycasbin it seems to want an id column:

psycopg2.errors.UndefinedColumn: column casbin_rule.id does not exist
LINE 1: SELECT casbin_rule.id AS casbin_rule_id, casbin_rule.ptype A...

Are these projects compatible? Also hope to have casbin-server on the same database...

object/policy.go:37:9: assignment mismatch: 2 variables but xormadapter.NewAdapter returns 1 values
object/policy.go:73:9: assignment mismatch: 2 variables but xormadapter.NewAdapter returns 1 values
object/policy.go:78:12: undefined: model.NewModelFromString
object/policy.go:83:9: assignment mismatch: 2 variables but casbin.NewEnforcer returns 1 values
object/policy.go:121:11: assignment mismatch: 2 variables but e.AddPolicy returns 1 values
object/policy.go:123:11: assignment mismatch: 2 variables but e.AddGroupingPolicy returns 1 values
object/policy.go:147:9: assignment mismatch: 2 variables but e.AddPolicy returns 1 values
object/policy.go:163:9: assignment mismatch: 2 variables but e.RemovePolicy returns 1 values

Currently, we have visualized model, adapter, enforcer pages. We also need to add a test page to hold all test cases for an enforcer: https://github.com/casbin/casbin/blob/master/model_test.go

So the enforcer can tested for its correctness at any time. As an example:

A test is: (id, name, created_time, test_cases)
A test_case is: (id=TestBasicModel, test_assertions)
A test_assertion is: (request, true/false)
A request is: (sub="alice", obj="data1", act="read")

func TestBasicModel(t *testing.T) {
	e, _ := NewEnforcer("examples/basic_model.conf", "examples/basic_policy.csv")

	testEnforce(t, e, "alice", "data1", "read", true)
	testEnforce(t, e, "alice", "data1", "write", false)
	testEnforce(t, e, "alice", "data2", "read", false)
	testEnforce(t, e, "alice", "data2", "write", false)
	testEnforce(t, e, "bob", "data1", "read", false)
	testEnforce(t, e, "bob", "data1", "write", false)
	testEnforce(t, e, "bob", "data2", "read", false)
	testEnforce(t, e, "bob", "data2", "write", true)
}

• A test can be bound to one enforcer or multiple enforcers.
• An enforcer can bound to 0, 1 or multiple tests.

A user can click a button to test an enforcer against its bound tests.

It should be fixed

Additional Information
I am working on this

Currently, there are no templates for creating PRs and issues.
From GitHub docs:

This will help in better maintenance and communication especially since there will be a lot of incoming PRs.

When we want to tick a checkbox on github we simply put a 'x' between square brackets[ ]. But, when I created my first PR in this repo. It wasn't behaving as expected and the fix I got that in order to make these behave as checkboxes we need to use asterisk mark *.

Additonal Information

I am working on this.

Actual Behaviour

Form Input let add data with empty Id and name and also no boundation on the max length of name and other inputs

Expected Behaviour

Form Input should have min and max length for inputs

Additional Behaviour

@hsluoyz let me know, I would like to work on it.

We know Casbin is based on model and policy. But they are difficult for beginners to use and understand. Some terms like "User Management", "Role Management", "Permission Management" are more friendly to users.

We need to develop such pages like "User Management", "Role Management", "Permission Management" as higher-level interfaces, and map them into lower-level's Casbin's model and policy. Of course, Casbin is very powerful. I don't expect to show all Casbin's functionalities (like customizing matcher too much) in higher-level UI. But I hope most commonly used parts can be available.

There are many 3rd-party Admin portals providing such friendly high-level UI: https://casbin.org/docs/en/admin-portal You can refer to them when implementing this feature.

ES6 arrow function has a simple syntax. Also, we don't need to bind this for every function within the code if we use the arrow function instead of regular function.

Actual Behaviour

Expected Behaviour

It should be at bottom

The dashboard uses React favicon by default and it needs to be updated with casbin logo.
#31

@BetaCat0 @GopherJ can you help manage the issues and review the PRs in this repo?

@438561537
Instead compare table===undefined, need compare table===null
https://github.com/casbin/casbin-dashboard/blob/0fbe9c4bb2de5b9383e9feccaa471d8bae5c1c8e/web/src/EnforcerTable.js#L42

i am facing this issue while running development mode

Current Style:

The current layout and typegraphy cannot support the visualization of backend data, user management , modifying the wrong Casbin model and other functions.

Expected Style:

1. Change the frontend style for better interaction and the beautifying the UI.
2. Add the user management model to prevent illegal users whose behavior may disturb the system.

While the React's client-side port runs on port 3000 but in the readme, it has been mentioned that it runs on port 3030.

Additional Information:
I will make a PR for this.

On running go get github.com/casbin/casbin-dashboard, I'm getting this -

# github.com/casbin/casbin-dashboard/object
..\..\..\..\go\src\github.com\casbin\casbin-dashboard\object\adapter.go:64:36: 
ormManager.engine.Id undefined 
(type *xorm.Engine has no field or method Id, but does have ID)
..\..\..\..\go\src\github.com\casbin\casbin-dashboard\object\model.go:62:36: 
ormManager.engine.Id undefined 
(type *xorm.Engine has no field or method Id, but does have ID)