Jhipster - issue with custom authentication view - angularjs

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? Register a new account
</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.

Answer 1

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? Register a new account
</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)