diff --git a/images/kamu-web-ui/runtime-config.json b/images/kamu-web-ui/runtime-config.json
index 611452b1c..0a79abcee 100644
--- a/images/kamu-web-ui/runtime-config.json
+++ b/images/kamu-web-ui/runtime-config.json
@@ -1,7 +1,10 @@
 {
     "apiServerGqlUrl": "http://localhost:8080/graphql",
     "featureFlags": {
-        "enableLogin": true,
-        "enableLogout": true
+        "enableLogout": true,
+        "loginMethods": [
+            "password",
+            "oauth_github"
+        ]
     }
 }
\ No newline at end of file
diff --git a/src/app/api/auth.api.model.ts b/src/app/api/auth.api.model.ts
index cb247e908..8e5afa59c 100644
--- a/src/app/api/auth.api.model.ts
+++ b/src/app/api/auth.api.model.ts
@@ -1,6 +1,3 @@
-export const LOGIN_METHOD_PASSWORD = "password";
-export const LOGIN_METHOD_GITHUB = "oauth_github";
-
 export interface PasswordLoginCredentials {
     login: string;
     password: string;
diff --git a/src/app/api/auth.api.spec.ts b/src/app/api/auth.api.spec.ts
index 559d119fd..94b85f590 100644
--- a/src/app/api/auth.api.spec.ts
+++ b/src/app/api/auth.api.spec.ts
@@ -16,12 +16,8 @@ import {
 } from "./mock/auth.mock";
 import { AuthenticationError } from "../common/errors";
 import { first } from "rxjs/operators";
-import {
-    GithubLoginCredentials,
-    LOGIN_METHOD_GITHUB,
-    LOGIN_METHOD_PASSWORD,
-    PasswordLoginCredentials,
-} from "./auth.api.model";
+import { GithubLoginCredentials, PasswordLoginCredentials } from "./auth.api.model";
+import { LoginMethod } from "../app-config.model";
 
 describe("AuthApi", () => {
     let service: AuthApi;
@@ -52,12 +48,14 @@ describe("AuthApi", () => {
     }
 
     function loginFullyViaGithub(): void {
-        service.fetchUserInfoAndTokenFromGithubCallackCode(TEST_GITHUB_CODE).subscribe();
+        service
+            .fetchUserInfoAndTokenFromGithubCallackCode({ code: TEST_GITHUB_CODE } as GithubLoginCredentials)
+            .subscribe();
 
         const expectedCredentials: GithubLoginCredentials = { code: TEST_GITHUB_CODE };
 
         const op = controller.expectOne(LoginDocument);
-        expect(op.operation.variables.login_method).toEqual(LOGIN_METHOD_GITHUB);
+        expect(op.operation.variables.login_method).toEqual(LoginMethod.GITHUB);
         expect(op.operation.variables.login_credentials_json).toEqual(JSON.stringify(expectedCredentials));
 
         op.flush({
@@ -66,12 +64,17 @@ describe("AuthApi", () => {
     }
 
     function loginFullyViaPassword(): void {
-        service.fetchUserInfoAndTokenFromPasswordLogin(TEST_LOGIN, TEST_PASSWORD).subscribe();
+        service
+            .fetchUserInfoAndTokenFromPasswordLogin({
+                login: TEST_LOGIN,
+                password: TEST_PASSWORD,
+            } as PasswordLoginCredentials)
+            .subscribe();
 
         const expectedCredentials: PasswordLoginCredentials = { login: TEST_LOGIN, password: TEST_PASSWORD };
 
         const op = controller.expectOne(LoginDocument);
-        expect(op.operation.variables.login_method).toEqual(LOGIN_METHOD_PASSWORD);
+        expect(op.operation.variables.login_method).toEqual(LoginMethod.PASSWORD);
         expect(op.operation.variables.login_credentials_json).toEqual(JSON.stringify(expectedCredentials));
 
         op.flush({
@@ -108,7 +111,10 @@ describe("AuthApi", () => {
 
     it("should check full login password failure", fakeAsync(() => {
         const subscription$ = service
-            .fetchUserInfoAndTokenFromPasswordLogin(TEST_LOGIN, TEST_PASSWORD)
+            .fetchUserInfoAndTokenFromPasswordLogin({
+                login: TEST_LOGIN,
+                password: TEST_PASSWORD,
+            } as PasswordLoginCredentials)
             .pipe(first())
             .subscribe({
                 next: () => fail("Unexpected success"),
@@ -150,7 +156,7 @@ describe("AuthApi", () => {
 
     it("should check full login Github failure", fakeAsync(() => {
         const subscription$ = service
-            .fetchUserInfoAndTokenFromGithubCallackCode(TEST_GITHUB_CODE)
+            .fetchUserInfoAndTokenFromGithubCallackCode({ code: TEST_GITHUB_CODE } as GithubLoginCredentials)
             .pipe(first())
             .subscribe({
                 next: () => fail("Unexpected success"),
diff --git a/src/app/api/auth.api.ts b/src/app/api/auth.api.ts
index 00b2ca950..c5d74e523 100644
--- a/src/app/api/auth.api.ts
+++ b/src/app/api/auth.api.ts
@@ -10,12 +10,8 @@ import {
 } from "./kamu.graphql.interface";
 import { MutationResult } from "apollo-angular";
 import { AuthenticationError } from "../common/errors";
-import {
-    GithubLoginCredentials,
-    LOGIN_METHOD_GITHUB,
-    LOGIN_METHOD_PASSWORD,
-    PasswordLoginCredentials,
-} from "./auth.api.model";
+import { GithubLoginCredentials, PasswordLoginCredentials } from "./auth.api.model";
+import { LoginMethod } from "../app-config.model";
 
 @Injectable({
     providedIn: "root",
@@ -34,14 +30,12 @@ export class AuthApi {
         return this.accountChanged$.asObservable();
     }
 
-    public fetchUserInfoAndTokenFromPasswordLogin(login: string, password: string): Observable<void> {
-        const passwordCredentials: PasswordLoginCredentials = { login, password };
-        return this.fetchUserInfoAndTokenFromLoginMethod(LOGIN_METHOD_PASSWORD, JSON.stringify(passwordCredentials));
+    public fetchUserInfoAndTokenFromPasswordLogin(credentials: PasswordLoginCredentials): Observable<void> {
+        return this.fetchUserInfoAndTokenFromLoginMethod(LoginMethod.PASSWORD, JSON.stringify(credentials));
     }
 
-    public fetchUserInfoAndTokenFromGithubCallackCode(code: string): Observable<void> {
-        const githubCredentials: GithubLoginCredentials = { code };
-        return this.fetchUserInfoAndTokenFromLoginMethod(LOGIN_METHOD_GITHUB, JSON.stringify(githubCredentials));
+    public fetchUserInfoAndTokenFromGithubCallackCode(credentials: GithubLoginCredentials): Observable<void> {
+        return this.fetchUserInfoAndTokenFromLoginMethod(LoginMethod.GITHUB, JSON.stringify(credentials));
     }
 
     public fetchUserInfoAndTokenFromLoginMethod(loginMethod: string, loginCredentialsJson: string): Observable<void> {
diff --git a/src/app/api/mock/auth.mock.ts b/src/app/api/mock/auth.mock.ts
index c73cb55fe..8ee4bb0cc 100644
--- a/src/app/api/mock/auth.mock.ts
+++ b/src/app/api/mock/auth.mock.ts
@@ -1,8 +1,8 @@
 import { GraphQLError } from "graphql";
 import { AccountDetailsFragment, FetchAccountInfoMutation, LoginMutation } from "../kamu.graphql.interface";
 import AppValues from "src/app/common/app.values";
-import { AppConfigLoginInstructions } from "src/app/app-config.model";
-import { LOGIN_METHOD_PASSWORD, PasswordLoginCredentials } from "../auth.api.model";
+import { AppConfigLoginInstructions, LoginMethod } from "src/app/app-config.model";
+import { PasswordLoginCredentials } from "../auth.api.model";
 
 export const TEST_GITHUB_CODE = "12345";
 export const TEST_ACCESS_TOKEN_GITHUB = "someTokenViaGithub";
@@ -17,7 +17,7 @@ const mockPasswordLoginCredentials: PasswordLoginCredentials = {
 };
 
 export const mockLoginInstructions: AppConfigLoginInstructions = {
-    loginMethod: LOGIN_METHOD_PASSWORD,
+    loginMethod: LoginMethod.PASSWORD,
     loginCredentialsJson: JSON.stringify(mockPasswordLoginCredentials),
 };
 
diff --git a/src/app/app-config.model.ts b/src/app/app-config.model.ts
index 80677f673..58ddbb7a9 100644
--- a/src/app/app-config.model.ts
+++ b/src/app/app-config.model.ts
@@ -9,7 +9,12 @@ export interface AppConfigLoginInstructions {
     loginCredentialsJson: string;
 }
 
+export enum LoginMethod {
+    PASSWORD = "password",
+    GITHUB = "oauth_github",
+}
+
 export interface AppConfigFeatureFlags {
-    enableLogin: boolean;
     enableLogout: boolean;
+    loginMethods: LoginMethod[];
 }
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 277f399d5..4e3d5a1d3 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -24,7 +24,7 @@ export const routes: Routes = [
     {
         path: ProjectLinks.URL_LOGIN,
         component: LoginComponent,
-        canLoad: [LoginGuard],
+        canActivate: [LoginGuard],
     },
     {
         path: ProjectLinks.URL_SEARCH,
diff --git a/src/app/app-routing.spec.ts b/src/app/app-routing.spec.ts
index beb3d11a8..b9b6abae9 100644
--- a/src/app/app-routing.spec.ts
+++ b/src/app/app-routing.spec.ts
@@ -9,8 +9,8 @@ import { ApolloTestingModule } from "apollo-angular/testing";
 import { NO_ERRORS_SCHEMA } from "@angular/core";
 import { LoggedUserService } from "./auth/logged-user.service";
 import { AppConfigService } from "./app-config.service";
-import { LoginService } from "./auth/login/login.service";
 import { PageNotFoundComponent } from "./components/page-not-found/page-not-found.component";
+import { LoginComponent } from "./auth/login/login.component";
 
 describe("Router", () => {
     let router: Router;
@@ -22,7 +22,7 @@ describe("Router", () => {
     beforeEach(async () => {
         await TestBed.configureTestingModule({
             imports: [RouterTestingModule.withRoutes(routes), ApolloTestingModule],
-            declarations: [PageNotFoundComponent],
+            declarations: [PageNotFoundComponent, LoginComponent],
             schemas: [NO_ERRORS_SCHEMA],
         }).compileComponents();
 
@@ -90,8 +90,8 @@ describe("Router", () => {
     describe("#login routes", () => {
         it("login redirects to default page when not allowed in configuration", fakeAsync(() => {
             spyOnProperty(appConfigService, "featureFlags", "get").and.returnValue({
-                enableLogin: false,
                 enableLogout: true,
+                loginMethods: [],
             });
 
             promiseWithCatch(router.navigate([ProjectLinks.URL_LOGIN]));
@@ -111,14 +111,13 @@ describe("Router", () => {
             flush();
         }));
 
-        it("login initiates GitHub redirect when allowed and not logged in", fakeAsync(() => {
+        it("login opens Login component when allowed and not logged in", fakeAsync(() => {
             spyOnProperty(loggedUserService, "isAuthenticated", "get").and.returnValue(false);
-            const gotoGithubSpy = spyOn(LoginService, "gotoGithub");
 
             promiseWithCatch(router.navigate([ProjectLinks.URL_LOGIN]));
             tick();
 
-            expect(gotoGithubSpy).toHaveBeenCalledWith();
+            expect(location.path()).toBe("/" + ProjectLinks.URL_LOGIN);
             flush();
         }));
     });
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 25a39aa63..0aabe698f 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -16,7 +16,7 @@ import _ from "lodash";
 import { isMobileView, promiseWithCatch } from "./common/app.helpers";
 import { AppConfigService } from "./app-config.service";
 import { LoggedUserService } from "./auth/logged-user.service";
-import { AppConfigFeatureFlags } from "./app-config.model";
+import { AppConfigFeatureFlags, LoginMethod } from "./app-config.model";
 
 export const ALL_URLS_WITHOUT_HEADER: string[] = [ProjectLinks.URL_LOGIN, ProjectLinks.URL_GITHUB_CALLBACK];
 
@@ -32,8 +32,8 @@ export class AppComponent extends BaseComponent implements OnInit {
         name: AppValues.DEFAULT_USERNAME,
     };
     public static readonly DEFAULT_FEATURE_FLAGS: AppConfigFeatureFlags = {
-        enableLogin: true,
         enableLogout: true,
+        loginMethods: [LoginMethod.GITHUB, LoginMethod.PASSWORD],
     };
 
     public readonly APP_LOGO = `/${AppValues.APP_LOGO}`;
diff --git a/src/app/auth/github-callback/github.callback.spec.ts b/src/app/auth/github-callback/github.callback.spec.ts
index 5aadf1b17..389a20a9a 100644
--- a/src/app/auth/github-callback/github.callback.spec.ts
+++ b/src/app/auth/github-callback/github.callback.spec.ts
@@ -5,6 +5,7 @@ import { ActivatedRoute } from "@angular/router";
 import { of } from "rxjs";
 import { AuthApi } from "src/app/api/auth.api";
 import { GithubCallbackComponent } from "./github.callback";
+import { GithubLoginCredentials } from "src/app/api/auth.api.model";
 
 describe("GithubCallbackComponent", () => {
     let component: GithubCallbackComponent;
@@ -47,7 +48,7 @@ describe("GithubCallbackComponent", () => {
         ).and.returnValue(of(undefined));
         component.ngOnInit();
 
-        expect(fetchUserInfoAndTokenSpy).toHaveBeenCalledWith(GITHUB_TEST_CODE);
+        expect(fetchUserInfoAndTokenSpy).toHaveBeenCalledWith({ code: GITHUB_TEST_CODE } as GithubLoginCredentials);
         expect(navigateToHomeSpy).toHaveBeenCalledWith();
     });
 });
diff --git a/src/app/auth/github-callback/github.callback.ts b/src/app/auth/github-callback/github.callback.ts
index 6d8fff6f7..85c2ddbb8 100644
--- a/src/app/auth/github-callback/github.callback.ts
+++ b/src/app/auth/github-callback/github.callback.ts
@@ -1,8 +1,9 @@
 import { NavigationService } from "./../../services/navigation.service";
 import { ChangeDetectionStrategy, Component, OnInit } from "@angular/core";
 import { ActivatedRoute, Params } from "@angular/router";
-import { AuthApi } from "../../api/auth.api";
 import { BaseComponent } from "src/app/common/base.component";
+import { LoginService } from "../login/login.service";
+import { GithubLoginCredentials } from "src/app/api/auth.api.model";
 
 @Component({
     selector: "app-github-callback",
@@ -10,7 +11,11 @@ import { BaseComponent } from "src/app/common/base.component";
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class GithubCallbackComponent extends BaseComponent implements OnInit {
-    constructor(private route: ActivatedRoute, private navigationService: NavigationService, private authApi: AuthApi) {
+    constructor(
+        private route: ActivatedRoute,
+        private navigationService: NavigationService,
+        private loginService: LoginService,
+    ) {
         super();
     }
 
@@ -20,9 +25,7 @@ export class GithubCallbackComponent extends BaseComponent implements OnInit {
         }
         this.trackSubscription(
             this.route.queryParams.subscribe((param: Params) => {
-                this.authApi
-                    .fetchUserInfoAndTokenFromGithubCallackCode(param.code as string)
-                    .subscribe(() => this.navigationService.navigateToHome());
+                this.loginService.githubLogin({ code: param.code as string } as GithubLoginCredentials);
             }),
         );
     }
diff --git a/src/app/auth/guards/login.guard.spec.ts b/src/app/auth/guards/login.guard.spec.ts
index 328e418f3..3f88aaa0d 100644
--- a/src/app/auth/guards/login.guard.spec.ts
+++ b/src/app/auth/guards/login.guard.spec.ts
@@ -4,7 +4,8 @@ import { ApolloTestingModule } from "apollo-angular/testing";
 import { LoginGuard } from "./login.guard";
 import { AppConfigService } from "src/app/app-config.service";
 import ProjectLinks from "src/app/project-links";
-import { AppConfigFeatureFlags } from "src/app/app-config.model";
+import { AppConfigFeatureFlags, LoginMethod } from "src/app/app-config.model";
+import { ActivatedRouteSnapshot, RouterStateSnapshot } from "@angular/router";
 
 describe("LoginGuard", () => {
     let guard: LoginGuard;
@@ -30,30 +31,32 @@ describe("LoginGuard", () => {
     [
         {
             route: ProjectLinks.URL_LOGIN,
-            featureFlags: { enableLogin: true, enableLogout: true },
+            featureFlags: { enableLogout: true, loginMethods: [LoginMethod.PASSWORD] },
             expectedResult: true,
         },
         {
             route: ProjectLinks.URL_LOGIN,
-            featureFlags: { enableLogin: false, enableLogout: true },
+            featureFlags: { enableLogout: true, loginMethods: [] },
             expectedResult: false,
         },
         {
             route: ProjectLinks.URL_SEARCH,
-            featureFlags: { enableLogin: true, enableLogout: true },
+            featureFlags: { enableLogout: true, loginMethods: [LoginMethod.PASSWORD] },
             expectedResult: true,
         },
         {
             route: ProjectLinks.URL_SEARCH,
-            featureFlags: { enableLogin: false, enableLogout: true },
+            featureFlags: { enableLogout: true, loginMethods: [] },
             expectedResult: true,
         },
     ].forEach((testCase: TestCase) => {
         it(`should check route ${testCase.route} with login ${
-            testCase.featureFlags.enableLogin ? "enabled" : "disabled"
+            testCase.featureFlags.loginMethods.length > 0 ? "enabled" : "disabled"
         }`, () => {
             spyOnProperty(appConfigService, "featureFlags", "get").and.returnValue(testCase.featureFlags);
-            const result = guard.canLoad({ path: testCase.route });
+            const result = guard.canActivate(new ActivatedRouteSnapshot(), {
+                url: "/" + testCase.route,
+            } as RouterStateSnapshot);
             expect(result).toEqual(testCase.expectedResult);
         });
     });
diff --git a/src/app/auth/guards/login.guard.ts b/src/app/auth/guards/login.guard.ts
index 6071f9a65..921c99777 100644
--- a/src/app/auth/guards/login.guard.ts
+++ b/src/app/auth/guards/login.guard.ts
@@ -1,6 +1,6 @@
 import { NavigationService } from "src/app/services/navigation.service";
 import { Injectable } from "@angular/core";
-import { CanLoad, Route } from "@angular/router";
+import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from "@angular/router";
 import { AppConfigService } from "src/app/app-config.service";
 import ProjectLinks from "src/app/project-links";
 import { LoggedUserService } from "../logged-user.service";
@@ -8,15 +8,16 @@ import { LoggedUserService } from "../logged-user.service";
 @Injectable({
     providedIn: "root",
 })
-export class LoginGuard implements CanLoad {
+export class LoginGuard implements CanActivate {
     constructor(
         private navigationService: NavigationService,
         private appConfigService: AppConfigService,
         private loggedUserService: LoggedUserService,
     ) {}
 
-    public canLoad(route: Route): boolean {
-        if (route.path === ProjectLinks.URL_LOGIN && !this.canLogin()) {
+    public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+        // URLs start from /
+        if (state.url.slice(1) === ProjectLinks.URL_LOGIN && !this.canLogin()) {
             this.navigationService.navigateToHome();
             return false;
         }
@@ -24,6 +25,6 @@ export class LoginGuard implements CanLoad {
     }
 
     private canLogin(): boolean {
-        return this.appConfigService.featureFlags.enableLogin && !this.loggedUserService.isAuthenticated;
+        return this.appConfigService.featureFlags.loginMethods.length > 0 && !this.loggedUserService.isAuthenticated;
     }
 }
diff --git a/src/app/auth/logged-user-service.spec.ts b/src/app/auth/logged-user-service.spec.ts
index 915f35b1f..2654ea2f8 100644
--- a/src/app/auth/logged-user-service.spec.ts
+++ b/src/app/auth/logged-user-service.spec.ts
@@ -20,6 +20,7 @@ import { first } from "rxjs/operators";
 import { MaybeNull } from "../common/app.types";
 import AppValues from "../common/app.values";
 import { AppConfigService } from "../app-config.service";
+import { GithubLoginCredentials, PasswordLoginCredentials } from "../api/auth.api.model";
 
 describe("LoggedUserService", () => {
     let controller: ApolloTestingController;
@@ -61,7 +62,9 @@ describe("LoggedUserService", () => {
         }
 
         function loginFullyViaGithub(): void {
-            authApi.fetchUserInfoAndTokenFromGithubCallackCode(TEST_GITHUB_CODE).subscribe();
+            authApi
+                .fetchUserInfoAndTokenFromGithubCallackCode({ code: TEST_GITHUB_CODE } as GithubLoginCredentials)
+                .subscribe();
 
             const op = controller.expectOne(LoginDocument);
             op.flush({
@@ -70,7 +73,12 @@ describe("LoggedUserService", () => {
         }
 
         function loginFullyViaPassword(): void {
-            authApi.fetchUserInfoAndTokenFromPasswordLogin(TEST_LOGIN, TEST_PASSWORD).subscribe();
+            authApi
+                .fetchUserInfoAndTokenFromPasswordLogin({
+                    login: TEST_LOGIN,
+                    password: TEST_PASSWORD,
+                } as PasswordLoginCredentials)
+                .subscribe();
 
             const op = controller.expectOne(LoginDocument);
             op.flush({
diff --git a/src/app/auth/login/login.component.html b/src/app/auth/login/login.component.html
index 26c2dbfd7..1a311ee91 100644
--- a/src/app/auth/login/login.component.html
+++ b/src/app/auth/login/login.component.html
@@ -1,34 +1,93 @@
-<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>
+<ng-container *ngIf="!selectedLoginMethod">
+    <div class="d-flex flex-column align-items-center login-container__buttons" data-test-id="method-selection-block">
+        <img [src]="APP_LOGO" class="logo" alt="Application logo" />
+        <h1 class="text-center text-muted mt-4">Select your Login Method</h1>
         <div class="inner-container">
-            <a href="{{ GITHUB_URL }}" class="login__btn" md-raised-button="primary">
+            <a
+                data-test-id="select-method-github"
+                (click)="onSelectedLoginMethod(LoginMethod.GITHUB)"
+                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>
+            <a
+                data-test-id="select-method-password"
+                (click)="onSelectedLoginMethod(LoginMethod.PASSWORD)"
+                class="login__btn"
+                md-raised-button="primary"
+            >
+                Login with Password
+            </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 *ngIf="selectedLoginMethod == LoginMethod.GITHUB" class="d-flex justify-content-center align-items-center">
+    <app-spinner data-test-id="github-spinner"></app-spinner>
+</div>
+<div
+    *ngIf="selectedLoginMethod == LoginMethod.PASSWORD"
+    class="d-flex justify-content-center flex-column container-form"
+    data-test-id="password-method-block"
+>
+    <img [src]="APP_LOGO" class="logo" alt="Application logo" />
+    <h1 class="text-center text-muted mt-4">Login to Kamu</h1>
+    <form [formGroup]="passwordLoginForm">
+        <div>
+            <label for="login" class="fs-12" [class.error-color]="passwordLoginError$ | async">Login</label>
+            <span class="text-danger">*</span><br />
+            <input
+                formControlName="login"
+                type="text"
+                class="form-control d-inline"
+                id="login"
+                data-test-id="input-login"
+                required
+                (keyup)="resetPasswordLoginError()"
+                [class.error-border-color]="passwordLoginError$ | async"
+            />
+            <div *ngIf="loginControl?.invalid && (loginControl?.touched || loginControl?.dirty)">
+                <span
+                    *ngIf="loginControl?.errors?.['required']"
+                    class="text-danger fs-12"
+                    data-test-id="input-login-error-required"
+                    >Login is required</span
+                >
             </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>
+        <div class="mt-4">
+            <label for="password" class="fs-12" [class.error-color]="passwordLoginError$ | async">Password</label>
+            <span class="text-danger">*</span><br />
+            <input
+                formControlName="password"
+                type="password"
+                class="form-control d-inline"
+                id="password"
+                data-test-id="input-password"
+                required
+                (keyup)="resetPasswordLoginError()"
+                [class.error-border-color]="passwordLoginError$ | async"
+            />
+            <div *ngIf="passwordControl?.invalid && (passwordControl?.touched || passwordControl?.dirty)">
+                <span
+                    *ngIf="passwordControl?.errors?.['required']"
+                    class="text-danger fs-12"
+                    data-test-id="input-password-error-required"
+                    >Password is required</span
+                >
             </div>
-            <button class="button-sigh-in mt-4">Sign in</button>
-        </form>
-    </div>
+        </div>
+        <button
+            [disabled]="passwordLoginForm.invalid"
+            data-test-id="submit-password"
+            (click)="onPasswordLogin()"
+            class="button-sign-in mt-4"
+        >
+            Login
+        </button>
+        <div *ngIf="passwordLoginError$ | async as passwordLoginError" class="mt-4">
+            <div class="error-block" data-test-id="password-method-error">{{ passwordLoginError }}</div>
+        </div>
+    </form>
 </div>
diff --git a/src/app/auth/login/login.component.sass b/src/app/auth/login/login.component.sass
index c128fb976..5092e7f8f 100644
--- a/src/app/auth/login/login.component.sass
+++ b/src/app/auth/login/login.component.sass
@@ -43,7 +43,7 @@ a
         border-radius: 6px
         padding: 20px
         background-color: #f6f8fa
-        .button-sigh-in
+        .button-sign-in
             color: $app-white
             background-color: #1f883d
             text-align: center
@@ -51,3 +51,31 @@ a
             border-radius: 6px
             padding: 8px 15px
             width: 100%
+
+
+.error-block
+    z-index: 10
+    display: inline-block
+    padding: 4px 8px
+    font-size: 12px
+    border-style: solid
+    border-width: 1px
+    border-radius: 6px
+    background: #ffebe9
+    border-color: rgba(255, 129, 130, 0.4)
+    position: relative
+    &::before
+        content: "\A"
+        border-style: solid
+        border-width: 5px 7px 5px 5px
+        border-color: transparent rgba(255, 129, 130, 0.4) transparent transparent
+        position: absolute
+        left: 15px
+        top: -10px
+        transform: rotate(90deg)
+
+.error-color
+    color: #CF222E
+
+.error-border-color
+    border-color: #dc3545
diff --git a/src/app/auth/login/login.component.spec.ts b/src/app/auth/login/login.component.spec.ts
index 5ae3f81e6..15551f583 100644
--- a/src/app/auth/login/login.component.spec.ts
+++ b/src/app/auth/login/login.component.spec.ts
@@ -1,21 +1,244 @@
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 
 import { LoginComponent } from "./login.component";
+import { ReactiveFormsModule } from "@angular/forms";
+import { Apollo } from "apollo-angular";
+import { ApolloTestingModule } from "apollo-angular/testing";
+import { AngularSvgIconModule } from "angular-svg-icon";
+import { HttpClientTestingModule } from "@angular/common/http/testing";
+import { AppConfigService } from "src/app/app-config.service";
+import { LoginMethod } from "src/app/app-config.model";
+import { SpinnerComponent } from "src/app/components/spinner/spinner/spinner.component";
+import { LoginService } from "./login.service";
+import {
+    checkInputDisabled,
+    checkVisible,
+    emitClickOnElementByDataTestId,
+    getElementByDataTestId,
+    setFieldValue,
+} from "src/app/common/base-test.helpers.spec";
+import { TEST_LOGIN, TEST_PASSWORD } from "src/app/api/mock/auth.mock";
+import { PasswordLoginCredentials } from "src/app/api/auth.api.model";
 
 describe("LoginComponent", () => {
     let component: LoginComponent;
     let fixture: ComponentFixture<LoginComponent>;
+    let appConfigService: AppConfigService;
+    let loginService: LoginService;
+
+    enum Elements {
+        METHOD_SELECTION_BLOCK = "method-selection-block",
+        GITHUB_SPINNER = "github-spinner",
+        PASSWORD_METHOD_BLOCK = "password-method-block",
+
+        SELECT_METHOD_GITHUB = "select-method-github",
+        SELECT_METHOD_PASSWORD = "select-method-password",
+
+        INPUT_LOGIN = "input-login",
+        INPUT_PASSWORD = "input-password",
+        SUBMIT_PASSWORD = "submit-password",
+
+        INPUT_LOGIN_ERROR_REQUIRED = "input-login-error-required",
+        INPUT_PASSWORD_ERROR_REQUIRED = "input-password-error-required",
+        PASSWORD_METHOD_ERROR = "password-method-error",
+    }
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            declarations: [LoginComponent],
+            declarations: [LoginComponent, SpinnerComponent],
+            providers: [Apollo],
+            imports: [
+                ApolloTestingModule,
+                ReactiveFormsModule,
+                AngularSvgIconModule.forRoot(),
+                HttpClientTestingModule,
+            ],
         }).compileComponents();
+
+        loginService = TestBed.inject(LoginService);
+    });
+
+    function createFixture() {
         fixture = TestBed.createComponent(LoginComponent);
         component = fixture.componentInstance;
         fixture.detectChanges();
+    }
+
+    describe("Main test suite", () => {
+        beforeEach(() => {
+            appConfigService = TestBed.inject(AppConfigService);
+            spyOnProperty(appConfigService, "featureFlags", "get").and.returnValue({
+                enableLogout: true,
+                loginMethods: [LoginMethod.GITHUB, LoginMethod.PASSWORD],
+            });
+
+            createFixture();
+        });
+
+        it("should create", () => {
+            expect(component).toBeTruthy();
+        });
+
+        it("should not select any method with 2 login methods allowed", () => {
+            expect(component.selectedLoginMethod).toBeUndefined();
+
+            checkVisible(fixture, Elements.METHOD_SELECTION_BLOCK, true);
+            checkVisible(fixture, Elements.GITHUB_SPINNER, false);
+            checkVisible(fixture, Elements.PASSWORD_METHOD_BLOCK, false);
+        });
+
+        it("select Github method should redirect to Github endpoint and show spinner", () => {
+            const spyGotoGithub = spyOn(LoginService, "gotoGithub").and.stub();
+
+            emitClickOnElementByDataTestId(fixture, Elements.SELECT_METHOD_GITHUB);
+            fixture.detectChanges();
+
+            checkVisible(fixture, Elements.METHOD_SELECTION_BLOCK, false);
+            checkVisible(fixture, Elements.GITHUB_SPINNER, true);
+            checkVisible(fixture, Elements.PASSWORD_METHOD_BLOCK, false);
+
+            expect(spyGotoGithub).toHaveBeenCalledTimes(1);
+        });
+
+        it("Select password method should switch on the password block and disable selection", () => {
+            emitClickOnElementByDataTestId(fixture, Elements.SELECT_METHOD_PASSWORD);
+            fixture.detectChanges();
+
+            checkVisible(fixture, Elements.METHOD_SELECTION_BLOCK, false);
+            checkVisible(fixture, Elements.GITHUB_SPINNER, false);
+            checkVisible(fixture, Elements.PASSWORD_METHOD_BLOCK, true);
+        });
+
+        describe("Password login method", () => {
+            beforeEach(() => {
+                emitClickOnElementByDataTestId(fixture, Elements.SELECT_METHOD_PASSWORD);
+                fixture.detectChanges();
+            });
+
+            it("Submit good password login form", () => {
+                const loginServicePasswordSubmit = spyOn(loginService, "passwordLogin").and.stub();
+
+                setFieldValue(fixture, Elements.INPUT_LOGIN, TEST_LOGIN);
+                setFieldValue(fixture, Elements.INPUT_PASSWORD, TEST_PASSWORD);
+                fixture.detectChanges();
+
+                checkInputDisabled(fixture, Elements.SUBMIT_PASSWORD, false);
+                expect(component.passwordLoginForm.valid).toBeTrue();
+
+                emitClickOnElementByDataTestId(fixture, Elements.SUBMIT_PASSWORD);
+
+                expect(loginServicePasswordSubmit).toHaveBeenCalledOnceWith({
+                    login: TEST_LOGIN,
+                    password: TEST_PASSWORD,
+                } as PasswordLoginCredentials);
+            });
+
+            it("Missing login or password leads to disable submit", () => {
+                checkInputDisabled(fixture, Elements.SUBMIT_PASSWORD, true);
+                expect(component.passwordLoginForm.valid).toBeFalse();
+
+                setFieldValue(fixture, Elements.INPUT_LOGIN, TEST_LOGIN);
+                fixture.detectChanges();
+
+                checkInputDisabled(fixture, Elements.SUBMIT_PASSWORD, true);
+                expect(component.passwordLoginForm.valid).toBeFalse();
+
+                setFieldValue(fixture, Elements.INPUT_PASSWORD, TEST_PASSWORD);
+                fixture.detectChanges();
+
+                checkInputDisabled(fixture, Elements.SUBMIT_PASSWORD, false);
+                expect(component.passwordLoginForm.valid).toBeTrue();
+            });
+
+            [
+                [Elements.INPUT_LOGIN, Elements.INPUT_LOGIN_ERROR_REQUIRED],
+                [Elements.INPUT_PASSWORD, Elements.INPUT_PASSWORD_ERROR_REQUIRED],
+            ].forEach(([inputElementName, inputErrorElementName]: Elements[]) => {
+                it(`Test touching element '${Elements.INPUT_LOGIN}' creates required error`, () => {
+                    checkVisible(fixture, inputErrorElementName, false);
+
+                    setFieldValue(fixture, inputElementName, "");
+                    fixture.detectChanges();
+
+                    checkVisible(fixture, inputErrorElementName, true);
+                });
+            });
+
+            it("Service emits an error during password login", () => {
+                checkVisible(fixture, Elements.PASSWORD_METHOD_ERROR, false);
+
+                const errorMessage = "Bad credentials";
+                loginService.emitPasswordLoginError(errorMessage);
+                fixture.detectChanges();
+
+                checkVisible(fixture, Elements.PASSWORD_METHOD_ERROR, true);
+            });
+
+            [Elements.INPUT_LOGIN, Elements.INPUT_PASSWORD].forEach((inputElemenName: Elements) => {
+                it(`Error is cleared after touching input ${inputElemenName}`, () => {
+                    const errorMessage = "Bad credentials";
+                    loginService.emitPasswordLoginError(errorMessage);
+                    fixture.detectChanges();
+
+                    checkVisible(fixture, Elements.PASSWORD_METHOD_ERROR, true);
+
+                    const inputElement: HTMLInputElement = getElementByDataTestId(
+                        fixture,
+                        inputElemenName,
+                    ) as HTMLInputElement;
+                    inputElement.dispatchEvent(new KeyboardEvent("keyup", { key: " " }));
+
+                    fixture.detectChanges();
+
+                    checkVisible(fixture, Elements.PASSWORD_METHOD_ERROR, false);
+                });
+            });
+        });
+    });
+
+    [LoginMethod.GITHUB, LoginMethod.PASSWORD].forEach((loginMethod: LoginMethod) => {
+        describe("One-method-config", () => {
+            let spyGotoGithub: jasmine.Spy;
+
+            beforeEach(() => {
+                appConfigService = TestBed.inject(AppConfigService);
+                spyOnProperty(appConfigService, "featureFlags", "get").and.returnValue({
+                    enableLogout: true,
+                    loginMethods: [loginMethod],
+                });
+
+                spyGotoGithub = spyOn(LoginService, "gotoGithub").and.stub();
+
+                createFixture();
+            });
+
+            it("should auto-select the only available method", () => {
+                expect(component.selectedLoginMethod).toEqual(loginMethod);
+
+                switch (loginMethod) {
+                    case LoginMethod.GITHUB:
+                        expect(spyGotoGithub).toHaveBeenCalledTimes(1);
+                        break;
+
+                    case LoginMethod.PASSWORD:
+                        expect(spyGotoGithub).not.toHaveBeenCalled();
+                        break;
+                }
+            });
+        });
     });
 
-    it("should create", () => {
-        expect(component).toBeTruthy();
+    describe("Zero-method-config", () => {
+        beforeEach(() => {
+            appConfigService = TestBed.inject(AppConfigService);
+            spyOnProperty(appConfigService, "featureFlags", "get").and.returnValue({
+                enableLogout: true,
+                loginMethods: [],
+            });
+        });
+
+        it("component should throw error", () => {
+            expect(() => createFixture()).toThrow(new Error(LoginComponent.ERROR_ZERO_METHODS_IN_CONFIG));
+        });
     });
 });
diff --git a/src/app/auth/login/login.component.ts b/src/app/auth/login/login.component.ts
index 2adb549f5..a9ccc974c 100644
--- a/src/app/auth/login/login.component.ts
+++ b/src/app/auth/login/login.component.ts
@@ -1,6 +1,13 @@
 import { ChangeDetectionStrategy, Component, OnInit } from "@angular/core";
 import ProjectLinks from "src/app/project-links";
 import AppValues from "src/app/common/app.values";
+import { AppConfigService } from "src/app/app-config.service";
+import { AppConfigFeatureFlags, LoginMethod } from "src/app/app-config.model";
+import { LoginService } from "./login.service";
+import { AbstractControl, FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { PasswordLoginCredentials } from "src/app/api/auth.api.model";
+import { MaybeNull } from "src/app/common/app.types";
+import { Observable, shareReplay } from "rxjs";
 
 @Component({
     selector: "app-login",
@@ -9,18 +16,65 @@ import AppValues from "src/app/common/app.values";
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 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 static readonly ERROR_ZERO_METHODS_IN_CONFIG =
+        "LoginComponent requires at least 1 login method in configuration";
+
+    readonly GITHUB_URL = ProjectLinks.GITHUB_URL;
+    public readonly APP_LOGO = `/${AppValues.APP_LOGO}`;
+    public readonly LoginMethod = LoginMethod;
+
+    public selectedLoginMethod?: LoginMethod = undefined;
+    public passwordLoginForm: FormGroup;
+    public passwordLoginError$: Observable<string> = this.loginService.errorPasswordLogin.pipe(shareReplay());
+
+    public constructor(
+        private fb: FormBuilder,
+        private appConfigService: AppConfigService,
+        private loginService: LoginService,
+    ) {
+        this.passwordLoginForm = this.fb.group({
+            login: [
+                "",
+                // eslint-disable-next-line @typescript-eslint/unbound-method
+                [Validators.required],
+            ],
+            password: [
+                "",
+                // eslint-disable-next-line @typescript-eslint/unbound-method
+                [Validators.required],
+            ],
+        });
+    }
+
+    public ngOnInit(): void {
+        const featureFlags: AppConfigFeatureFlags = this.appConfigService.featureFlags;
+        if (featureFlags.loginMethods.length === 1) {
+            this.onSelectedLoginMethod(featureFlags.loginMethods[0]);
+        } else if (featureFlags.loginMethods.length === 0) {
+            throw new Error(LoginComponent.ERROR_ZERO_METHODS_IN_CONFIG);
+        }
+    }
+
+    public get loginControl(): MaybeNull<AbstractControl> {
+        return this.passwordLoginForm.get("login");
+    }
+
+    public get passwordControl(): MaybeNull<AbstractControl> {
+        return this.passwordLoginForm.get("password");
+    }
+
+    public onSelectedLoginMethod(loginMethod: LoginMethod): void {
+        this.selectedLoginMethod = loginMethod;
+        if (loginMethod === LoginMethod.GITHUB) {
+            LoginService.gotoGithub();
         }
     }
 
-    public clickLogin(): void {
-        this.showFormLogin = true;
+    public onPasswordLogin(): void {
+        this.loginService.passwordLogin(this.passwordLoginForm.value as PasswordLoginCredentials);
+    }
+
+    public resetPasswordLoginError(): void {
+        this.loginService.resetPasswordLoginError();
     }
 }
diff --git a/src/app/auth/login/login.service.spec.ts b/src/app/auth/login/login.service.spec.ts
new file mode 100644
index 000000000..8dc83ba10
--- /dev/null
+++ b/src/app/auth/login/login.service.spec.ts
@@ -0,0 +1,79 @@
+import { TestBed } from "@angular/core/testing";
+import { AuthApi } from "src/app/api/auth.api";
+import { NavigationService } from "src/app/services/navigation.service";
+import { LoginService } from "./login.service";
+import { Apollo } from "apollo-angular";
+import { ApolloTestingModule } from "apollo-angular/testing";
+import { Subscription, first, of, throwError } from "rxjs";
+import { TEST_GITHUB_CODE, TEST_LOGIN, TEST_PASSWORD } from "src/app/api/mock/auth.mock";
+import { GithubLoginCredentials, PasswordLoginCredentials } from "src/app/api/auth.api.model";
+import { AuthenticationError } from "src/app/common/errors";
+
+describe("LoginService", () => {
+    let service: LoginService;
+    let navigationService: NavigationService;
+    let authApi: AuthApi;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [AuthApi, Apollo],
+            imports: [ApolloTestingModule],
+        });
+        service = TestBed.inject(LoginService);
+        navigationService = TestBed.inject(NavigationService);
+        authApi = TestBed.inject(AuthApi);
+    });
+
+    it("should be created", () => {
+        expect(service).toBeTruthy();
+    });
+
+    it("succesful Github login navigates to home", () => {
+        const authApiSpy = spyOn(authApi, "fetchUserInfoAndTokenFromGithubCallackCode").and.returnValue(of(void {}));
+        const navigateSpy = spyOn(navigationService, "navigateToHome");
+
+        const credentials: GithubLoginCredentials = { code: TEST_GITHUB_CODE };
+        service.githubLogin(credentials);
+
+        expect(authApiSpy).toHaveBeenCalledOnceWith(credentials);
+        expect(navigateSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it("succesful password login navigates to home", () => {
+        const authApiSpy = spyOn(authApi, "fetchUserInfoAndTokenFromPasswordLogin").and.returnValue(of(void {}));
+        const navigateSpy = spyOn(navigationService, "navigateToHome");
+
+        const credentials: PasswordLoginCredentials = { login: TEST_LOGIN, password: TEST_PASSWORD };
+        service.passwordLogin(credentials);
+
+        expect(authApiSpy).toHaveBeenCalledOnceWith(credentials);
+        expect(navigateSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it("failed password login emits an error", () => {
+        const errorText = "Rejected credentials";
+        const authApiSpy = spyOn(authApi, "fetchUserInfoAndTokenFromPasswordLogin").and.returnValue(
+            throwError(() => new AuthenticationError([new Error(errorText)])),
+        );
+
+        const errorSubscription$: Subscription = service.errorPasswordLogin.pipe(first()).subscribe((e: string) => {
+            expect(e).toEqual(errorText);
+        });
+
+        const credentials: PasswordLoginCredentials = { login: TEST_LOGIN, password: TEST_PASSWORD };
+        service.passwordLogin(credentials);
+
+        expect(authApiSpy).toHaveBeenCalledOnceWith(credentials);
+        expect(errorSubscription$.closed).toBeTrue();
+    });
+
+    it("reseting password login error emits empty error", () => {
+        const errorSubscription$: Subscription = service.errorPasswordLogin.pipe(first()).subscribe((e: string) => {
+            expect(e).toEqual("");
+        });
+
+        service.resetPasswordLoginError();
+
+        expect(errorSubscription$.closed).toBeTrue();
+    });
+});
diff --git a/src/app/auth/login/login.service.ts b/src/app/auth/login/login.service.ts
index 3ec5367f7..6dcb26dda 100644
--- a/src/app/auth/login/login.service.ts
+++ b/src/app/auth/login/login.service.ts
@@ -1,11 +1,51 @@
 import { Injectable } from "@angular/core";
+import { Observable, Subject } from "rxjs";
+import { AuthApi } from "src/app/api/auth.api";
+import { GithubLoginCredentials, PasswordLoginCredentials } from "src/app/api/auth.api.model";
+import { AuthenticationError } from "src/app/common/errors";
 import ProjectLinks from "src/app/project-links";
+import { NavigationService } from "src/app/services/navigation.service";
 
 @Injectable({
     providedIn: "root",
 })
 export class LoginService {
+    public constructor(private authApi: AuthApi, private navigationService: NavigationService) {}
+
+    private errorPasswordLogin$: Subject<string> = new Subject<string>();
+
+    public get errorPasswordLogin(): Observable<string> {
+        return this.errorPasswordLogin$.asObservable();
+    }
+
+    public emitPasswordLoginError(errorText: string): void {
+        this.errorPasswordLogin$.next(errorText);
+    }
+
     public static gotoGithub(): void {
         window.location.href = ProjectLinks.GITHUB_URL;
     }
+
+    public githubLogin(credentials: GithubLoginCredentials) {
+        this.authApi
+            .fetchUserInfoAndTokenFromGithubCallackCode(credentials)
+            .subscribe(() => this.navigationService.navigateToHome());
+    }
+
+    public passwordLogin(credentials: PasswordLoginCredentials) {
+        this.authApi.fetchUserInfoAndTokenFromPasswordLogin(credentials).subscribe({
+            next: () => this.navigationService.navigateToHome(),
+            error: (e) => {
+                if (e instanceof AuthenticationError) {
+                    this.emitPasswordLoginError(e.compactMessage);
+                } else {
+                    throw e;
+                }
+            },
+        });
+    }
+
+    public resetPasswordLoginError(): void {
+        this.errorPasswordLogin$.next("");
+    }
 }
diff --git a/src/app/common/base-test.helpers.spec.ts b/src/app/common/base-test.helpers.spec.ts
index f75e006d1..88255a9ec 100644
--- a/src/app/common/base-test.helpers.spec.ts
+++ b/src/app/common/base-test.helpers.spec.ts
@@ -40,6 +40,35 @@ export function getElementByDataTestId<T>(fixture: ComponentFixture<T>, id: stri
     throw new Error("Element " + id + " not found");
 }
 
+export function checkVisible<T>(fixture: ComponentFixture<T>, dataTestId: string, visible: boolean): void {
+    const element: HTMLElement | undefined = findElementByDataTestId(fixture, dataTestId);
+    visible ? expect(element).toBeTruthy() : expect(element).toBeUndefined();
+}
+
+type SupportedInputElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+
+function setFieldElementValue(element: SupportedInputElement, value: string): void {
+    element.value = value;
+    element.dispatchEvent(new Event("input"));
+    // Dispatch an `input` or `change` fake event
+    // so Angular form bindings take notice of the change.
+    const isSelect = element instanceof HTMLSelectElement;
+    const event: Event = new Event(isSelect ? "change" : "input", { bubbles: !isSelect } as EventInit);
+    element.dispatchEvent(event);
+}
+
+export function setFieldValue<T>(fixture: ComponentFixture<T>, dataTestId: string, value: string): void {
+    const element: SupportedInputElement = getElementByDataTestId(fixture, dataTestId) as SupportedInputElement;
+    expect(element).not.toBeNull();
+    setFieldElementValue(element, value);
+}
+
+export function checkInputDisabled<T>(fixture: ComponentFixture<T>, dataTestId: string, isDisabled: boolean): void {
+    const element: HTMLInputElement | null = getElementByDataTestId(fixture, dataTestId) as HTMLInputElement;
+    expect(element).not.toBeNull();
+    expect(element.disabled).toEqual(isDisabled);
+}
+
 export const routerMockEventSubject = new ReplaySubject<RouterEvent>(1);
 
 export const routerMock = {
diff --git a/src/app/common/errors.ts b/src/app/common/errors.ts
index 5ea7d9db6..6025af7e0 100644
--- a/src/app/common/errors.ts
+++ b/src/app/common/errors.ts
@@ -51,6 +51,12 @@ export class AuthenticationError extends KamuError {
     public accept(visitor: KamuErrorVisitor): void {
         visitor.visitAuthenticationError(this);
     }
+
+    public get compactMessage(): string {
+        return this.errors
+            .map((e) => e.message)
+            .reduce((previousValue, currentValue) => previousValue + ". " + currentValue);
+    }
 }
 
 interface KamuErrorVisitor {
diff --git a/src/app/components/app-header/app-header.component.html b/src/app/components/app-header/app-header.component.html
index 2f68f32eb..20ac0a22c 100644
--- a/src/app/components/app-header/app-header.component.html
+++ b/src/app/components/app-header/app-header.component.html
@@ -99,7 +99,7 @@
                     Explore
                 </a>
 
-                <ng-template [ngIf]="!isUserLoggedIn() && featureFlags.enableLogin">
+                <ng-template [ngIf]="!isUserLoggedIn() && featureFlags.loginMethods.length > 0">
                     <a
                         class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                         data-test-id="loginHeader"
@@ -234,7 +234,7 @@
 
                     <div role="none" class="dropdown-divider"></div>
 
-                    <ng-template [ngIf]="!isUserLoggedIn() && featureFlags.enableLogin">
+                    <ng-template [ngIf]="!isUserLoggedIn() && featureFlags.loginMethods.length > 0">
                         <button mat-menu-item data-test-id="openLogin" (click)="onLogin()">Login</button>
                     </ng-template>
 
diff --git a/src/app/components/app-header/app-header.component.spec.ts b/src/app/components/app-header/app-header.component.spec.ts
index 8f121e0b8..5b298218c 100644
--- a/src/app/components/app-header/app-header.component.spec.ts
+++ b/src/app/components/app-header/app-header.component.spec.ts
@@ -32,6 +32,7 @@ import { NotificationIndicatorComponent } from "../notification-indicator/notifi
 import { AngularSvgIconModule } from "angular-svg-icon";
 import { HttpClientTestingModule } from "@angular/common/http/testing";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { LoginMethod } from "src/app/app-config.model";
 
 describe("AppHeaderComponent", () => {
     let component: AppHeaderComponent;
@@ -79,7 +80,10 @@ describe("AppHeaderComponent", () => {
             login: "",
             name: AppValues.DEFAULT_USERNAME,
         };
-        component.featureFlags = { enableLogin: true, enableLogout: true };
+        component.featureFlags = {
+            enableLogout: true,
+            loginMethods: [LoginMethod.GITHUB, LoginMethod.PASSWORD],
+        };
         component.isVisible = true;
         component.isMobileView = false;
         fixture.detectChanges();
@@ -152,7 +156,7 @@ describe("AppHeaderComponent", () => {
     it("should not have Login link when login feature is disabled", () => {
         component.featureFlags = {
             ...component.featureFlags,
-            enableLogin: false,
+            loginMethods: [],
         };
         fixture.detectChanges();
 
@@ -306,7 +310,7 @@ describe("AppHeaderComponent", () => {
         it("should not have Login link menu when login feature is disabled", () => {
             component.featureFlags = {
                 ...component.featureFlags,
-                enableLogin: false,
+                loginMethods: [],
             };
             fixture.detectChanges();
 
diff --git a/src/app/dataset-view/additional-components/settings-component/settings.component.ts b/src/app/dataset-view/additional-components/settings-component/settings.component.ts
index c3e131281..5bd0218e8 100644
--- a/src/app/dataset-view/additional-components/settings-component/settings.component.ts
+++ b/src/app/dataset-view/additional-components/settings-component/settings.component.ts
@@ -1,10 +1,11 @@
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { AbstractControl, FormBuilder, FormGroup, Validators } from "@angular/forms";
 import { DatasetSettingsService } from "./services/dataset-settings.service";
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from "@angular/core";
 import { DatasetBasicsFragment } from "src/app/api/kamu.graphql.interface";
 import { promiseWithCatch } from "src/app/common/app.helpers";
 import { BaseComponent } from "src/app/common/base.component";
 import { ModalService } from "src/app/components/modal/modal.service";
+import { MaybeNull } from "src/app/common/app.types";
 
 @Component({
     selector: "app-settings-tab",
@@ -41,7 +42,7 @@ export class SettingsTabComponent extends BaseComponent implements OnInit {
         );
     }
 
-    public get datasetName() {
+    public get datasetName(): MaybeNull<AbstractControl> {
         return this.renameDatasetForm.get("datasetName");
     }
 
diff --git a/src/assets/runtime-config.json b/src/assets/runtime-config.json
index 611452b1c..0a79abcee 100644
--- a/src/assets/runtime-config.json
+++ b/src/assets/runtime-config.json
@@ -1,7 +1,10 @@
 {
     "apiServerGqlUrl": "http://localhost:8080/graphql",
     "featureFlags": {
-        "enableLogin": true,
-        "enableLogout": true
+        "enableLogout": true,
+        "loginMethods": [
+            "password",
+            "oauth_github"
+        ]
     }
 }
\ No newline at end of file