MikroWizard Initial commit | MikroFront Welcome to the world :)

src/app/views/pages/login/login.component.html

@@ -0,0 +1,51 @@
+<div class="bg-light min-vh-100 d-flex flex-row align-items-center">
+  <c-container>
+    <c-row class="justify-content-center">
+      <c-col md="8">
+        <c-card-group>
+          <c-card [ngStyle]="{'width.%': 44}" class="text-white  py-5" style="background-color: #303c54;">
+            <c-card-body class="text-center">
+              <img style="width: 200px;" src="assets/img/brand/mikrowizard-full.jpg">
+            </c-card-body>
+          </c-card>
+          <c-card class="p-4">
+            <c-card-body>
+              <form cForm  [formGroup]="loginForm" >
+                <h1>Login</h1>
+                <p class="text-medium-emphasis">Sign In to your account</p>
+                <c-input-group class="mb-3">
+                  <span cInputGroupText>
+                    <svg cIcon name="cilUser"></svg>
+                  </span>
+                  <input autoComplete="username" cFormControl placeholder="Username" formControlName="username" required #username/>
+                </c-input-group>
+                <c-input-group class="mb-1">
+                  <span cInputGroupText>
+                    <svg cIcon name="cilLockLocked"></svg>
+                  </span>
+                  <input
+                    autoComplete="current-password"
+                    cFormControl
+                    placeholder="Password"
+                    type="password"
+                    formControlName="password" 
+                    required #password
+                  />
+                </c-input-group>
+                <code *ngIf="error_msg"><i class="fa-solid fa-triangle-exclamation"></i><small>  {{error_msg}}</small></code>
+                <c-row>
+                  <c-col mb-3 xs="6">
+                    <button type="submit" cButton (click)="onClickSubmit()" class="px-4" color="primary">
+                      Login
+                    </button>
+                  </c-col>
+                </c-row>
+              </form>
+            </c-card-body>
+          </c-card>
+
+        </c-card-group>
+      </c-col>
+    </c-row>
+  </c-container>
+</div>

src/app/views/pages/login/login.component.spec.ts

@@ -0,0 +1,35 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ButtonModule, CardModule, FormModule, GridModule } from '@coreui/angular';
+import { LoginComponent } from './login.component';
+import { IconModule } from '@coreui/icons-angular';
+import { IconSetService } from '@coreui/icons-angular';
+import { iconSubset } from '../../../icons/icon-subset';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+  let iconSetService: IconSetService;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LoginComponent ],
+      imports: [FormModule, CardModule, GridModule, ButtonModule, IconModule],
+      providers: [IconSetService]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    iconSetService = TestBed.inject(IconSetService);
+    iconSetService.icons = { ...iconSubset };
+
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/views/pages/login/login.component.ts

@@ -0,0 +1,66 @@
+import { Component } from '@angular/core'; 
+import { Router } from '@angular/router';
+import { dataProvider } from '../../../providers/mikrowizard/data'; 
+import { loginChecker } from '../../../providers/login_checker';
+import { Validators, FormControl, FormGroup} from '@angular/forms';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss']
+})
+export class LoginComponent {
+  public loginForm: FormGroup;
+  public forgotForm: FormGroup;
+  public error_msg: string = "";
+  public forgot_error_msg: string = "";
+  public success_msg: string = "";
+  public submitted = false;
+  public forgot_page: boolean = false;
+  public forgot_btn_disable: boolean = false;
+
+
+	constructor(
+		private router: Router,
+		private data_provider: dataProvider,
+		private login_checker: loginChecker,
+	) {
+		this.createForm();
+	};
+
+	createForm() {
+		this.loginForm = new FormGroup({
+			username: new FormControl(''),
+			password: new FormControl(''),
+			ga_code: new FormControl(''),
+		});
+		this.forgotForm = new FormGroup({
+			email: new FormControl(''),
+		});
+	}	
+
+  onClickSubmit(){
+		var _self = this;
+		let uname = _self.loginForm.get('username')!.value;
+		let passwd = _self.loginForm.get('password')!.value;
+		let ga_code = '';
+		console.dir(uname);
+		_self.data_provider.login(uname, passwd, '').then(res => {
+			if ('uid' in res && res['uid']){
+				_self.error_msg = "";
+				_self.login_checker.setStatus(true);
+				_self.router.navigate(['/'], {replaceUrl: true});
+			}
+			else {
+				if ('reason' in res) {
+				}
+				else
+					_self.error_msg = res.error;
+			}
+		}).catch(err => {
+			_self.error_msg = "Wrong username or password!";
+		});
+		// });
+	}
+
+}

src/app/views/pages/page404/page404.component.html

