made some changes

src/app/config/auth-constants.ts

@@ -0,0 +1,5 @@
+/* This file stores all the keys */
+export class AuthConnstants{
+    /* My reference key */
+    public static readonly AUTH = 'userDataKey'
+}

src/app/explore-container/explore-container.component.html

@@ -1,4 +0,0 @@
-<div id="container">
-  <strong>{{ name }}</strong>
-  <p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
-</div>

src/app/explore-container/explore-container.component.scss

@@ -1,27 +0,0 @@
-#container {
-  text-align: center;
-
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-#container strong {
-  font-size: 20px;
-  line-height: 26px;
-}
-
-#container p {
-  font-size: 16px;
-  line-height: 22px;
-
-  color: #8c8c8c;
-
-  margin: 0;
-}
-
-#container a {
-  text-decoration: none;
-}

src/app/explore-container/explore-container.component.spec.ts

@@ -1,24 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { IonicModule } from '@ionic/angular';
-
-import { ExploreContainerComponent } from './explore-container.component';
-
-describe('ExploreContainerComponent', () => {
-  let component: ExploreContainerComponent;
-  let fixture: ComponentFixture<ExploreContainerComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ ExploreContainerComponent ],
-      imports: [IonicModule.forRoot()]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(ExploreContainerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  }));
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/explore-container/explore-container.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit, Input } from '@angular/core';
-
-@Component({
-  selector: 'app-explore-container',
-  templateUrl: './explore-container.component.html',
-  styleUrls: ['./explore-container.component.scss'],
-})
-export class ExploreContainerComponent implements OnInit {
-  @Input() name: string;
-
-  constructor() { }
-
-  ngOnInit() {}
-
-}

src/app/explore-container/explore-container.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-
-import { IonicModule } from '@ionic/angular';
-
-import { ExploreContainerComponent } from './explore-container.component';
-
-@NgModule({
-  imports: [ CommonModule, FormsModule, IonicModule],
-  declarations: [ExploreContainerComponent],
-  exports: [ExploreContainerComponent]
-})
-export class ExploreContainerComponentModule {}

src/app/pages/login/login.page.html

@@ -6,18 +6,18 @@
     <ion-list>
       <ion-item>
         <ion-label position="stacked">Username</ion-label>
-        <ion-input type="text"></ion-input>
+        <ion-input type="text" name="username" [(ngModel)]="postData.username"></ion-input>
       </ion-item>
       <ion-item>
           <ion-label position="stacked">Password</ion-label>
-          <ion-input type="password"></ion-input>
+          <ion-input type="password" name="password" [(ngModel)]="postData.password"></ion-input>
         </ion-item>
         <ion-item>
             <ion-label position="stacked">Domínio</ion-label>
-            <ion-input type="text"></ion-input>
+            <ion-input type="text" name="domainName" [(ngModel)]="postData.domainName"></ion-input>
           </ion-item>
         
-        <ion-button expand="block" shape="round" color="primary" (click)="login()">Entrar</ion-button>
+        <ion-button expand="block" shape="round" color="primary" (click)="loginAction()">Entrar</ion-button>
 
         <ion-item lines="none">
             <a routerLink="/signup">Criar conta</a>

src/app/pages/login/login.page.ts

