Skip to content

Commit

Permalink
[Design] new design login (#118)
Browse files Browse the repository at this point in the history 
* feat: new login design

* fix: background overlap
  • Loading branch information
@sanchis
sanchis authored Jun 10, 2021
1 parent 5457268 commit 2a15539
Show file tree
Hide file tree
Showing 4 changed files with 139 additions and 224 deletions.
50 changes: 33 additions & 17 deletions client/src/app/components/login/login.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,36 @@
<div class="container-login-form">
<div id="stars"></div>
<div id="stars2"></div>
<div id="stars3"></div>

<div class="container vertical-align center size-100-prc">
<div class="rounded bg-light-grey flex columns width-500-px">
<div class="bg-purple rounded-top vertical-align center height-100-px width-600-prc relative">
<div id="login_title_content" class="title-text">
<img src="./assets/logo.png" style="width: 10%; margin-right: 0.9em;">
<p>Smersh Authentication</p>
</div>
</div>
<div class="content vertical-align center size-100-prc">
<div class="vertical-align center columns width-75-prc height-100-prc">
<form (submit)="submit()" class="form">
<input autofocus autocomplete="off" class="custom-input margin-bottom-10-px margin-top-40-px height-60-px width-100-prc padding-10-px font-input" type="text" name="login" [(ngModel)]="username" placeholder="Username" data-cy="login">
<input autocomplete="off" class="custom-input margin-bottom-40-px margin-top-40-px height-60-px width-100-prc padding-10-px font-input" placeholder="Password" type="password" name="password" [(ngModel)]="password" data-cy="password">
<button class="vertical-align center title-text width-100-prc height-80-px rounded-light bg-purple-complement margin-bottom-40-px" data-cy="submit">Connect</button>
</form>
</div>
</div>
<div class="login-form">
<img src="./assets/logo.png"
class="logo">
<h2>Smersh Authentication</h2>
<form (submit)="submit()"
class="form">
<mat-form-field appearance="outline">
<input matInput
data-cy="login"
[(ngModel)]="username"
type="text"
name="login"
autofocus
autocomplete="off"
placeholder="Username">
</mat-form-field>
<mat-form-field appearance="outline">
<input matInput
data-cy="password"
[(ngModel)]="password"
type="password"
name="password"
autocomplete="off"
placeholder="Password">
</mat-form-field>
<button mat-raised-button
data-cy="submit"
color="primary">Connect</button>
</form>
</div>
</div>
305 changes: 104 additions & 201 deletions client/src/app/components/login/login.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,204 +1,107 @@
#login_title_content {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
.container-login-form {
background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
height: 100%;
}



.vertical-align {
display: flex;
flex-direction: row;
align-items: center;
box-sizing: border-box;
}
.vertical-align.center {
justify-content: center;
}
.vertical-align.columns {
flex-flow: column;
}

.flex {
display: flex;
box-sizing: border-box;
}
.flex.columns {
flex-flow: column;
}

.self-center {
justify-self: center;
}

.relative {
position: relative;
}

.absolute {
position: absolute;
}

.bottom-0-px {
bottom: 0px;
}

.left-0-px {
left: 0px;
}

.size-100-prc {
width: 100%;
height: 100%;
}
.size-120-px {
width: 120px;
height: 120px;
}
.size-110-px {
width: 110px;
height: 110px;
}

.width-20-prc {
width: 20%;
}
.width-30-prc {
width: 30%;
}
.width-75-prc {
width: 75%;
}
.width-80-prc {
width: 80%;
}
.width-100-prc {
width: 100%;
}
.width-500-px {
width: 600px;
}

.height-20-prc {
height: 20%;
}
.height-80-prc {
height: 80%;
}
.height-100-prc {
height: 100%;
}
.height-50-px {
height: 50px;
}
.height-60-px {
height: 60px;
}
.height-80-px {
height: 80px;
}
.height-100-px {
height: 100px;
}
.height-500-px {
height: 500px;
}
.height-same {
height: calc(width);
}

.margin-left-20-px {
margin-left: 20px;
}
.margin-top-40-px {
margin-top: 40px;
}
.margin-bottom-20-px {
margin-bottom: 20px;
}
.margin-bottom-40-px {
margin-bottom: 40px;
}
.margin-bottom-60-px {
margin-bottom: 60px;
}

.padding-10-px {
padding: 10px;
}

.font-input {
font-family: sans-serif;
font-size: 20px;
}

.circle {
border-radius: 120px;
}

.rounded {
border-radius: 10px;
}
.rounded-top {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.rounded-light {
border-radius: 5px;
}

.bg-light-grey {
background-color: #eae7ea;
}

.bg-green {
background-color: green;
}

.bg-purple {
background-color: #d50220;
}
.bg-purple-complement {
background-color: #d50220;
transition: background-color 0.5s;
}
.bg-purple-complement:hover {
background-color: #d50220;
}

.title-text {
color: whitesmoke;
font-family: sans-serif;
font-size: 30px;
}

.icon-white {
color: white;
}

.clip-icon {
clip-path: circle(55px at 75px 9px);
}

.custom-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
box-sizing: border-box;
background-color: #f0eff0;
-moz-box-shadow: inset 0px 0px 5px 0px #9f8c9f;
-webkit-box-shadow: inset 0px 0px 5px 0px #9f8c9f;
-o-box-shadow: inset 0px 0px 5px 0px #9f8c9f;
box-shadow: inset 0px 0px 5px 0px #9f8c9f;
transition: box-shadow 0.5s;
}

.custom-input:hover {
-moz-box-shadow: inset 0px 0px 10px 0px #9f8c9f;
-webkit-box-shadow: inset 0px 0px 10px 0px #9f8c9f;
-o-box-shadow: inset 0px 0px 10px 0px #9f8c9f;
box-shadow: inset 0px 0px 10px 0px #9f8c9f;
overflow: auto;
$colorStar: #fff;
@function multiple-box-shadow($n) {
$value: "#{random(2000)}px #{random(2000)}px #{$colorStar}";
@for $i from 2 through $n {
$value: "#{$value} , #{random(2000)}px #{random(2000)}px #{$colorStar}";
}
@return unquote($value);
}
$shadows-small: multiple-box-shadow(700);
$shadows-medium: multiple-box-shadow(200);
$shadows-big: multiple-box-shadow(100);
#stars {
width: 1px;
height: 1px;
background: transparent;
box-shadow: $shadows-small;
animation: animStar 50s linear infinite;

&:after {
content: " ";
position: absolute;
top: 100vh;
width: 1px;
height: 1px;
background: transparent;
box-shadow: $shadows-small;
}
}

#stars2 {
width: 2px;
height: 2px;
background: transparent;
box-shadow: $shadows-medium;
animation: animStar 100s linear infinite;

&:after {
content: " ";
position: absolute;
top: 100vh;
width: 2px;
height: 2px;
background: transparent;
box-shadow: $shadows-medium;
}
}

