auth. components done.

This commit is contained in:
Jegor 2021-06-07 09:53:03 +02:00
parent 9ef37cee03
commit 54e68479f6
7 changed files with 11233 additions and 160 deletions

View File

@ -0,0 +1,76 @@
.main-content{
width: 50%;
border-radius: 20px;
box-shadow: 0 5px 5px rgba(0,0,0,.4);
margin: 5em auto;
display: flex;
}
.company__info{
background-color: #008080;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
display: flex;
flex-direction: column;
justify-content: center;
color: #fff;
}
.fa-android{
font-size:3em;
}
@media screen and (max-width: 640px) {
.main-content{width: 90%;}
.company__info{
display: none;
}
.login_form{
border-top-left-radius:20px;
border-bottom-left-radius:20px;
}
}
@media screen and (min-width: 642px) and (max-width:800px){
.main-content{width: 70%;}
}
.row > h2{
color:#008080;
}
.login_form{
background-color: #fff;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-top:1px solid #ccc;
border-right:1px solid #ccc;
}
form{
padding: 0 2em;
}
.form__input{
width: 100%;
border:0px solid transparent;
border-radius: 0;
border-bottom: 1px solid #aaa;
padding: 1em .5em .5em;
padding-left: 2em;
outline:none;
margin:1.5em auto;
transition: all .5s ease;
}
.form__input:focus{
border-bottom-color: #008080;
box-shadow: 0 0 5px rgba(0,80,80,.4);
border-radius: 4px;
}
.btn_signin{
transition: all .5s ease;
width: 70%;
border-radius: 30px;
color:#008080;
font-weight: 600;
background-color: #fff;
border: 1px solid #008080;
margin-top: 1.5em;
margin-bottom: 1em;
}
.btn_signin:hover, .btn:focus{
background-color: #008080;
color:#fff;
}

View File

@ -1 +1,40 @@
<p>registration works!</p>
<div class="container">
<div class="row main-content bg-success text-center">
<div class="col-md-4 text-center company__info">
<span class="company__logo" routerLink=""><h2><img src="assets/images/Betterzon.svg"></h2></span>
</div>
<div class="col-md-8 col-xs-12 col-sm-12 login_form ">
<div class="container-fluid">
<div class="row">
<h2>Konto erstellen</h2>
</div>
<div class="row">
<form control="" class="form-group">
<div class="row">
<input type="text" name="username" id="username" class="form__input" placeholder="Nickname">
</div>
<div class="row">
<!-- <span class="fa fa-lock"></span> -->
<input type="password" name="password" id="email" class="form__input" placeholder= "E-Mail">
</div>
<div class="row">
<!-- <span class="fa fa-lock"></span> -->
<input type="password" name="password" id="password" class="form__input" placeholder="Kennwort erstellen">
</div>
<div class="row">
<!-- <span class="fa fa-lock"></span> -->
<input type="password" name="password" id="password_repeated" class="form__input" placeholder="Kennwort bestätigen">
</div>
<div class="row">
<input type="submit" value="Erstellen" class="btn_signin">
</div>
<div class="row">
<p>Haben Sie bereits ein Konto?<a href="/signin">Sich anmelden</a></p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>

View File

@ -1,9 +1,76 @@
mat-card {
max-width: 400px;
margin: 2em auto;
text-align: center;
.main-content{
width: 50%;
border-radius: 20px;
box-shadow: 0 5px 5px rgba(0,0,0,.4);
margin: 5em auto;
display: flex;
}
mat-form-field {
display: block;
.company__info{
background-color: #008080;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
display: flex;
flex-direction: column;
justify-content: center;
color: #fff;
}
.fa-android{
font-size:3em;
}
@media screen and (max-width: 640px) {
.main-content{width: 90%;}
.company__info{
display: none;
}
.login_form{
border-top-left-radius:20px;
border-bottom-left-radius:20px;
}
}
@media screen and (min-width: 642px) and (max-width:800px){
.main-content{width: 70%;}
}
.row > h2{
color:#008080;
}
.login_form{
background-color: #fff;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-top:1px solid #ccc;
border-right:1px solid #ccc;
}
form{
padding: 0 2em;
}
.form__input{
width: 100%;
border:0px solid transparent;
border-radius: 0;
border-bottom: 1px solid #aaa;
padding: 1em .5em .5em;
padding-left: 2em;
outline:none;
margin:1.5em auto;
transition: all .5s ease;
}
.form__input:focus{
border-bottom-color: #008080;
box-shadow: 0 0 5px rgba(0,80,80,.4);
border-radius: 4px;
}
.btn_signin{
transition: all .5s ease;
width: 70%;
border-radius: 30px;
color:#008080;
font-weight: 600;
background-color: #fff;
border: 1px solid #008080;
margin-top: 1.5em;
margin-bottom: 1em;
}
.btn_signin:hover, .btn:focus{
background-color: #008080;
color:#fff;
}

View File

@ -1,23 +1,34 @@
<mat-card>
<mat-card-content>
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<h2>Log In</h2>
<mat-error *ngIf="loginInvalid">
The username and password were not recognized
</mat-error>
<mat-form-field class="full-width-input">
<input matInput placeholder="Email" formControlName="username" required>
<mat-error>
Please provide a valid email address
</mat-error>
</mat-form-field>
<mat-form-field class="full-width-input">
<input matInput type="password" placeholder="Password" formControlName="password" required>
<mat-error>
Please provide a valid password
</mat-error>
</mat-form-field>
<button mat-raised-button color="primary">Login</button>
</form>
</mat-card-content>
</mat-card>
<div class="container">
<div class="row main-content bg-success text-center">
<div class="col-md-4 text-center company__info">
<span class="company__logo" routerLink=""><h2><img src="assets/images/Betterzon.svg"></h2></span>
</div>
<div class="col-md-8 col-xs-12 col-sm-12 login_form ">
<div class="container-fluid">
<div class="row">
<h2>Anmelden</h2>
</div>
<div class="row">
<form control="" class="form-group">
<div class="row">
<input type="text" name="username" id="username" class="form__input" placeholder="Username">
</div>
<div class="row">
<!-- <span class="fa fa-lock"></span> -->
<input type="password" name="password" id="password" class="form__input" placeholder="Password">
</div>
<div class="row">
<input type="submit" value="Anmelden" class="btn_signin">
</div>
</form>
</div>
<div class="row">
<p>Noch kein Konto?<a href="/registration">Konto erstellen</a></p>
</div>
</div>
</div>
</div>
</div>

View File

@ -1,13 +1,12 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-signin',
templateUrl: './signin.component.html',
styleUrls: ['./signin.component.css']
selector: 'app-signin',
templateUrl: './signin.component.html',
styleUrls: ['./signin.component.css']
})
export class SigninComponent implements OnInit {
form: any;
loginInvalid: any;
constructor() { }

View File

@ -6,11 +6,16 @@
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
<script src="node_modules/cookieconsent/build/cookieconsent.min.js"></script>
</head>
<body>
<app-root>Loading...</app-root>
<app-root>LOADING</app-root>
</body>
</html>

File diff suppressed because it is too large Load Diff