@@ -1,5 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { AuthService } from 'src/app/services/auth.service';
+import { StorageService } from 'src/app/services/storage.service';
+import { AuthConnstants } from 'src/app/config/auth-constants';
 
 @Component({
   selector: 'app-login',
@@ -8,14 +11,59 @@ import { Router } from '@angular/router';
 })
 export class LoginPage implements OnInit {
 
-  constructor(private router: Router) { }
+  /* Declare variables */
+  public postData = {
+    username: '',
+    password: '',
+    domainName: ''
+  }
+
+  constructor(private router: Router, private authService: AuthService, private storageService: StorageService) { }
 
   ngOnInit() {
   }
+  /* Function to validade the login inputs */
+  validateInput(){
+    let username = this.postData.username.trim();
+    let password = this.postData.password.trim();
+    let domainName = this.postData.domainName.trim();
 
-  login(){
+    return (
+      this.postData.username && 
+      this.postData.password && 
+      username.length > 0 
+      && password.length > 0
+      );
+  }
+
+  loginAction(){
     //Go to our home in home/feed.
-    this.router.navigate(['/home/feed']);
+    /* this.router.navigate(['/home/feed']); */
+    /* console.log(this.postData); */
+    if(this.validateInput()){
+      //Try to login
+      this.authService.login(this.postData).subscribe((res: any)=> {
+        /* userData must be in the API results as paratemers otherwise change to the param that is in the API */
+        if(res.userData){
+          /* Then we store this information at the staorage service */
+          this.storageService.store(AuthConnstants.AUTH, res.userData);
+          /* Then go to home view */
+          this.router.navigate(['home']);
+        }
+        else{
+          console.log("Os dados inseridos são inválidos");
+        }
+      },
+     /*  Write a connection error */
+     (error: any)=>{
+       console.log("Erro de conexão com a API.");
+     }
+      );
+    }
+    else{
+      //Display an error message
+      console.log("Preencha todos campos");
+    }
   }
 
 }

src/app/services/auth.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthService } from './auth.service';
+
+describe('AuthService', () => {
+  let service: AuthService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AuthService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/auth.service.ts

@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+import { StorageService } from './storage.service';
+import { HttpService } from './http.service';
+import { Router } from '@angular/router';
+import { Observable } from 'rxjs';
+import { AuthConnstants } from '../config/auth-constants';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+
+  constructor(
+    private httpService: HttpService, 
+    private storageService: StorageService, 
+    private router: Router
+    ) { }
+
+    login(postData: any): Observable<any> {
+      return this.httpService.post('login', postData);
+      }
+
+      signup(postData: any): Observable<any> {
+        return this.httpService.post('signup', postData);
+        }
+
+    logout(){
+      this.storageService.removeStorageItem(AuthConnstants.AUTH).then(res =>{
+        this.router.navigate([''])
+      })
+
+    }
+}

src/app/services/http.service.ts

@@ -1,22 +1,18 @@
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { environment } from 'src/environments/environment';
-
-/* import { environment } from 'src/environments/environment.prod'; */
+import { environment } from '../../environments/environment';
 
 @Injectable({
-  providedIn: 'root'
+providedIn: 'root'
 })
 export class HttpService {
+constructor(private http: HttpClient) {}
 
-  constructor(private http: HttpClient) { }
+post(serviceName: string, data: any) {
+const headers = new HttpHeaders();
+const options = { headers: headers, withCredintials: false };
+const url = environment.apiURL + serviceName;
 
-  post(serviceName: string, data: any){
-    const headers = new HttpHeaders();
-    const options = { header: headers, withCredintials: false}
-
-    const url = environment.apiURL + serviceName;
-
-    /* const this.http.post(url, JSON.stringify(data), options); */
-  }
+return this.http.post(url, JSON.stringify(data), options);
+}
 }

src/app/services/storage.service.ts

@@ -1,20 +1,33 @@
 import { Injectable } from '@angular/core';
 import { Plugins } from '@capacitor/core';
-
 const { Storage } = Plugins;
-
 @Injectable({
   providedIn: 'root'
-})
-export class StorageService {
+  })
+  export class StorageService {
+  constructor() {}
 
-  constructor() { 
-    /* async store(storageKey: String, value: any){
+  // Store the value
+  async store(storageKey: string, value: any) {
+  const encryptedValue = btoa(escape(JSON.stringify(value)));
   await Storage.set({
   key: storageKey,
-        value: value
-      })
+  value: encryptedValue
+  });
+  }
 
-    } */
+  // Get the value
+  async get(storageKey: string) {
+  const ret = await Storage.get({ key: storageKey });
+  return JSON.parse(unescape(atob(ret.value)));
+  }
+
+  async removeStorageItem(storageKey: string) {
+  await Storage.remove({ key: storageKey });
+  }
+
+  // Clear storage
+  async clear() {
+  await Storage.clear();
   }
 }