diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index a7cc74d30..277f399d5 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -14,7 +14,6 @@ import { GithubCallbackComponent } from "./auth/github-callback/github.callback" import ProjectLinks from "./project-links"; import { SetTransformComponent } from "./dataset-view/additional-components/metadata-component/components/set-transform/set-transform.component"; import { LoginGuard } from "./auth/guards/login.guard"; -import { LoginService } from "./auth/login/login.service"; export const routes: Routes = [ { path: "", redirectTo: ProjectLinks.DEFAULT_URL, pathMatch: "full" }, @@ -26,10 +25,6 @@ export const routes: Routes = [ path: ProjectLinks.URL_LOGIN, component: LoginComponent, canLoad: [LoginGuard], - loadChildren: () => - new Promise(() => { - LoginService.gotoGithub(); - }), }, { path: ProjectLinks.URL_SEARCH, diff --git a/src/app/auth/login/login.component.html b/src/app/auth/login/login.component.html index bcead4f2e..26c2dbfd7 100644 --- a/src/app/auth/login/login.component.html +++ b/src/app/auth/login/login.component.html @@ -1,2 +1,34 @@ -

Please login with your GitHub account.

- Login + +
+

Select your sign in

+
+ + +
+
+ + +
+ +
+ +
+
+ +

Sign in to Kamu

+
+
+ *
+ +
+
+ *
+ +
+ +
+
+
diff --git a/src/app/auth/login/login.component.sass b/src/app/auth/login/login.component.sass index e69de29bb..c128fb976 100644 --- a/src/app/auth/login/login.component.sass +++ b/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% diff --git a/src/app/auth/login/login.component.ts b/src/app/auth/login/login.component.ts index 90103b147..2adb549f5 100644 --- a/src/app/auth/login/login.component.ts +++ b/src/app/auth/login/login.component.ts @@ -1,5 +1,6 @@ -import { ChangeDetectionStrategy, Component } from "@angular/core"; +import { ChangeDetectionStrategy, Component, OnInit } from "@angular/core"; import ProjectLinks from "src/app/project-links"; +import AppValues from "src/app/common/app.values"; @Component({ selector: "app-login", @@ -7,6 +8,19 @@ import ProjectLinks from "src/app/project-links"; styleUrls: ["./login.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class LoginComponent { +export class LoginComponent implements OnInit { public readonly GITHUB_URL = ProjectLinks.GITHUB_URL; + public appLogo = `/${AppValues.APP_LOGO}`; + public enableFormLoginFromServer = true; + public showFormLogin = false; + + ngOnInit(): void { + if (!this.enableFormLoginFromServer) { + window.location.href = this.GITHUB_URL; + } + } + + public clickLogin(): void { + this.showFormLogin = true; + } } diff --git a/src/assets/svg/git-hub.svg b/src/assets/svg/git-hub.svg new file mode 100644 index 000000000..1b502dff3 --- /dev/null +++ b/src/assets/svg/git-hub.svg @@ -0,0 +1,13 @@ + diff --git a/src/assets/svg/icons.json b/src/assets/svg/icons.json index 05cc3d8ff..8d0d28ff0 100644 --- a/src/assets/svg/icons.json +++ b/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": []