login as one line longin

code/moya-angular/src/app/app.component.html

@@ -6,11 +6,12 @@
   <div id="contentarea">
     <div id="topbar">
       <moya-top-menu></moya-top-menu>
+      <div id="loginlocale">
         <moya-login-button></moya-login-button>
         <moya-locale></moya-locale>
       </div>
+    </div>
     <div id="content">
-
       <router-outlet></router-outlet>
     </div>
   </div>

code/moya-angular/src/app/app.component.scss

@@ -29,3 +29,8 @@
   padding: 20px;
   flex-grow: 1;
 }
+
+
+#loginlocale {
+  display: flex;
+}

code/moya-angular/src/app/components/moya-locale/moya-locale.component.html

 
 
-
-
-<div id="flagBond">
+<div class="locales">
   <a (click)="selectFinnish()" [routerLink]="" tabindex="8"><img  src="assets/Flag_of_Finland.svg"  [className]="(fiSelected)? 'disabledFlag':'flag' "height="20px"  alt="Suomeksi {{ (fiSelected)? 'valittu':'' }}" /></a>
   <a (click)="selectEnglish()" [routerLink]="" tabindex="8"><img  src="assets/Flag_of_Britain.svg" [className]="(enSelected)? 'disabledFlag':'flag'" height="20px"  alt="In english {{ (enSelected)? 'selected':'' }}" /></a>
   <a (click)="selectSwedish()" [routerLink]="" tabindex="8" ><img src="assets/Flag_of_Sweden.svg" [className]="(svSelected)? 'disabledFlag':'flag'" height="20px"  alt="Svenska {{ (svSelected)? 'vald':'' }}" /></a>
-
 </div>

code/moya-angular/src/app/components/moya-locale/moya-locale.component.scss

@@ -11,7 +11,11 @@
   border: none;
 }
 
-/* http://flexboxfroggy.com/ */
-#flagBond {
+.locales {
   display: flex;
+  height: 100%;
+
+  a {
+    align-self: center;
+  }
 }

code/moya-angular/src/app/modules/login/login-button/login-button.component.html

-<button *ngIf="!loggedIn" mat-raised-button (click)="openLoginDialog()" tabindex="8">{{ "login.login" | translate}}</button>
 
-<button tabindex="8" *ngIf="loggedIn" mat-button [matMenuTriggerFor]="logoutMenu">{{currentUser.firstname}} ({{currentUser.nick}}) {{currentUser.lastname}}</button>
-<mat-menu #logoutMenu="matMenu">
-  <button mat-menu-item (click)="logout()" >{{ "login.logout" | translate}}</button>
-</mat-menu>
+<moya-login  *ngIf="!loggedIn"></moya-login>
+
+<span tabindex="8" *ngIf="loggedIn">{{currentUser.firstname}} ({{currentUser.nick}}) {{currentUser.lastname}}</span>
+<button tabindex="8" *ngIf="loggedIn" mat-button color="primary" (click)="logout()" >{{ "login.logout" | translate}}</button>

code/moya-angular/src/app/modules/login/login-component/login.component.css

+
+
 .loginarea {
   display: flex;
-  flex-direction: column;
+}
+
+
+.loginarea > mat-form-field {
+  margin-left: 10px;
 }

code/moya-angular/src/app/modules/login/login-component/login.component.html

 <form class="loginarea" #logindetails="ngForm" (ngSubmit)="login(logindetails)" >
-    <input matInput ngModel name="username"  placeholder="{{ 'user.username' | translate  }}">
+  <mat-form-field>
+    <input tabindex="8" matInput ngModel name="username"  placeholder="{{ 'user.username' | translate  }}">
+  </mat-form-field>
+  <mat-form-field>
+    <input tabindex="8" matInput type="password" ngModel name="password" placeholder="{{ 'user.password' | translate }}">
+  </mat-form-field>
 
-    <input matInput type="password" ngModel name="password" placeholder="{{ 'user.password' | translate }}">
-
-  <button type="submit" mat-button color="primary" >{{ 'login.login' | translate }}</button>
-
-  <span *ngIf="loginError" class="loginError">{{ 'login.error'|translate  }}</span>
-  <span *ngIf="loginOk" class="loginOk"> {{ 'login.ok'|translate  }}</span>
-  <span *ngIf="submitting" class="loginInProgress"> {{ 'login.submitting'|translate  }}</span>
+  <button tabindex="8" type="submit" mat-button color="primary" >{{ 'login.login' | translate }}</button>
 
 
 </form>
+
+<span *ngIf="loginError" class="loginError">{{ 'login.error'|translate  }}</span>
+<span *ngIf="loginOk" class="loginOk"> {{ 'login.ok'|translate  }}</span>
+<span *ngIf="submitting" class="loginInProgress"> {{ 'login.submitting'|translate  }}</span>