Jhipster - issue with custom authentication view

Question

I am trying to modify the Jhipster template by doing the following: If the user is not authenticated , the authentication form is showing (instead of showing a link to the authentication page as it is set by default). I m showing it in the main.html view

<div class="row">
            <div class="col-md-4">
                <span class="hipster img-responsive img-rounded"></span>
            </div>
            <div class="col-md-8">
                <h1 translate="main.title">Welcome, Java Hipster!</h1>
                <p class="lead" translate="main.subtitle">This is your homepage</p>
                <div ng-switch="authenticated">
                    <div class="alert alert-success" ng-switch-when="true"
                         translate="main.logged.message" translate-values="{username: '{{account.login}}'}">
                        You are logged in as user "Admin".
                    </div>
                    <div ng-switch-when="false">
                        <div class="row">
                        <div class="col-md-4">
                            <h1 translate="login.title">Authentication</h1>

                            <div class="alert alert-danger" ng-show="authenticationError" translate="login.messages.error.authentication">
                                <strong>Authentication failed!</strong> Please check your credentials and try again.
                            </div>
                            <form class="form" role="form" ng-submit="login()">
                                <div class="form-group">
                                    <label for="username" translate="global.form.username">Login</label>
                                    <input type="text" class="form-control" id="username" placeholder="{{'global.form.username.placeholder' | translate}}" ng-model="username">
                                </div>
                                <div class="form-group">
                                    <label for="password" translate="login.form.password">Password</label>
                                    <input type="password" class="form-control" id="password" placeholder="{{'login.form.password.placeholder' | translate}}"
                                           ng-model="password">
                                </div>
                                <div class="form-group">
                                    <label for="rememberMe">
                                        {{"login.form.rememberme" | translate}}
                                        <input type="checkbox" class="checkbox inline_class" id="rememberMe"
                                               ng-model="rememberMe" checked>
                                    </label>
                                </div>
                                <button type="submit" class="btn btn-primary" translate="login.form.button">Authenticate</button>
                            </form>
                            <p></p>
                            <div class="alert alert-warning" translate="global.messages.info.register">
                                You don't have an account yet? <a href=\"#/register\">Register a new account</a>
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
    </div>

and modified apps.js :

.otherwise({
              templateUrl: 'views/main.html',
              controller: 'LoginController',
                 access: {
                    authorizedRoles: [USER_ROLES.all]
                 }
            });

It works if I m not using the ng-switch-when="false" statement. If I m using this statement, the value of $scope.password and $scope.login are "undefined" in the LoginController. Of course this statement is mandatory if I want to show the authentication form only if the user is not authenticated.

I can't understand why. If you can help me on this, it would be great. Thanks.

score 2 · Answer 1 · edited May 23 '17 at 12:30

It's a common gotcha with ng-switch and other directives that create sub-scopes. This should work:

<div class="row">
        <div class="col-md-4">
            <span class="hipster img-responsive img-rounded"></span>
        </div>
        <div class="col-md-8">
            <h1 translate="main.title">Welcome, Java Hipster!</h1>
            <p class="lead" translate="main.subtitle">This is your homepage</p>
            <div ng-switch="authenticated">
                <div class="alert alert-success" ng-switch-when="true"
                     translate="main.logged.message" translate-values="{username: '{{account.login}}'}">
                    You are logged in as user "Admin".
                </div>
                <div ng-switch-when="false">
                    <div class="row">
                    <div class="col-md-4">
                        <h1 translate="login.title">Authentication</h1>

                        <div class="alert alert-danger" ng-show="authenticationError" translate="login.messages.error.authentication">
                            <strong>Authentication failed!</strong> Please check your credentials and try again.
                        </div>
                        <form class="form" role="form" ng-submit="login()">
                            <div class="form-group">
                                <label for="username" translate="global.form.username">Login</label>
                                <input type="text" class="form-control" id="username" placeholder="{{'global.form.username.placeholder' | translate}}" ng-model="$parent.username">
                            </div>
                            <div class="form-group">
                                <label for="password" translate="login.form.password">Password</label>
                                <input type="password" class="form-control" id="password" placeholder="{{'login.form.password.placeholder' | translate}}"
                                       ng-model="$parent.password">
                            </div>
                            <div class="form-group">
                                <label for="rememberMe">
                                    {{"login.form.rememberme" | translate}}
                                    <input type="checkbox" class="checkbox inline_class" id="rememberMe"
                                           ng-model="$parent.rememberMe" checked>
                                </label>
                            </div>
                            <button type="submit" class="btn btn-primary" translate="login.form.button">Authenticate</button>
                        </form>
                        <p></p>
                        <div class="alert alert-warning" translate="global.messages.info.register">
                            You don't have an account yet? <a href=\"#/register\">Register a new account</a>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>

Instead of $parent you may bind values to an object, but then you will need to modify Jhipster's LoginController accordingly (and also make sure to update login.html or create a variant of the controller for the main screen only)

Thanks, I managed to make it work also by adding "ng-controller=LoginController" in my
inside the — user1260928, Jan 03 '15 at 11:11

Jhipster - issue with custom authentication view

1 Answers1