Create template for login page

src/app/app-routing.module.ts

@@ -11,12 +11,9 @@ import { DatasetComponent } from "./dataset-view/dataset.component";
 import { DatasetCreateComponent } from "./dataset-create/dataset-create.component";
 import { AccountComponent } from "./auth/account/account.component";
 import { GithubCallbackComponent } from "./auth/github-callback/github.callback";
-import { environment } from "../environments/environment";
 import ProjectLinks from "./project-links";
 import { SetTransformComponent } from "./dataset-view/additional-components/metadata-component/components/set-transform/set-transform.component";
 
-const githubUrl = `https://github.com/login/oauth/authorize?scope=user:email&client_id=${environment.github_client_id}`;
-
 export const routes: Routes = [
     { path: "", redirectTo: ProjectLinks.URL_SEARCH, pathMatch: "full" },
     {
@@ -26,10 +23,6 @@ export const routes: Routes = [
     {
         path: ProjectLinks.URL_LOGIN,
         component: LoginComponent,
-        loadChildren: () =>
-            new Promise(() => {
-                window.location.href = githubUrl;
-            }),
     },
     {
         path: ProjectLinks.URL_SEARCH,

src/app/auth/login/login.component.html

@@ -1,2 +1,34 @@
-<p>Please login with your <strong>GitHub account</strong>.</p>
-<a href="{{ githubUrl }}" class="login__btn login__btn--full" md-raised-button="primary"> Login </a>
+<ng-container *ngIf="enableFormLoginFromServer && !showFormLogin; else defaultGitHubLogin">
+    <div class="d-flex flex-column align-items-center login-container__buttons">
+        <h1 class="text-center text-muted">Select your sign in</h1>
+        <div class="inner-container">
+            <a href="{{ githubUrl }}" class="login__btn" md-raised-button="primary">
+                Sign in to GitHub
+                <svg-icon class="github-logo" name="github-logo"></svg-icon>
+            </a>
+            <a (click)="clickLogin()" class="login__btn" md-raised-button="primary"> Sign in </a>
+        </div>
+    </div>
+</ng-container>
+<ng-template #defaultGitHubLogin>
+    <div class="d-flex justify-content-center align-items-center">
+        <app-spinner></app-spinner>
+    </div>
+</ng-template>
+<div *ngIf="showFormLogin">
+    <div class="d-flex justify-content-center flex-column container-form">
+        <img [src]="appLogo" class="logo" alt="Application logo" />
+        <h1 class="text-center text-muted mt-4">Sign in to Kamu</h1>
+        <form>
+            <div>
+                <label for="login" class="fs-12">Login</label><span class="text-danger">*</span><br />
+                <input type="text" class="form-control d-inline" id="login" data-test-id="login" required />
+            </div>
+            <div class="mt-4">
+                <label for="password" class="fs-12">Password</label><span class="text-danger">*</span><br />
+                <input type="text" class="form-control d-inline" id="password" data-test-id="password" required />
+            </div>
+            <button class="button-sigh-in mt-4">Sign in</button>
+        </form>
+    </div>
+</div>

src/app/auth/login/login.component.sass

@@ -0,0 +1,53 @@
+@import "../../../../src/assets/styles/var"
+
+a
+    text-decoration: none
+    color: $app-dark
+
+.login-container__buttons
+    height: 100vh
+    overflow: hidden
+    margin-top: 200px
+    .inner-container
+        border: 1px solid $app-color-border-default
+        padding: 40px 20px
+        align-items: center
+        display: flex
+        justify-content: center
+        flex-direction: column
+        gap: 40px
+        border-radius: 6px
+    .login__btn
+        align-items: center
+        display: flex
+        justify-content: center
+        border: 1px solid $app-color-border-default
+        width: 200px
+        padding: 5px 15px
+        border-radius: 6px
+        background-color: #ebeef1
+        &:hover
+            background: $app-background-btn
+    .github-logo
+        margin-left: 10px
+
+.container-form
+    margin-top: 100px
+    .logo
+        width: 70px
+        margin: 0 auto
+    form
+        width: 400px
+        border: 1px solid $app-color-border-default
+        margin: 0 auto
+        border-radius: 6px
+        padding: 20px
+        background-color: #f6f8fa
+        .button-sigh-in
+            color: $app-white
+            background-color: #1f883d
+            text-align: center
+            border: none
+            border-radius: 6px
+            padding: 8px 15px
+            width: 100%

src/app/auth/login/login.component.ts

@@ -1,12 +1,26 @@
-import { ChangeDetectionStrategy, Component } from "@angular/core";
+import { ChangeDetectionStrategy, Component, OnInit } from "@angular/core";
 import { environment } from "../../../environments/environment";
+import AppValues from "src/app/common/app.values";
 
 @Component({
     selector: "app-login",
     templateUrl: "./login.component.html",
     styleUrls: ["./login.component.sass"],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class LoginComponent {
+export class LoginComponent implements OnInit {
+    public appLogo = `/${AppValues.APP_LOGO}`;
     public githubUrl = `https://github.com/login/oauth/authorize?scope=user:email&client_id=${environment.github_client_id}`;
+    public enableFormLoginFromServer = true;
+    public showFormLogin = false;
+
+    ngOnInit(): void {
+        if (!this.enableFormLoginFromServer) {
+            window.location.href = this.githubUrl;
+        }
+    }
+
+    public clickLogin(): void {
+        this.showFormLogin = true;
+    }
 }

src/assets/svg/icons.json

@@ -107,6 +107,10 @@
     {
       "iconName": "information",
       "iconPath": "/assets/svg/information.svg"
+    },
+    {
+      "iconName": "github-logo",
+      "iconPath": "/assets/svg/git-hub.svg"
     }
   ],
   "customIcons": []