early login component

code/moya-angular/README.md

 
 
 
 
 
 
-# devausnoteja (tmp ohjeet)
+# devausnoteja 
 
 
 ## Devaus
 ## Devaus
 
 
@@ -12,12 +12,13 @@ Kehittäminen on nopeampaa jos saa muutokset suoraan käyttöön, tämän takia
 
 
 ng-palvelimessa on bugi, ja se ei osaa jakaa tavaraa muusta hakemistosta kuin /.
 ng-palvelimessa on bugi, ja se ei osaa jakaa tavaraa muusta hakemistosta kuin /.
 
 
-moyaproxy.conf.json sisältää proxyasetukset localhostin porttiin 8080. 
+  * `moyaproxy.conf.json` sisältää proxyasetukset localhostin porttiin 8080. 
+  * `test-moya-proxy.conf.json` sisältää proxyasetukset ng.test.moya.fi:n
 
 
 Käyttö:
 Käyttö:
 `npm run start`
 `npm run start`
 
 
-Tämän jälkeen kirjaa selaimesi sisään moyaan: http://localhost:4200/MoyaWeb/ ja surffata softaan: http://localhost:4200/
+Tämän jälkeen surffaa selaimellasi sisään moyaan: `http://localhost:4200/MoyaWeb/`
 
 
 ### HMR
 ### HMR
 
 
@@ -26,18 +27,15 @@ HMR -asetukset löytyy, niistä ei nykyisellään ole mitään hyötyä. Saa poi
 
 
 ## Koodijuttuja
 ## Koodijuttuja
 
 
-### moya-rest
-Oma moduulinsa, joka tullaan jossain vaiheessa eriyttämään ja käyttämään myös mahdollisessa nativescript-kännyappiksessa. Eli sen alle tulee vain servisejä, ei komponentteja.
-
 ### Muuta
 ### Muuta
 Jos tulee muita järkeviä kokonaisuuksia, joita voi käyttää muualla, jaa omaan moduuliinsa.
 Jos tulee muita järkeviä kokonaisuuksia, joita voi käyttää muualla, jaa omaan moduuliinsa.
 
 
-## WIP: Hakemistohierarkia
+## Hakemistohierarkia
 
 
 
 
 
 
 * app
 * app
- * modules
+ * modules `as`
    * viplist
    * viplist
      * viplist-manager.module
      * viplist-manager.module
      * viplist-manager
      * viplist-manager

code/moya-angular/src/app/app.module.ts

@@ -35,6 +35,7 @@ import {createApollo} from './shared/config/moya.config';
     LoginModule,
     LoginModule,
     LeftMenuModule,
     LeftMenuModule,
 
 
+
     ApolloModule,
     ApolloModule,
     HttpLinkModule,
     HttpLinkModule,
 
 

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

+.loginarea {
+  display: flex;
+  flex-direction: column;
+}

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

-<div>Login works!</div>
+<div class="loginarea">
\ No newline at end of file
+  <mat-form-field>
+    <input matInput [(ngModel)]="username"  placeholder="{{ 'user.username' | translate  }}">
+  </mat-form-field>
+  <mat-form-field>
+    <input matInput type="password" [(ngModel)]="password" placeholder="{{ 'user.password' | translate }}">
+  </mat-form-field>
+
+  <button mat-button (click)="login()"  >{{ 'login.login' | translate }}</button>
+
+  <span *ngIf="loginError">ERROR</span>
+  <span *ngIf="loginOk">OK</span>
+
+
+</div>

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

 import { Component, OnInit } from '@angular/core';
 import { Component, OnInit } from '@angular/core';
+import {TranslatePipe} from '@ngx-translate/core';
+import {SessionServiceService} from '../../shared/services/session-service.service';
+
+
 
 
 @Component({
 @Component({
   selector: 'moya-login',
   selector: 'moya-login',
   templateUrl: './login.component.html',
   templateUrl: './login.component.html',
-  styleUrls: ['./login.component.css']
+  styleUrls: ['./login.component.css'],
+  providers: [TranslatePipe]
 })
 })
 export class LoginComponent implements OnInit {
 export class LoginComponent implements OnInit {
 
 
-  constructor() { }
+  username: string = "";
+  password: string = "";
+
+  loginError = false;
+  loginOk = false;
+
+  constructor(private sessionService: SessionServiceService) { }
 
 
   ngOnInit() {
   ngOnInit() {
   }
   }
 
 
+  login() {
+    this.sessionService.doLogin(this.username, this.password).subscribe((x) => {
+      this.loginError = false;
+      this.loginOk = true;
+    }, (error) => {
+      this.loginError = true;
+    });
+  }
+
 }
 }

code/moya-angular/src/app/modules/login/login.module.ts

@@ -2,12 +2,26 @@ import { LoginRoutingModule } from './login-routing.module';
 import { NgModule } from '@angular/core';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CommonModule } from '@angular/common';
 import {LoginComponent} from './login.component';
 import {LoginComponent} from './login.component';
+import {MatButtonModule, MatFormFieldModule, MatInputModule} from '@angular/material';
+import {TranslateModule} from '@ngx-translate/core';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {FormsModule} from "@angular/forms";
 
 
 @NgModule({
 @NgModule({
   imports: [
   imports: [
     CommonModule,
     CommonModule,
-    LoginRoutingModule
+    LoginRoutingModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule,
+    TranslateModule,
+    BrowserAnimationsModule,
+    FormsModule,
   ],
   ],
-  declarations: [LoginComponent]
+  declarations: [LoginComponent],
+  exports: [
+    LoginComponent
+  ]
+
 })
 })
 export class LoginModule { }
 export class LoginModule { }

