standalone registration form

montoyam

SInce my project is using datatables I figure it would be nice to use standalone editor to create the registration form. But all the examples I find here are all about editing an existing record.

Is it possible to have a blank editor form come up and on click of Submit it gets saved. I'm guessing it would leave the data on the page, disable/remove the submit button and add some kind of 'submit successful' message. But, the question is, can you start with a blank form with a submit? If so, can someone post a sample of what they have done?

montoyam

so i read in the standalone page of the manual that the Registration page of this website uses standalone editor. I tried viewing the page source but that didn't give any clues

rf1234

@allan, @colin, @kthorngren can you guys help with this?
I'd be interested in that, too. I was never able to get standalone Editor running for my use cases. My "trick" was to have a hidden "pseudo" data table as well with just one column ...

allan

Hi,

You are absolutely right - our login uses Editor in standalone mode (there are actually to ways to login to the site - directly in the forum, or through the Editor form - for the later, logout and then click the Login / Register link at the top of the page.

You would setup Editor as normal (just without a table option of course to make it standalone), and then when you want to show the login form, use create() - that will send a create action to the server. You would then need to read the data Editor sends to the server and perform whatever action is required there (setting session variables?). Finally on the client-side use submitComplete to do a page reload or redirect.

Regards,
Allan

montoyam

With your advice above I was able to get the form to display, but it was in typical Editor 'popup' form. How do I get the form to present like a typical registration form?

allan

You would need to do something like this.

I'm not actually clear on why you are using Editor for this if you don't want to use its styling? Not to talk our product down, but it wasn't designed for this sort of use and it would be far more efficient to have a simple HTML form for logins.

Allan

montoyam

thank you for that link. that is awesome seeing them side by side...not sure I would ever need it like that, but cool to see options. I will look at it deeper and see if I can get it to work for my registration needs. But, I am confused by your statement (here and in my other open question about standalone with select options). The manual and examples talk about standalone being possible but it sounds like from your answers in both my questions that you don't recommend it?

I didn't think about what you said about using the styling. I forgot that your login page truly is a popup screen, on click of login...for some reason my mind missed that and thought it was not.... I guess I just didn't want to deal with creating my own controllers to do the adding of a record, I was being lazy and wanting to use datatables libraries to talk to the database.

But, because of your answers here and on my other question posted, I may need to drop the idea of the standalone

allan

Editor's standalone mode does have its place - but it is not the primary use mode for Editor and it is not something that the server-side libraries attempt to allow for at all. Standalone editing can be used with the server-side libraries as a collection editor - but that is a relatively rare use case.

The only reason to use Editor for a login screen to be to maintain consistent styling - and you would certainly need to handle the server-side code for the data submitted. It can be useful as shown in our use of it - but generally speaking I would not suggest it for a login form over a plain HTML one.

Allan

rf1234

@allan, maybe one suggestion for improvement. If Editor stand alone was able to load options that would be very helpful. I have about half a dozen use cases for Editor standalone but I always need a pseudo-datatable because I need to load options from the database.
Could you consider this enhancement please.
Roland

montoyam

i actually ended up using the collection editor as well in this project, building almost like a "week view" calendar. It came out pretty niffy.

On this registration from, I just went ahead and created a nice little bootstrap form. However, since I have another page where Admins can view users that have registered, I was wondering can the registration submit ajax use the same controller the admins use? To be honest, I am not clear how controllers work in MVC.

So in the Admin page, they can create/edit users with this controller and regular dataTable and editor:

    public class UsersController : ApiController
    {
        
        [Route("api/Users")]
        [HttpGet]
        [HttpPost]
        public IHttpActionResult Users()
        {
            var request = HttpContext.Current.Request;
            var settings = Properties.Settings.Default;

            using (var db = new Database(settings.DbType, settings.DbConnection))
            {

                var response = new Editor(db, "Users", "WindowsLogin")
                    .Model<UsersModel>("Users")
                    .Field(new Field("Users.RecordAdded")
                        .Set(false)
                    )
                    .Field(new Field("Users.UserDepartmentID")
                        .Validator(Validation.NotEmpty())
                        .Validator(Validation.Numeric())
                        .Options(new Options()
                                    .Table("Departments")
                                    .Value("DepartmentID")
                                    .Label("DepartmentName")
                        )
                    )
                    .Field(new Field("Departments.DepartmentName"))
                    .Field(new Field("Users.IsApproved")
                        .Validator(Validation.NotEmpty())
                        .Validator(Validation.Numeric())
                        .Options(() => new List<Dictionary<string, object>>{
                            new Dictionary<string, object>{ {"value", "0"}, {"label", "No"} },
                            new Dictionary<string, object>{ {"value", "1"}, {"label", "Yes"} },
                        })
                    )
                    .Field(new Field("Users.IsAdmin")
                        .Validator(Validation.NotEmpty())
                        .Validator(Validation.Numeric())
                        .Options(() => new List<Dictionary<string, object>>{
                            new Dictionary<string, object>{ {"value", "0"}, {"label", "No"} },
                            new Dictionary<string, object>{ {"value", "1"}, {"label", "Yes"} },
                        })
                    )
                    .LeftJoin("Departments", "Departments.DepartmentID", "=", "Users.UserDepartmentID")
                    .Process(request)
                    .Data();
                return Json(response);
            }
        }
    }

For the registration form I tried this:

        $("#submit").on('click', function (e) {
            var data = $("#registerForm").serialize();
            console.log(data);
            $.ajax({
                url: 'api/Users',
                type: "POST",
                data: data,
                success: function (response) {
                    alert("done");
                }
            })

        });

but the record doesn't get added. console.log(data) returns this:

Users.WindowsLogin=montoyam&Users.UserFirstName=Michael&Users.UserLastName=Montoya&Users.UserEmail=test&Users.UserDepartmentID=1

montoyam

@allan , I have decided to go ahead and use a login/register form like you use here at datatables.net. However, How do you have 'extra' fields in your editor form that are not part of the, in my case, controller, such as the field to retype the password? would it be possible to share your registration page code?

allan

Here is part of it (our server runs PHP, but hopefully you'll be able to see the structure):

$out = [];
$data = $_GET['data'];

if ( $data['action'] === 'login-register' ) {
    if ( ! $data['signin-username'] && ! $data['register-email'] ) {
        form_error( 'Sign-in or registration information is required' );// exit's
    }
    else if ( $data['signin-username'] ) {
        // Sign user in
        if ( ! $data['signin-password'] ) {
            field_error(
                'signin-password',
                'A password is required for log-in'
            );
        }

        $user = ...

        if ( ! $user ) {
            field_error(
                'signin-username',
                'Log-in details not recognised. Please try again or clear these fields and create a new account below.'
            );
        }
        else {
            if ( $_SESSION['product'] === 'register' ) {
                $out['nextAction'] = 'ready';
            }
            else {
                $username = userFromId( $user );
                $out['nextAction'] = 'details';
            }
        }
    }
}

I've actually used legacyAjax for this form - which is why there isn't a 2D data array. That's for legacy reasons though - this form was written before multi-row editing was added to Editor - I wouldn't suggest using it if you don't need do.

How do you have 'extra' fields in your editor form that are not part of the, in my case, controller, such as the field to retype the password?

Define the fields on the client-side as you need them. They don't need to be defined in the controller. e.g. I use:

        editor.add( [ {
                label: "Already registered? Sign-in:",
                name:  "signin",
                type:  'title'
            }, {
                label: "Email or Username:",
                name:  "signin-username"
            }, {
                label: "Password:",
                name:  "signin-password",
                type:  "password",
                fieldInfo: "<a href='#' class='register-forgot'>Forgot?</a>"
            }, {
                label: "Or create a DataTables account:",
                name:  "create",
                type:  'title'
            }, {
                label: "Username:",
                name:  "register-username",
                fieldInfo: "Publicly visible name"
            }, {
                label: "E-mail address:",
                name:  "register-email"
            }, {
                label: "Password:",
                name:  "register-password1",
                type:  "password",
                fieldInfo: "Password should contain at least 6 characters"
            }, {
                label: "Confirm password:",
                name:  "register-password2",
                type:  "password"
            }, {
                name:  "action",
                type:  "hidden",
                def:   "login-register"
            }
        ] );

And on the server-side it is just:

        if ( $data['register-password1'] !== $data['register-password2'] ) {
            field_error( 'register-password2', 'Passwords do not match' );
        }

Allan

montoyam

ahh, so you use Editor.Add then probably use a template to put them in the order that you need. Very cool.

montoyam

I'm thinking I can add labels with the Template (havn't gotten there yet), but I thought I would mention that I get an error when I try and use your JS code:
'''
Error adding field - unknown field type title
'''

this was (in your example above) Editor Fields that use type: 'title'

montoyam

and part of my problem is learning how to get the form data over to the controller. all the examples online use Entity Framework or other methods that I'm thinking are different than DataTables Editor uses.

Do you have an sample controllers that reference editor form data?

allan

The fact that add() is used shouldn't make any difference. I do that so I can reuse the form instance there.

I saw your e-mail on this topic and will reply to that shortly.

Regards,
Allan

montoyam

I went ahead and created a 'non-dataTables' register/login form. But when this project is delivered I plan on going back and trying out these 'alias' fields. I'm sure you guys have provided more than enough assistance and code for me to understand it.

thanks you so much for your time on this.