diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 372daa6ab..fe7b67cc3 100644 --- a/src/app/app-routing.module.ts +++ b/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, diff --git a/src/app/auth/login/login.component.html b/src/app/auth/login/login.component.html index 470ee6931..b01efcfe8 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 10059e72c..f0d28ec31 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 { environment } from "../../../environments/environment"; +import AppValues from "src/app/common/app.values"; @Component({ selector: "app-login", @@ -7,6 +8,19 @@ import { environment } from "../../../environments/environment"; 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; + } } 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": []