code/moya-angular/src/app/shared/services/session-service.service.ts

-import { Injectable } from '@angular/core';
+import {Injectable} from '@angular/core';
 import gql from 'graphql-tag';
 import gql from 'graphql-tag';
-import { Permissions} from '../models/permissions.model';
-import {Apollo} from 'apollo-angular';
+import {Permissions} from '../models/permissions.model';
+import {Apollo, QueryRef} from 'apollo-angular';
 import {Observable} from 'rxjs';
 import {Observable} from 'rxjs';
+import {MOYA_BASE_URL, MOYA_REST_URL} from '../config/moya.config';
+import {map, share} from 'rxjs/operators';
+import {Vip} from '../../modules/viplist/models/vip.model';
+import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
 
 
 
 
 const __REFRESH_TIME_MINUTES = 5;
 const __REFRESH_TIME_MINUTES = 5;
@@ -10,7 +14,14 @@ const __REFRESH_TIME_MINUTES = 5;
 
 
 export const Q_USER_PERMISSIONS = gql`
 export const Q_USER_PERMISSIONS = gql`
     {
     {
-
+       user(id: 0) {
+          permissions {
+             feature
+             admin
+             info
+             user
+          }
+       }
     }
     }
   `;
   `;
 
 
@@ -21,18 +32,18 @@ class ApiPermissionType {
   info: boolean;
   info: boolean;
 }
 }
 
 
+class ApiPermissionRoot {
+  currentuser: { permissions: ApiPermissionType[] };
+}
+
 @Injectable({
 @Injectable({
   providedIn: 'root'
   providedIn: 'root'
 })
 })
 export class SessionServiceService {
 export class SessionServiceService {
-
   private permissionsObservable: Observable<Permissions>;
   private permissionsObservable: Observable<Permissions>;
+  private permissionsApollo: QueryRef<ApiPermissionRoot>;
 
 
-  public getPermissions(): Observable<Permissions> {
-    return this.permissionsObservable;
-  }
-
-  constructor(private apollo: Apollo) {
+  constructor(private apollo: Apollo, private http: HttpClient) {
 
 
     // rewrite permissions from API -format to moya-angular -format
     // rewrite permissions from API -format to moya-angular -format
     //
     //
@@ -40,7 +51,44 @@ export class SessionServiceService {
     // [{feature: 'VIPLIST', user:true, admin: false, info:false}, {feature: 'USERLIST', user:true, admin: false, info:false}]
     // [{feature: 'VIPLIST', user:true, admin: false, info:false}, {feature: 'USERLIST', user:true, admin: false, info:false}]
     // To:
     // To:
     // {VIPLIST: {USER: true, ADMIN: false, INFO: false}, USERLIST: {USER: true, ADMIN: false, INFO: false}}
     // {VIPLIST: {USER: true, ADMIN: false, INFO: false}, USERLIST: {USER: true, ADMIN: false, INFO: false}}
-    this.permissionsObservable = this.apollo.watchQuery<Array<ApiPermissionType>>({query: Q_USER_PERMISSIONS, pollInterval: __REFRESH_TIME_MINUTES * 60000}).valueChanges
-      .map((perms) => perms.data.reduce((permObject, perm) => (permObject[perm.feature] = {'ADMIN': perm.admin, 'USER': perm.user, 'INFO': perm.info }), {}) as Permissions);
+    this.permissionsApollo = this.apollo.watchQuery<ApiPermissionRoot>({query: Q_USER_PERMISSIONS, pollInterval: __REFRESH_TIME_MINUTES * 60000});
+
+    this.permissionsObservable = this.permissionsApollo.valueChanges
+      .pipe(map((perms) => perms.data.currentuser.permissions
+        .reduce((permObject, perm) => (permObject[perm.feature] = {'ADMIN': perm.admin, 'USER': perm.user, 'INFO': perm.info}), {}) as Permissions));
+  }
+
+  public getPermissions(): Observable<Permissions> {
+    return this.permissionsObservable;
   }
   }
+
+  /**
+   * Check loginerrors from returned observable
+   *
+   * @param username
+   * @param password
+   */
+  public doLogin(username: string, password: string): Observable<Object> {
+
+    let params = new HttpParams();
+    params = params.set("username", username);
+    params = params.set("password", password);
+
+    const apolloObservable = this.http.post(MOYA_REST_URL + '/user/auth',  params, {
+
+      headers: new HttpHeaders()
+        .set('Content-Type', 'application/x-www-form-urlencoded')
+    })
+      .pipe(map(x => x as boolean),
+        share()
+      );
+
+    apolloObservable.subscribe((x) => {
+      this.permissionsApollo.refetch();
+    });
+
+    return apolloObservable;
+  }
+
+
 }
 }

code/moya-angular/src/assets/i18n/fi.json

@@ -2,6 +2,16 @@
   "test": {
   "test": {
     "user": "Käyttäjä"
     "user": "Käyttäjä"
   },
   },
+
+  "user": {
+    "username": "Käyttäjänimi",
+    "password": "Salasana"
+  },
+
+  "login": {
+    "login": "Kirjaudu"
+  },
+
   "general": {
   "general": {
     "yes": "Kyllä",
     "yes": "Kyllä",
     "no": "Ei",
     "no": "Ei",