Login page error


#1

I added the login page template from nativescript sidekick

but everytime I click the login button it gives this error (note that i didnt replace any code)

An uncaught Exception occurred on “main” thread.
com.tns.NativeScriptException:
Calling js method onClick failed

TypeError: Cannot read property ‘signIn’ of undefined
File: "file:///data/data/org.nativescript.SITEMobile/files/app/logins/logins-page.js, line: 23, column: 19

StackTrace:
Frame: function:‘onSigninButtonTap’, file:‘file:///data/data/org.nativescript.SITEMobile/files/app/logins/logins-page.js’, line: 23, column: 20
Frame: function:‘Observable.notify’, file:‘file:///data/data/org.nativescript.SITEMobile/files/app/tns_modules/tns-core-modules/data/observable/observable.js’, line: 110, column: 23
Frame: function:‘Observable._emit’, file:‘file:///data/data/org.nativescript.SITEMobile/files/app/tns_modules/tns-core-modules/data/observable/observable.js’, line: 127, column: 18
Frame: function:‘ClickListenerImpl.onClick’, file:‘file:///data/data/org.nativescript.SITEMobile/files/app/tns_modules/tns-core-modules/ui/button/button.js’, line: 26, column: 23

at com.tns.Runtime.callJSMethodNative(Native Method)
at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1101)
at com.tns.Runtime.callJSMethodImpl(Runtime.java:983)
at com.tns.Runtime.callJSMethod(Runtime.java:970)
at com.tns.Runtime.callJSMethod(Runtime.java:954)
at com.tns.Runtime.callJSMethod(Runtime.java:946)
at com.tns.gen.java.lang.Object_button_19_32_ClickListenerImpl.onClick(Object_button_19_32_ClickListenerImpl.java:17)
at android.view.View.performClick(View.java:5198)
at android.view.View$PerformClick.run(View.java:21147)
at android.os.Handler.handleCallback(Handler.java:739)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:148)
at android.app.ActivityThread.main(ActivityThread.java:5417)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)


#2

Can you show us some code?


#3

logins-page.js

const LoginsViewModel = require("./logins-view-model");

/* ***********************************************************
* Use the "onNavigatingTo" handler to initialize the page binding context.
*************************************************************/
function onNavigatingTo(args) {
    const page = args.object;
    page.bindingContext = new LoginsViewModel();
}

function onLoginWithSocialProviderButtonTap() {
    /* ***********************************************************
    * For log in with social provider you can add your custom logic or
    * use NativeScript plugin for log in with Facebook
    * http://market.nativescript.org/plugins/nativescript-facebook
    *************************************************************/
}

function onSigninButtonTap(args) {
    const button = args.object;
    const bindingContext = button.bindingContext;

    bindingContext.signIn();
}

function onForgotPasswordTap() {
    /* ***********************************************************
    * Call your Forgot Password logic here.
    *************************************************************/
}

exports.onNavigatingTo = onNavigatingTo;
exports.onLoginWithSocialProviderButtonTap = onLoginWithSocialProviderButtonTap;
exports.onSigninButtonTap = onSigninButtonTap;
exports.onForgotPasswordTap = onForgotPasswordTap;

logins-page.xml

<Page navigatingTo="onNavigatingTo" class="page" xmlns="http://schemas.nativescript.org/tns.xsd">
    <ActionBar class="action-bar">
        <Label class="action-bar-title" text="Login"></Label>
    </ActionBar>

    <ScrollView>
        <StackLayout class="p-t-15">
            <Button class="btn btn-outline" tap="onLoginWithSocialProviderButtonTap" text="Log in with Social Provider"></Button>

            <Label class="m-t-10 text-center" text="or"></Label>

            <TextField class="m-t-10 m-b-10 m-l-15 m-r-15" hint="Email" keyboardType="email" autocorrect="false" autocapitalization="none"
                text="{{ email }}"></TextField>
            <TextField class="m-t-10 m-b-10 m-l-15 m-r-15" hint="Password" secure="true" autocorrect="false" autocapitalization="none"
                text="{{ password }}"></TextField>

            <Button class="btn btn-primary" text="SIGN IN" tap="onSigninButtonTap"></Button>
            <Label class="m-t-10 m-b-10 m-l-15 m-r-15" text="Forgot password?" tap="onForgotPasswordTap"></Label>
        </StackLayout>
    </ScrollView>
</Page>

logins-view-model.js

const observableModule = require("data/observable");

function LoginsViewModel() {
    const viewModel = observableModule.fromObject({
        email: "",
        password: "",

        signIn: function () {
            const email = this.email;
            const password = this.password;

            /* ***********************************************************
            * Call your custom signin logic using the email and password data.
            *************************************************************/
        }
    });

    return viewModel;
}

module.exports = LoginsViewModel;

#4

signIn must be defined as

viewModel.signIn = function() {
...
};

#5

still doesnt work. how come it works perfectly before but now creates an error?
i havent even changed the code when compiled


#6

If you can reproduce the issue with Playground, I may take a look.


#7

now i get it.

the code below lets me navigate but creates an error everytime i click a button
application.run({moduleName: "login/login-page"});

I added app-login.xml and placed login/login-page as the frame and change the code above to
application.run({moduleName: "app-login"});

I don’t know what specifically caused the error but it solved my problem


#8

With app-login you are creating a frame and the frame is what enable navigation in app. When you placed login-page directly it was root of your app, no frame so no navigation.