socialnetworknews-web

commit 5f5e2051e5379456926e97fb2f7119f437aee29b
parent 02cb0bdc90853bd65839c886f6afd5dce6b20b51
Author: MTRNord <mtrnord1@gmail.com>
Date:   Sat, 31 Mar 2018 17:58:05 +0200

Add Login Page (WIP)

Diffstat:
M
src/app/app.module.ts
 | 
2
++
M
src/app/app.routing.ts
 | 
5
+++++
A
src/app/login/login.component.html
 | 
7
+++++++
A
src/app/login/login.component.scss
 | 
129
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
A
src/app/login/login.component.spec.ts
 | 
25
+++++++++++++++++++++++++
A
src/app/login/login.component.ts
 | 
15
+++++++++++++++

6 files changed, 183 insertions(+), 0 deletions(-)
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -25,6 +25,7 @@ import { CardComponent } from './card/card.component';
 import {NgHttpLoaderModule} from 'ng-http-loader/ng-http-loader.module';
 import {Lightbox} from './utils/lightbox';
 import {LinkifyPipe} from './utils/linkifier';
+import { LoginComponent } from './login/login.component';
 Raven
   .config('https://b760c9f9035c472998ada3a02dcc81d3@sentry.io/294520', {
     environment: 'development',
@@ -54,6 +55,7 @@ export class RavenErrorHandler implements ErrorHandler {
     SpinnerComponent,
     CardComponent,
     LinkifyPipe,
+    LoginComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({appId: 'snn-app'}),
diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts
@@ -3,6 +3,7 @@ import {MainComponent} from './main/main.component';
 import {NgModule} from '@angular/core';
 import {PaperComponent} from './paper/paper.component';
 import {PapersComponent} from './papers/papers.component';
+import {LoginComponent} from './login/login.component';
 
 const routes: Routes = [
   {
@@ -17,6 +18,10 @@ const routes: Routes = [
     path: 'papers',
     component: PapersComponent,
   },
+  {
+    path: 'login',
+    component: LoginComponent,
+  },
 ];
 
 @NgModule({
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
@@ -0,0 +1,7 @@
+<main>
+  <div class="login-box">
+    <h2>Login</h2>
+    <a href="#" class="social-button" id="google-connect"> <span>Connect with Google (Not Implemented)</span></a>
+    <a href="/api/login/twitter" class="social-button" id="twitter-connect"> <span>Connect with Twitter</span></a>
+  </div>
+</main>
diff --git a/src/app/login/login.component.scss b/src/app/login/login.component.scss
@@ -0,0 +1,129 @@
+body {
+  background: #4688F1;
+  padding: 0;
+  margin: 0;
+}
+
+.login-box {
+  background: #fff;
+  padding: 20px;
+  max-width: 480px;
+  margin: 25vh auto;
+  text-align: center;
+  letter-spacing: 1px;
+  position: relative;
+}
+
+.login-box:hover {
+  box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+}
+
+.login-box h2 {
+  margin: 20px 0 20px;
+  padding: 0;
+  text-transform: uppercase;
+  color: #4688F1;
+}
+
+.social-button {
+  background-position: 25px 0px;
+  box-sizing: border-box;
+  color: rgb(255, 255, 255);
+  cursor: pointer;
+  display: inline-block;
+  height: 50px;
+  line-height: 50px;
+  text-align: left;
+  text-decoration: none;
+  text-transform: uppercase;
+  vertical-align: middle;
+  width: 100%;
+  border-radius: 3px;
+  margin: 10px auto;
+  outline: rgb(255, 255, 255) none 0px;
+  padding-left: 20%;
+  transition: all 0.2s cubic-bezier(0.72, 0.01, 0.56, 1) 0s;
+  -webkit-transition: all .3s ease;
+  -moz-transition: all .3s ease;
+  -ms-transition: all .3s ease;
+  -o-transition: all .3s ease;
+  transition: all .3s ease;
+}
+
+#google-connect {
+  background: rgb(255, 255, 255) url('https://eswarasai.com/projects/social-login/img/google-plus.png') no-repeat scroll 5px 0px / 50px 50px padding-box border-box;
+  border: 1px solid rgb(220, 74, 61);
+}
+
+#google-connect:hover {
+  border-color: rgb(220, 74, 61);
+  background: rgb(220, 74, 61) url('https://eswarasai.com/projects/social-login/img/google-plus-white.png') no-repeat scroll 5px 0px / 50px 50px padding-box border-box;
+  -webkit-transition: all .8s ease-out;
+  -moz-transition: all .3s ease;
+  -ms-transition: all .3s ease;
+  -o-transition: all .3s ease;
+  transition: all .3s ease-out;
+}
+
+#google-connect span {
+  box-sizing: border-box;
+  color: rgb(220, 74, 61);
+  cursor: pointer;
+  text-align: center;
+  text-transform: uppercase;
+  border: 0px none rgb(220, 74, 61);
+  outline: rgb(255, 255, 255) none 0px;
+  -webkit-transition: all .3s ease;
+  -moz-transition: all .3s ease;
+  -ms-transition: all .3s ease;
+  -o-transition: all .3s ease;
+  transition: all .3s ease;
+}
+
+#google-connect:hover span {
+  color: #FFF;
+  -webkit-transition: all .3s ease;
+  -moz-transition: all .3s ease;
+  -ms-transition: all .3s ease;
+  -o-transition: all .3s ease;
+  transition: all .3s ease;
+}
+
+#twitter-connect {
+  background: rgb(255, 255, 255) url('https://eswarasai.com/projects/social-login/img/twitter.png') no-repeat scroll 5px 1px / 45px 45px padding-box border-box;
+  border: 1px solid rgb(85, 172, 238);
+}
+
+#twitter-connect:hover {
+  border-color: rgb(85, 172, 238);
+  background: rgb(85, 172, 238) url('https://eswarasai.com/projects/social-login/img/twitter-white.png') no-repeat scroll 5px 1px / 45px 45px padding-box border-box;
+  -webkit-transition: all .8s ease-out;
+  -moz-transition: all .3s ease;
+  -ms-transition: all .3s ease;
+  -o-transition: all .3s ease;
+  transition: all .3s ease-out;
+}
+
+#twitter-connect span {
+  box-sizing: border-box;
+  color: rgb(85, 172, 238);
+  cursor: pointer;
+  text-align: center;
+  text-transform: uppercase;
+  border: 0px none rgb(220, 74, 61);
+  outline: rgb(255, 255, 255) none 0px;
+  -webkit-transition: all .3s ease;
+  -moz-transition: all .3s ease;
+  -ms-transition: all .3s ease;
+  -o-transition: all .3s ease;
+  transition: all .3s ease;
+}
+
+#twitter-connect:hover span {
+  color: #FFF;
+  -webkit-transition: all .3s ease;
+  -moz-transition: all .3s ease;
+  -ms-transition: all .3s ease;
+  -o-transition: all .3s ease;
+  transition: all .3s ease;
+}
diff --git a/src/app/login/login.component.spec.ts b/src/app/login/login.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoginComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss']
+})
+export class LoginComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}