login view

Frontend/src/app/app-routing.module.ts

@@ -1,12 +1,17 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { LoginPageComponent } from './components/login-page/login-page.component';
 import { MainViewComponent } from './main-view/main-view.component';
 
 const routes: Routes = [
   {
     path: '',
-    component: MainViewComponent,
+    component: LoginPageComponent,
   },
+  {
+    path: 'app',
+    component: MainViewComponent
+  }
 ];
 
 @NgModule({

Frontend/src/app/app.module.ts

@@ -6,11 +6,13 @@ import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MainViewComponent } from './main-view/main-view.component';
 import { MaterialModule } from './material.module';
+import { LoginPageComponent } from './components/login-page/login-page.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    MainViewComponent
+    MainViewComponent,
+    LoginPageComponent
   ],
   imports: [
     BrowserModule,

Frontend/src/app/components/login-page/login-page.component.html

@@ -0,0 +1,10 @@
+<div class="logo"></div>
+<div class="bg">
+    <div class="container">
+        <mat-card appearance="outlined" class="form">
+            <mat-card-content>
+                Zaloguj z Google
+            </mat-card-content>
+        </mat-card>
+    </div>
+</div>

Frontend/src/app/components/login-page/login-page.component.scss

@@ -0,0 +1,47 @@
+.bg {
+    background-image: url("../../../assets/bg.jpg");
+    height: 70vh;
+    background-size: cover;
+    padding-top: 30vh;
+}
+.container {
+    width: 30%;
+    display: block;
+    margin: auto;
+}
+.form {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.logo {
+    background-image: url('../../../assets/logo.png');
+    background-size: cover;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: 250px;
+    height: 250px;
+    opacity: 0.6;
+  }
+
+/* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
+mat-card-content {
+    width: 90%;
+}
+mat-form-field {
+    width: 100%;
+}
+.user {
+    text-align: right;
+}
+.load {
+    text-align: center;
+}
+/* for mobile */
+@media screen and (max-width: 700px) {
+    .container {
+        width: 90%;
+    }
+}

Frontend/src/app/components/login-page/login-page.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginPageComponent } from './login-page.component';
+
+describe('LoginPageComponent', () => {
+  let component: LoginPageComponent;
+  let fixture: ComponentFixture<LoginPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LoginPageComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LoginPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Frontend/src/app/components/login-page/login-page.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-login-page',
+  templateUrl: './login-page.component.html',
+  styleUrls: ['./login-page.component.scss']
+})
+export class LoginPageComponent {
+
+}