Alright, so I'm pretty new to web development but I've gotten the hang of js/html/css and I'm working on a game/website. I am basically done with my work but I'm not sure about what I should do now
What I want to do is use the same admin interface I have with some restrictions to the user/player. For example, imagine an "admin" can add stuff to the website and move them around and such, while a player can only see and use them, while not being able to edit them or add new items to the view.
Also, I am using the same interface for many html pages and this is why I feel like I have to ask this.
Should I clone the current classes and remove some the not needed stuff or should I just hide items with css and html?
PS: The website is pretty big, there's a lot of classes which is why I'm hesitant.
I don't know if I should provide any code but an example of my question is :
Cloning classes - class "viewer" for admin and class "restrictedViewer" for player
Hiding items - just use "display: none" <-- This doesn't work on some items as they are only shown when some interactions happen, and I want said interactions to be available to player
It is really easy to overwrite some classes in the developers' tool, to access the admin functionality without having the proper rights. If security is of any concern to you, you should most definitely not hide the admin panels with a simple "display: none".
The way I would do it is to have a specific admin page, that can only be accessed if you have the correct credentials. However, that requires you to have a proper authorization system.
I understand that this solution is not really useful if you just want some extra buttons for admins. To prevent users from clicking something they shouldn't (because they messed about in the dev tools), you should also find a way to check the credentials upon clicking the button. In that case, even if the user somehow is able to display the button and clicks it, they can't really use it.
Another option is to have the buttons be generated by JS, and in that piece of code check the credentials to generate the buttons to match the user's role. This is a bit more tricky to "hack", as you cannot simply toggle a class or CSS property in the dev tool. Of course, you should still check the credentials in the button's handler anyway.
Just remember that hiding certain HTML elements is not a good way to secure them. You need to verify the user credentials on every step, including the handling.