@@ -0,0 +1,22 @@
+<div class="bg-light min-vh-100 d-flex flex-row align-items-center">
+  <c-container>
+    <c-row class="justify-content-center">
+      <c-col md="6">
+        <div class="clearfix">
+          <h1 class="float-start display-3 me-4">404</h1>
+          <h4 class="pt-3">Oops! You're lost.</h4>
+          <p class="text-medium-emphasis float-start">
+            The page you are looking for was not found.
+          </p>
+        </div>
+        <c-input-group class="input-prepend">
+          <span cInputGroupText>
+            <svg cIcon name="cilMagnifyingGlass"></svg>
+          </span>
+          <input cFormControl placeholder="What are you looking for?" type="text" />
+          <button cButton color="info">Search</button>
+        </c-input-group>
+      </c-col>
+    </c-row>
+  </c-container>
+</div>

src/app/views/pages/page404/page404.component.spec.ts

@@ -0,0 +1,35 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ButtonModule, FormModule, GridModule } from '@coreui/angular';
+import { IconModule } from '@coreui/icons-angular';
+import { IconSetService } from '@coreui/icons-angular';
+import { iconSubset } from '../../../icons/icon-subset';
+import { Page404Component } from './page404.component';
+
+describe('Page404Component', () => {
+  let component: Page404Component;
+  let fixture: ComponentFixture<Page404Component>;
+  let iconSetService: IconSetService;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ Page404Component ],
+      imports: [FormModule, GridModule, ButtonModule, IconModule],
+      providers: [IconSetService]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    iconSetService = TestBed.inject(IconSetService);
+    iconSetService.icons = { ...iconSubset };
+
+    fixture = TestBed.createComponent(Page404Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/views/pages/page404/page404.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-page404',
+  templateUrl: './page404.component.html',
+  styleUrls: ['./page404.component.scss']
+})
+export class Page404Component {
+
+  constructor() { }
+
+}

src/app/views/pages/page500/page500.component.html

@@ -0,0 +1,22 @@
+<div class="bg-light min-vh-100 d-flex flex-row align-items-center">
+  <c-container>
+    <c-row class="justify-content-center">
+      <c-col md="6">
+        <span class="clearfix">
+          <h1 class="float-start display-3 me-4">500</h1>
+          <h4 class="pt-3">Houston, we have a problem!</h4>
+          <p class="text-medium-emphasis float-start">
+            The page you are looking for is temporarily unavailable.
+          </p>
+        </span>
+        <c-input-group class="input-prepend">
+          <span cInputGroupText>
+            <svg cIcon name="cilMagnifyingGlass"></svg>
+          </span>
+          <input cFormControl placeholder="What are you looking for?" type="text" />
+          <button cButton color="info">Search</button>
+        </c-input-group>
+      </c-col>
+    </c-row>
+  </c-container>
+</div>

src/app/views/pages/page500/page500.component.spec.ts

@@ -0,0 +1,35 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ButtonModule, FormModule, GridModule } from '@coreui/angular';
+import { IconModule } from '@coreui/icons-angular';
+import { IconSetService } from '@coreui/icons-angular';
+import { iconSubset } from '../../../icons/icon-subset';
+import { Page500Component } from './page500.component';
+
+describe('Page500Component', () => {
+  let component: Page500Component;
+  let fixture: ComponentFixture<Page500Component>;
+  let iconSetService: IconSetService;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ Page500Component ],
+      imports: [GridModule, ButtonModule, FormModule, IconModule],
+      providers: [IconSetService]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    iconSetService = TestBed.inject(IconSetService);
+    iconSetService.icons = { ...iconSubset };
+
+    fixture = TestBed.createComponent(Page500Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/views/pages/page500/page500.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-page500',
+  templateUrl: './page500.component.html',
+  styleUrls: ['./page500.component.scss']
+})
+export class Page500Component {
+
+  constructor() { }
+
+}

src/app/views/pages/pages-routing.module.ts

@@ -0,0 +1,36 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { Page404Component } from './page404/page404.component';
+import { Page500Component } from './page500/page500.component';
+import { LoginComponent } from './login/login.component';
+
+const routes: Routes = [
+  {
+    path: '404',
+    component: Page404Component,
+    data: {
+      title: 'Page 404'
+    }
+  },
+  {
+    path: '500',
+    component: Page500Component,
+    data: {
+      title: 'Page 500'
+    }
+  },
+  {
+    path: 'login',
+    component: LoginComponent,
+    data: {
+      title: 'Login Page'
+    }
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class PagesRoutingModule {
+}

src/app/views/pages/pages.module.ts

@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { PagesRoutingModule } from './pages-routing.module';
+import { LoginComponent } from './login/login.component';
+import { Page404Component } from './page404/page404.component';
+import { Page500Component } from './page500/page500.component';
+import { ButtonModule, CardModule, FormModule, GridModule } from '@coreui/angular';
+import { IconModule } from '@coreui/icons-angular';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+
+@NgModule({
+  declarations: [
+    LoginComponent,
+    Page404Component,
+    Page500Component
+  ],
+  imports: [
+    CommonModule,
+    PagesRoutingModule,
+    CardModule,
+    ButtonModule,
+    GridModule,
+    IconModule,
+    FormModule,
+    FormsModule,
+    ReactiveFormsModule
+  ]
+})
+export class PagesModule {
+}