Commit d1dfe580 authored by saliou673's avatar saliou673
Browse files

[FRONT] add login page template

parent fa6ef3a5
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { MessagetestComponent } from './messagetest/messagetest.component';
import { NotfoundComponent } from './notfound/notfound.component';
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'test', component: MessagetestComponent },
{ path: 'login', component: LoginComponent},
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: '**', component: NotfoundComponent },
];
......
<app-header></app-header>
<app-header *ngIf="currentRoute !='login' && currentRoute != 'signup'"></app-header>
<router-outlet></router-outlet>
\ No newline at end of file
import { Component } from '@angular/core';
import {Stomp} from '@stomp/stompjs';
import * as SockJS from 'sockjs-client';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
......@@ -10,4 +9,12 @@ import * as SockJS from 'sockjs-client';
export class AppComponent {
title = 'Web Socket Test';
description = 'Middleware Project';
currentRoute: string = '';
constructor(private router: Router){
console.log(router.url);
router.events.subscribe(event =>
{
this.currentRoute = this.router.url.replace('/', '');
});
}
}
......@@ -11,6 +11,7 @@ import { HomeComponent } from './home/home.component';
import { NotfoundComponent } from './notfound/notfound.component';
import { MessagetestComponent } from './messagetest/messagetest.component';
import { HeaderComponent } from './header/header.component';
import { LoginComponent } from './login/login.component';
@NgModule({
declarations: [
......@@ -21,7 +22,8 @@ import { HeaderComponent } from './header/header.component';
HomeComponent,
NotfoundComponent,
MessagetestComponent,
HeaderComponent
HeaderComponent,
LoginComponent
],
imports: [
BrowserModule,
......
......@@ -12,6 +12,7 @@
<ul class="nav navbar-nav navbar-right">
<li><a routerLink="/home" routerLinkActive="active">Home</a></li>
<li><a routerLink="/test" routerLinkActive="active">Test socket</a></li>
<li><a routerLink="/login" routerLinkActive="active">Se connecter</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
......
html {
background: #FF7361;
/*
background: radial-gradient(#fff176, #f57f17);
min-height: 100%;
*/
font-family: "Roboto", sans-serif;
}
.title {
text-transform: uppercase;
text-align: center;
margin-bottom: 30px;
color: #FF7361;
font-weight: 300;
font-size: 24px;
letter-spacing: 1px;
}
.description {
text-align: center;
color: #666;
margin-bottom: 30px;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="con-password"]
{
padding: 10px 20px;
border: 1px solid #999;
border-radius: 3px;
display: block;
width: 100%;
margin-bottom: 20px;
box-sizing: border-box;
outline: none;
}
input[type="text"]:focus,
input[type="email"]:focus {
border-color: #FF7361;
}
input[type="radio"] {
margin-right: 10px;
}
label {
margin-bottom: 20px;
display: block;
font-size: 18px;
color: #666;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 20px 0;
cursor: pointer;
}
label:first-child {
margin-bottom: 0;
border-bottom: none;
}
.button,
.rerun-button {
padding: 10px 20px;
border-radius: 3px;
background: #FF7361;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-block;
cursor: pointer;
}
.button:hover,
.rerun-button:hover {
background: #e66400;
}
.button.rerun-button,
.rerun-button.rerun-button {
border: 1px solid rgba(255, 255, 255, 0.6);
margin-bottom: 50px;
box-shadow: 0px 10px 15px -6px rgba(0, 0, 0, 0.2);
display: none;
}
.text-center {
text-align: center;
}
.modal-wrap {
max-width: 600px;
margin: 50px auto;
-webkit-transition: -webkit-transform 300ms ease-in-out;
transition: -webkit-transform 300ms ease-in-out;
transition: transform 300ms ease-in-out;
transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
}
.modal-header {
height: 45px;
background: white;
border-bottom: 1px solid #ccc;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.modal-header span {
display: block;
height: 12px;
width: 12px;
margin: 5px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.2);
}
.modal-header span.is-active {
background: rgba(0, 0, 0, 0.4);
background: #FF8F00;
}
.modal-bodies {
position: relative;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.modal-body {
background: white;
padding: 40px 100px;
box-shadow: 0px 50px 30px -30px rgba(0, 0, 0, 0.3);
margin-bottom: 50px;
position: absolute;
top: 0;
display: none;
box-sizing: border-box;
width: 100%;
-webkit-transform-origin: top left;
transform-origin: top left;
}
.modal-body.is-showing {
display: block;
}
.sign-in28912 a{
text-decoration: none;
}
.btn-primary3838{
padding: 10px 20px;
border-radius: 3px;
background: #3071A9;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-block;
cursor: pointer;
}
.btn-danger37883{
padding: 10px 20px;
border-radius: 3px;
background: #CF4539;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-block;
cursor: pointer;
margin-bottom: 20px;
}
.mt-2 {
margin-top: 20px;
}
\ No newline at end of file
<div class="modal-wrap">
<div class="modal-bodies">
<div class="modal-body modal-body-step-1 is-showing">
<div class="title">Connexion</div>
<form>
<input type="text" placeholder="Name"/>
<input type="email" placeholder="Email"/>
<div class="text-center">
<button class="btn button">Se connecter</button>
</div>
<div class="text-center mt-2">
<a routerLink="signup">Créer un compte </a>
</div>
</form>
</div>
</div>
</div>
\ No newline at end of file
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { LoginComponent } from './login.component';
describe('LoginComponent', () => {
let component: LoginComponent;
let fixture: ComponentFixture<LoginComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ LoginComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(LoginComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
......@@ -17,10 +17,9 @@
<link href="assets/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/loginstyle.css">
</head>
<body>
<app-root></app-root>
</head>
<body>
<app-root></app-root>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="assets/js/jquery-3.1.1.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment