Login page in Oracle jet

Question

Hi I am creating an application using Oracle JET in which after I click the Login button in the LoginTest page, it should take me to the Homepage after validation. I have managed to validate the input but I couldn't route it to the Homepage. I have tried using multiple binding but it is of no use. Could someone please help.

HTML CODE

h1>logintest</h1>
<div align="center">
<label for="username">Username</label>
<input id="username" type="text" required 
       data-bind="ojComponent: {component: 'ojInputText',
                                validators: [{type: 'regExp', options: {pattern: '[a-zA-Z0-9]{3,}',
                                messageDetail: 'You must enter at least 3 letters or numbers'}}],
                            invalidComponentTracker: tracker}" /><br /><br />
<label for="password">Password</label>
<input id="password" type="password" required
       data-bind="ojComponent: {component: 'ojInputPassword',
                                validators: [{type: 'regExp', options : {pattern: '(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{6,}',
                                messageSummary : '{label} too Weak',
                                messageDetail: 'The password must contain atleast one uppercase, one lowercase, one number and must be 6 digits long'}}],
                                invalidComponentTracker: tracker}" /><br /><br />
<a class="oj-button-primary oj-button-xl" 
   href="http://localhost:8383/Test/index.html?root=home" id="create" type="button" 
   data-bind="ojComponent: {component: 'ojButton', 
                            label: 'Login',
                            disabled: shouldDisableCreate()},
        click: onClick"></a>
</div>

JAVASCRIPT CODE

define(['ojs/ojcore', 'knockout', 'ojs/ojinputtext', 'ojs/ojbutton', 'ojs/ojknockout-validation', 'ojs/ojmodel'
], function (oj, ko) {
    /**
     * The view model for the main content view template
     */
    function logintestContentViewModel() {
        var self = this;
        self.tracker = ko.observable();
        self.username = ko.observable("");
        self.password = ko.observable("");
        self.clickedButton = ko.observable();
        self.buttonClick = function(data, event)
        {
            var trackerObj = ko.utils.unwrapObservable(self.tracker);
            if (!this._showComponentValidationErrors(trackerObj))
            {
                return;
            }

        };
        self.routePage = function(data,event)
        {
            self.clickedButton(event.currentTarget.id);
            return true;  
        };
        self.onClick = function()
        {
            self.buttonClick();
            self.routePage();
        }
        self.shouldDisableCreate = function()
        {
          var trackerObj = ko.utils.unwrapObservable(self.tracker),
          hasInvalidComponents = trackerObj ? trackerObj["invalidShown"] : false;
          return  hasInvalidComponents;
        };
        self._showComponentValidationErrors = function (trackerObj)
        {
            trackerObj.showMessages();
            if (trackerObj.focusOnFirstInvalid())
            return false;
        };

    }
    return logintestContentViewModel;
});

Answer 1

If you are using ojRouter, then you can simply use

oj.Router.go("route name");

If you're not using ojRouter, then you can use the location object. Something like:

window.location.pathname='/homepage'

I recommend using ojRouter and it's canEnter() method for things like this.

Router cookbook demo: http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=router&demo=simple

JSDocs for Router canEnter method http://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.RouterState.html