mirror of
https://github.com/Mueller-Patrick/Betterzon.git
synced 2024-11-22 06:13:57 +00:00
auth. components done.
This commit is contained in:
parent
9ef37cee03
commit
54e68479f6
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p>Noch kein Konto?<a href="/registration">Konto erstellen</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -5,9 +5,8 @@ import { Component, OnInit } from '@angular/core';
|
|||
templateUrl: './signin.component.html',
|
||||
styleUrls: ['./signin.component.css']
|
||||
})
|
||||
|
||||
export class SigninComponent implements OnInit {
|
||||
form: any;
|
||||
loginInvalid: any;
|
||||
|
||||
constructor() { }
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
11116
Frontend/src/styles.css
11116
Frontend/src/styles.css
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user