#stars3 {
width: 3px;
height: 3px;
background: transparent;
box-shadow: $shadows-big;
animation: animStar 150s linear infinite;

&:after {
content: " ";
position: absolute;
top: 100vh;
width: 3px;
height: 3px;
background: transparent;
box-shadow: $shadows-big;
}
}

@keyframes animStar{
from{
transform: translateY(0px);
}
to{
transform: translateY(-2000px);
}
}

.login-form{
width: 350px;
padding: 20px;
margin: auto;
border-radius: 4px;
backdrop-filter: blur(2px);
color: white;
border: 1px solid #ffffff24;


.logo{
width: 100%;
}

h2{
text-align: center;
}

form{
display: flex;
flex-direction: column;
input , input::placeholder,.mat-form-field-appearance-outline .mat-form-field-outline-thick{
color:white;
opacity: 1;
}
}
}
}
3 changes: 2 additions & 1 deletion client/src/app/components/login/login.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Router } from '@angular/router';
import { Token } from 'src/app/storage/Token';
import { Locale } from 'src/app/storage/Locale';
Expand All @@ -8,6 +8,7 @@ import { ConnectionService } from 'src/app/services/connection.service';
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class LoginComponent implements OnInit {
public username: string;
Expand Down
5 changes: 0 additions & 5 deletions client/src/styles.scss
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,6 @@
/* You can add global styles to this file, and also import other style files */
@import 'theme.scss';

html,
body {
height: 100%;
}

body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
Expand Down

0 comments on commit 2a15539

Please sign in to comment.