We Keep Coding

render partial view based on user permissions

My Task is to create a permission system that is not pre-defined by roles. E.g the system does not define the roles which an admin can assign to other users.
Instead the system only provides all the database tables and the admin can create their own roles on the fly be choosing tables and the grant level (CRUD) and also which fields should be visible. That would be the easy part.
The current implementation without any permissions is to fetch the data with an RESTful API and then create the DOM by javascript. Since the javascript knows what to display on the current page it can grab the properties from the data object or even fetch related data.
But now the returned fields from the API call may be different from user to user. How can i display only the data a user is granted to see?
Example:
In the image below we see the current element only showing the name and description fields. These can the current user edit. There is also a position input to define the ordering of the image but the user has no permission to change that and it is not generated.
Initial state, data fetched from API
When we click on "new image" a new row is added with javascript but now the field "position" is visible.
After clicking "new image"
The JS code does not now what fields the user can see and what not. How can i control that behavior?
Should i create a new API that will fetch the "structure" of the page based on the current users permission or should i alter the javascript code with php to output only required logic for the current user?
What should be the general approach and is there already something available in cakephp?

my current solution is to make a request to a new endpoint which gives me an empty data object but only with fields visible to the user.
button event ->
fetch api/newEmptyObject ->
render input fields
the downside is that it adds a delay from user click-event to displaying the input fields.

Save controller state on page refresh

I'm trying to implement a gmail like save message as draft functionality in my form.
Use Case: There is one form with certain fields which includes some text box, some image uploads, etc. My problem is how can I retain the values of these if these have been filled by user on a page refresh. Remember page is not yet submitted by user. If it has been submitted then I could have retrieved the values from server but how can I store values in input box now in case no submit button is clicked.
Should there be some api which will save the values regularly or can there be some api which can be invoked only when user is about to close the page or refresh it ?
I have no idea about this and would appreciate any pointers in this.
Update:
Based on the suggestions, I tried to explore some tutorials/blogs which can show the preoper design and implementation for using local storage. I found following good links:
http://yeoman.io/codelab/local-storage.html
https://domantasjovaisas.wordpress.com/2014/09/05/angularjs-saving-global-variable-in-localstorage/
Few doubts:
It seems we can store a JSON object in local storage but how can I store a given object for a given user.
Use Case: A user can create multiple messages. I just want to keep the last message which was not saved neither sent. How can I design this so that storage works fine ? For a given userId I want to keep some data in local storage. Is it safe to store a db Id in local storage ?
Please suggest

I suggest using a library that abstracts over localStorage and defers to cookies if you are looking to support older browsers. Use JSON.stringify and pass it to your storage service. You can also append usernames to the key if you are likely to have multiple users on one machine. It would be good practice anyways.
Examples include:
https://github.com/grevory/angular-local-storage
http://ngmodules.org/modules/ngStorage
You can hook into ng-change, watches, event listeners or use a timer as someone else suggested.
UPDATE: You can find a trivial implementation here, http://scionsoftware.com/Blog/saving-form-state-with-angular-js/
If you're looking to do it for only one string value as you implied, simply remove the JSON.parse and JSON.stringify pieces from the javascript.

mimic user sign in using only javascript, HTML, and CSS

so I am learning how to prototype website right now, and one of the requirement is to design and implement a paper prototype into an actual prototype on the web using ONLY javascript, HTML, and CSS.
I am wondering if there is a way for me to mimic the user log in function without using any databases. I'm thinking of maybe creating a method in the lines of
in javascript:
var username = Bob123
var password = BobHasNoPassword
and when I type that into the HTML form, it will redirect to another page.

I suggest you use the HTML5 localStorage to store the username and the password. localStorage serves as a Storage API on your browser.Almost like a Database. When the user enters a username, you match it with the localStorage data using the getItem method to validate. You can even store multiple users by using multiple uniques key to store them. It can also serve for your session state and so on.
// Store values e.g register user
localStorage.setItem("username", "Smith");
localStorage.setItem("password", "p#55word");
// Retrieve user password/username
var username = localStorage.getItem("username");
var username = localStorage.getItem("password");

Yes, if this is just for prototyping only, I would have a username and password stored in variables. When the login is submitted, check against those variables and redirect to proper prototype page if matching. I assume you will give the credentials to show how it works and let them try to use with and without right credentials. Just add conditional that will direct to correct page if variables match or direct to another page if they don't.

localStorage sign up users how to redirect without losing data

I have a problem with a sign up form. Every time a user creates an account I use localStorage to save the form values. But if after the submit button the user redirects to another page it saves only the last user data who signed up. If after sign up I dont redirect the user to another page I can have more than one users. What can I do to save more users (using localStorage)
the code is:
var passwords=[];
var people= [];
function submitSignUp(){
var usr = signupform.elements["username"].value;
var pass = signupform.elements["password"].value;
people.push(usr);
passwords.push(pass);
localStorage.setItem( 'peoplenames', JSON.stringify(people));
localStorage.setItem('urpasswords',JSON.stringify(passwords));
window.location.href="accountCreated.html";
}
also I use a input type button and not submit because I have the same problem with the submit input. What can I do? Thanks.

Demo
So here is the jsfiddle that should work for you.
some key things are the following.
if(localStorage.getItem('users') != null){
users = JSON.parse(localStorage.getItem('users'));
}
this code checks if the users string has been set for the current page. If users has not been set on local storage is skips this step entirely.
as for processing information from page to page, you will need to do 1 of 3 things.
Send all your calls via ajax. JQuery Get would allow you to stay on the current page while loading content from other pages. You would use the get or post like an IFrame
Navigate through your site using only get methods. Javascript wasn't meant for this, and this doesn't give you much control over the initial state of a webpage.
If you don't want to use Javascript for the rest of your life, or have personal information that shouldn't be held on a local machine. IE: passwords. Use a Server Scripting Language.
In the end it is up to you to decide what to do, but my recommendation would be to use Server Scripting Language and some sort of Database. These are web standards and are marketable skills.

How should I keep track of which entry to update in the database for my web app?

I'm trying to create a TODO list web app for self-learning purpose. I use JavaScript and PHP.
On client side, my app uses a global variable list_id to store the ID of a list that is currently being viewed by user. This ID is the same as the ID stored in the database. So when something is updated on the list by user, it sends list_id over to PHP and updates the corresponding entry in the database.
But I noticed that this approach is seriously insecure. Namely, attackers can just update the value of list_id in the console of their web browser and they can make modifications to any lists in the database just by changing the value of list_id.
How should I prevent this while also keeping track of which list to update in the database?
I suppose I could declare a variable as final/const, but I don't think there is a cross-browser way to do this in JavaScript. Maybe the slightly better way is to declare the ID as a private variable inside a class and make sure that there are no methods that update the variable. What would be the most secure way?

if you use login system, you should check if user session id == owner id of entry and only then allow to edit it.