🚧 wip

Author: mckenziearts

.env.example

@@ -1,6 +1,6 @@
 NG_APP_NAME="Cosna Cpanel"
 NG_APP_DEBUG=true
-NG_APP_VERSION=1.0.0
+NG_APP_VERSION="v1.0.0"
 NG_APP_API_URL=https://api.cosna-afrique.com
 NG_APP_API_VERSION=v2
 NG_APP_SENTRY_DSN=

src/app/modules/authentication/authentication.module.ts

@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
 import { SharedModule } from '@shared/shared.module';
@@ -15,6 +16,8 @@ import { ResetPasswordComponent } from './pages/reset-password/reset-password.co
     ResetPasswordComponent
   ],
   imports: [
+    FormsModule,
+    ReactiveFormsModule,
     SharedModule,
     RouterModule.forChild(authRoutes),
   ],

src/app/modules/authentication/pages/login/login.component.html

@@ -6,13 +6,12 @@ <h2 class="mt-6 text-3xl font-semibold text-slate-900">Connectez-vous</h2>
   </p>
 </div>
 
-<form action="#" method="POST" class="mt-10 space-y-6">
+<form (submit)="submit()" class="mt-10 space-y-6">
   <!-- Email Address -->
   <div>
     <cosna-input-overlaping-label
       label="Adresse E-mail"
       name="email"
-      value=""
     ></cosna-input-overlaping-label>
   </div>
 
@@ -21,14 +20,13 @@ <h2 class="mt-6 text-3xl font-semibold text-slate-900">Connectez-vous</h2>
     <cosna-input-overlaping-label
       label="Mot de passe"
       name="password"
-      value=""
       [type]="'password'"
     ></cosna-input-overlaping-label>
   </div>
 
   <div class="flex items-center justify-between">
     <label for="remember-me" class="flex items-center cursor-pointer">
-      <input id="remember-me" name="remember-me" type="checkbox" class="w-4 h-4 text-primary-600 rounded border-slate-300 focus:ring-primary-500">
+      <input id="remember-me" name="remember-me" type="checkbox" class="w-4 h-4 rounded text-primary-600 border-slate-300 focus:ring-primary-500">
       <span class="block ml-2 text-sm text-slate-900"> Se souvenir de moi </span>
     </label>
 
@@ -38,9 +36,9 @@ <h2 class="mt-6 text-3xl font-semibold text-slate-900">Connectez-vous</h2>
   </div>
 
   <div>
-    <cosna-button-primary type="submit" class="relative group w-full justify-center">
-      <span class="absolute left-0 inset-y-0 flex items-center pl-3">
-        <svg class="h-5 w-5 text-primary-500 group-hover:text-primary-400" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <cosna-button-primary type="submit" class="relative justify-center w-full group">
+      <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+        <svg class="w-5 h-5 text-primary-500 group-hover:text-primary-400" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
           <path fill-rule="evenodd" clip-rule="evenodd" d="M10 1C7.51472 1 5.5 3.01472 5.5 5.5V9H5C3.89543 9 3 9.89543 3 11V17C3 18.1046 3.89543 19 5 19H15C16.1046 19 17 18.1046 17 17V11C17 9.89543 16.1046 9 15 9H14.5V5.5C14.5 3.01472 12.4853 1 10 1ZM13 9V5.5C13 3.84315 11.6569 2.5 10 2.5C8.34315 2.5 7 3.84315 7 5.5V9H13Z" />
         </svg>
       </span>

src/app/modules/authentication/pages/login/login.component.ts

@@ -4,12 +4,21 @@ import { Component, OnInit } from '@angular/core';
   templateUrl: './login.component.html',
 })
 export class LoginComponent implements OnInit {
-
+  public email!: string;
+  public password!: string;
+  public error!: string;
   date: number = (new Date()).getFullYear();
 
-  constructor() { }
+  constructor() {}
+
+  getValue(value: string) {
+    console.log(value);
+  }
+
+  ngOnInit(): void {}
 
-  ngOnInit(): void {
+  public submit() {
+    console.log(this.email, this.password);
   }
 
 }

src/app/shared/components/inputs/overlaping-label/overlaping-label.component.html

@@ -10,7 +10,7 @@
     [type]="type" 
     [id]="name" 
     [(ngModel)]="value" 
-    placeholder="{{ placeholder }}" 
+    placeholder="{{ placeholder }}"
     [ngClass]="inputClass"
     class="block w-full p-0 border-0 outline-none placeholder-slate-500 focus:ring-0 sm:text-sm"
   />

src/app/shared/components/inputs/overlaping-label/overlaping-label.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 @Component({
   selector: 'cosna-input-overlaping-label',