Base solution for your next web application
Open Closed

Adding a user session timeout utility to Angular app #4632

User avatar
0
joe704la created

I would like to add this utility to the Angular app but having a hard time with it. <a class="postlink" href="http://keenthemes.com/metronic/preview/?page=components/utils/session-timeout&demo=default">http://keenthemes.com/metronic/preview/ ... mo=default</a>

I wanted to add this to the header.component.ts file

sessionTimeout() : void{
        $.sessionTimeout({
            title: 'Session Timeout Notification',
            message: 'Your session is about to expire.',
            keepAliveUrl: AppConsts.remoteServiceBaseUrl + 'KeepAlive',
            logoutUrl: this.logout(),
            warnAfter: 3000, //warn after 5 seconds
            redirAfter: 35000, //redirect after 10 secons,
            ignoreUserActivity: true,
            countdownMessage: 'Redirecting in {timer} seconds.',
            countdownBar: true
        });
    };

I also tried something like this private _$sessionTimeout: JQuery;

sessionTimeout() : void{
        this._$sessionTimeout.sessionTimeout({
            title: 'Session Timeout Notification',
            message: 'Your session is about to expire.',
            keepAliveUrl: AppConsts.remoteServiceBaseUrl + 'KeepAlive',
            logoutUrl: this.logout(),
            warnAfter: 3000, //warn after 5 seconds
            redirAfter: 35000, //redirect after 10 secons,
            ignoreUserActivity: true,
            countdownMessage: 'Redirecting in {timer} seconds.',
            countdownBar: true
        });
    };

I also added this "./assets/metronic/src/vendors/bootstrap-session-timeout/dist/bootstrap-session-timeout.js" to the .angular-cli.json file but the $.sessionTimeout() function cannot be found in the header.component.ts file.

This is the error I am getting. ERROR TypeError: Cannot read property 'sessionTimeout' of undefined at HeaderComponent.sessionTimeout (header.component.ts:304) at HeaderComponent.ngOnInit (header.component.ts:122) at checkAndUpdateDirectiveInline (core.js:12400) at checkAndUpdateNodeInline (core.js:13927) at checkAndUpdateNode (core.js:13870) at debugCheckAndUpdateNode (core.js:14763) at debugCheckDirectivesFn (core.js:14704) at Object.eval [as updateDirectives] (AppComponent.html:3) at Object.debugUpdateDirectives [as updateDirectives] (core.js:14689) at checkAndUpdateView (core.js:13836)

Can anyone help me with what I am doing wrong?

Go to accepted answer
4 Answer(s)
  • User Avatar
    0
    alper created
    Support Team

    did you add it in typings.d.ts? if not you need to add

    you can read the related doc <a class="postlink" href="https://aspnetzero.com/Documents/Developing-Step-By-Step-Angular">https://aspnetzero.com/Documents/Develo ... ep-Angular</a>

    this is the repo of the session timeout library <a class="postlink" href="https://github.com/orangehill/bootstrap-session-timeout">https://github.com/orangehill/bootstrap-session-timeout</a>

  • User Avatar
    0
    joe704la created

    Yes I did, I tried it two different ways since I am not 100% sure how the typings.d.ts actually works.

    I tried it this way.

    interface JQuery {
    sessionTimeout(...any): any;
}

    and this way...

    declare var sessionTimeout: any; //related to session timeout

    But still the same error.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Can you try this ?

    interface JQuery {
    sessionTimeout(...args: any[]): any;
}
  • User Avatar
    0
    joe704la created

    Unfortunately that didn't work either.

    I think I might try something like this since it was made for Angular <a class="postlink" href="https://www.npmjs.com/package/@ng-idle/core">https://www.npmjs.com/package/@ng-idle/core</a>

Assignee
No one
Labels
Non yet