login page with form, project list

This commit is contained in:
annampak 2017-10-04 18:41:41 +03:00
parent c34f99cb0e
commit 03973f2038
4 changed files with 79 additions and 10 deletions

View File

@ -1,6 +1,6 @@
<div [formGroup]="form" class="form-group"> <div [formGroup]="form" class="form-group">
<h4 [id]= "group.key">{{group.title}}</h4>
<div *ngFor="let field of group.groupFields" > <div *ngFor="let field of group.groupFields" >
<df-field [field]="field" [form]="form" [dataModel] = "dataModel"></df-field> <df-field [field]="field" [form]="form" [dataModel] = "dataModel"></df-field>
</div> </div>

View File

@ -4,18 +4,46 @@
</head> </head>
<body> <body>
<!-- <div class="g-signin2" data-onsuccess="onSignIn"></div> --> <!-- <div class="g-signin2" data-onsuccess="onSignIn"></div> -->
<div class="container"> <div class="container">
<form class="form-signin">
<h2 class="form-signin-heading">Please sign in</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
<div class="form-signin">
<div class="col-md-6">
<h5>Sign in with</h5>
</div>
<google-signin [clientId]="myClientId" (googleSignInSuccess)="onGoogleSignInSuccess($event)"></google-signin>
</div>
</div>
<!-- /container -->
<!-- <div class="container">
<div class="col-md-3 text-center"> <div class="col-md-3 text-center">
<h4>Please Sign in</h4> <h4>Please Sign in with Google Account</h4>
</div> </div>
<div class="col-md-3 text-center"> <div class="col-md-3 text-center">
<div> <div>
<google-signin [clientId]="myClientId" (googleSignInSuccess)="onGoogleSignInSuccess($event)"></google-signin> <google-signin [clientId]="myClientId" (googleSignInSuccess)="onGoogleSignInSuccess($event)"></google-signin>
</div> </div>
</div> </div>
</div> </div> -->
<!-- <button routerLink="/dynamic-form">Go to form</button> <!-- <button routerLink="/dynamic-form">Go to form</button>
<button routerLink="/projects">Go to projects</button> trial for routing --> <button routerLink="/projects">Go to projects</button> trial for routing -->

View File

@ -8,12 +8,12 @@ import { Project } from '../entities/model/project';
selector: 'projects', selector: 'projects',
template: ` template: `
<h1 class="title">Projects</h1> <h1 class="title">Projects</h1>
<a href="#" onclick="signOut();">Sign out</a>
<ul class="items"> <ul class="list-group col-md-4">
<li *ngFor="let project of projects" <li *ngFor="let project of projects"
[class.selected]="project.id === selectedId"> class="list-group-item">
<a [routerLink]="['/dynamic-form', project.id]"> <a [routerLink]="['/dynamic-form', project.id]" >
<span class="badge">{{ project.id }}</span>{{ project.name }} {{ project.name }}
</a> </a>
</li> </li>
</ul> </ul>

View File

@ -1 +1,42 @@
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #eee;
}
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
box-shadow: 0px 0px 0px 1px #d8d4d4;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin .checkbox {
font-weight: normal;
}
.form-signin .form-control {
position: relative;
height: auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}