frontend: redesign login page layout and update styles for improved user experience. Replace OpenVidu logo with new branding image.
This commit is contained in:
Carlos Santos
parent
43839fdb9d
commit
5719d52fc0
@ -1,57 +1,69 @@
|
|||||||
<div class="login-container">
|
<div class="ov-page-container">
|
||||||
<div class="card-container">
|
<div class="login-page-content">
|
||||||
<mat-card class="login-card">
|
<!-- Login Header -->
|
||||||
<h1>Log in</h1>
|
<div class="get-started-header">
|
||||||
<p>Continue to OpenVidu Meet</p>
|
<mat-icon class="ov-about-icon login-icon" aria-hidden="true">login</mat-icon>
|
||||||
<form [formGroup]="loginForm" (ngSubmit)="login()" id="login-form">
|
<h1>Sign in</h1>
|
||||||
<mat-form-field class="form-input" appearance="fill">
|
<p class="subtitle">Enter your credentials to access OpenVidu Meet</p>
|
||||||
<mat-label>Username</mat-label>
|
</div>
|
||||||
<input matInput formControlName="username" placeholder="Enter your username" id="username-input" />
|
|
||||||
<mat-icon matPrefix>person</mat-icon>
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<mat-form-field class="form-input" appearance="fill">
|
<!-- Login Card -->
|
||||||
<mat-label>Password</mat-label>
|
<div class="login-form-container">
|
||||||
<input
|
<mat-card class="login-card">
|
||||||
matInput
|
<mat-card-content>
|
||||||
[type]="showPassword ? 'text' : 'password'"
|
<form [formGroup]="loginForm" (ngSubmit)="login()" id="login-form">
|
||||||
formControlName="password"
|
<mat-form-field class="form-input" appearance="outline">
|
||||||
placeholder="Enter your password"
|
<mat-label>Username</mat-label>
|
||||||
id="password-input"
|
<input matInput formControlName="username" placeholder="Enter your username" id="username-input" />
|
||||||
/>
|
<mat-icon matPrefix>person</mat-icon>
|
||||||
<mat-icon matPrefix>lock</mat-icon>
|
</mat-form-field>
|
||||||
<button
|
|
||||||
mat-icon-button
|
|
||||||
matSuffix
|
|
||||||
type="button"
|
|
||||||
class="input-btn"
|
|
||||||
(click)="showPassword = !showPassword"
|
|
||||||
matTooltip="{{ showPassword ? 'Hide password' : 'Show password' }}"
|
|
||||||
>
|
|
||||||
<mat-icon>{{ showPassword ? 'visibility_off' : 'visibility' }}</mat-icon>
|
|
||||||
</button>
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<div class="login-button">
|
<mat-form-field class="form-input" appearance="outline">
|
||||||
<button
|
<mat-label>Password</mat-label>
|
||||||
mat-raised-button
|
<input
|
||||||
color="primary"
|
matInput
|
||||||
type="submit"
|
[type]="showPassword ? 'text' : 'password'"
|
||||||
[disabled]="loginForm.invalid"
|
formControlName="password"
|
||||||
id="login-button"
|
placeholder="Enter your password"
|
||||||
>
|
id="password-input"
|
||||||
Login
|
/>
|
||||||
</button>
|
<mat-icon matPrefix>lock</mat-icon>
|
||||||
|
<button
|
||||||
|
mat-icon-button
|
||||||
|
matSuffix
|
||||||
|
type="button"
|
||||||
|
(click)="showPassword = !showPassword"
|
||||||
|
matTooltip="{{ showPassword ? 'Hide password' : 'Show password' }}"
|
||||||
|
>
|
||||||
|
<mat-icon>{{ showPassword ? 'visibility_off' : 'visibility' }}</mat-icon>
|
||||||
|
</button>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
@if (loginErrorMessage) {
|
||||||
|
<mat-error class="login-error">{{ loginErrorMessage }}</mat-error>
|
||||||
|
}
|
||||||
|
|
||||||
|
<div class="login-actions">
|
||||||
|
<button
|
||||||
|
mat-raised-button
|
||||||
|
color="primary"
|
||||||
|
type="submit"
|
||||||
|
[disabled]="loginForm.invalid"
|
||||||
|
id="login-button"
|
||||||
|
class="primary-button"
|
||||||
|
>
|
||||||
|
Login
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</mat-card-content>
|
||||||
|
</mat-card>
|
||||||
|
|
||||||
|
<!-- Brand Section -->
|
||||||
|
<div class="brand-section">
|
||||||
|
<div class="brand-content">
|
||||||
|
<img src="assets/images/meet_logo.png" alt="OpenVidu Meet" />
|
||||||
</div>
|
</div>
|
||||||
</form>
|
|
||||||
|
|
||||||
@if (loginErrorMessage) {
|
|
||||||
<mat-error class="login-error">{{ loginErrorMessage }}</mat-error>
|
|
||||||
}
|
|
||||||
</mat-card>
|
|
||||||
<div class="signup-section">
|
|
||||||
<div>
|
|
||||||
<img src="https://openvidu.io/assets/images/openvidu_white_bg_transp.png" alt="Sign Up" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,146 +1,204 @@
|
|||||||
* {
|
@import '../../../../../../src/assets/styles/design-tokens';
|
||||||
box-sizing: border-box;
|
|
||||||
|
// Login Page Container - Full height centered layout
|
||||||
|
.ov-page-container {
|
||||||
|
@include ov-flex-center;
|
||||||
|
@include ov-theme-transition;
|
||||||
|
min-height: 100vh;
|
||||||
|
background: var(--ov-meet-background-color);
|
||||||
|
padding: var(--ov-meet-spacing-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
.login-page-content {
|
||||||
margin: 0;
|
@include ov-flex-center;
|
||||||
font-family: Arial, sans-serif;
|
flex-direction: column;
|
||||||
background-color: #f8fafa;
|
// gap: var(--ov-meet-spacing-xl);
|
||||||
}
|
|
||||||
|
|
||||||
.login-container {
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-container {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 100%;
|
|
||||||
width: 75%;
|
|
||||||
margin: auto;
|
|
||||||
max-width: 1200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-card {
|
|
||||||
padding: 40px;
|
|
||||||
width: 400px;
|
|
||||||
height: 400px;
|
|
||||||
// box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
|
||||||
box-shadow: none;
|
|
||||||
border-top-right-radius: 0px;
|
|
||||||
border-bottom-right-radius: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-input {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
max-width: 900px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-button {
|
// Login Header - Using get-started-header mixin for consistency
|
||||||
text-align: center;
|
.get-started-header {
|
||||||
button {
|
@include ov-get-started-header;
|
||||||
width: 100%;
|
|
||||||
background-color: #0088aa;
|
.login-icon {
|
||||||
color: #ffffff;
|
@include ov-icon(xl);
|
||||||
border-radius: 4px;
|
margin-bottom: var(--ov-meet-spacing-md);
|
||||||
transition: background-color 0.3s;
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: var(--ov-meet-font-size-hero);
|
||||||
|
font-weight: var(--ov-meet-font-weight-light);
|
||||||
|
margin-bottom: var(--ov-meet-spacing-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: var(--ov-meet-font-size-lg);
|
||||||
|
color: var(--ov-meet-text-secondary);
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.login-button button:hover {
|
|
||||||
background-color: #00777f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-button button:disabled {
|
// Login Form Container - Side by side layout
|
||||||
background-color: #a19f9f;
|
.login-form-container {
|
||||||
}
|
|
||||||
|
|
||||||
.login-error {
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.signup-section {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
text-align: center;
|
width: 100%;
|
||||||
justify-content: center;
|
max-width: 800px;
|
||||||
align-items: center;
|
box-shadow: var(--ov-meet-shadow-md);
|
||||||
align-content: center;
|
border-radius: var(--ov-meet-radius-lg);
|
||||||
background-color: #4d4d4d;
|
overflow: hidden;
|
||||||
padding: 20px;
|
border: 1px solid var(--ov-meet-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Login Card - Form section
|
||||||
|
.login-card {
|
||||||
|
@include ov-card;
|
||||||
|
@include ov-theme-transition;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
width: 400px;
|
|
||||||
height: 400px;
|
|
||||||
max-width: 400px;
|
|
||||||
max-height: 400px;
|
|
||||||
border-top-right-radius: 12px;
|
|
||||||
border-bottom-right-radius: 12px;
|
|
||||||
// box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
border-radius: 0;
|
||||||
|
border-top-left-radius: var(--ov-meet-radius-lg);
|
||||||
|
border-bottom-left-radius: var(--ov-meet-radius-lg);
|
||||||
|
|
||||||
|
mat-card-content {
|
||||||
|
padding: var(--ov-meet-spacing-xl);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.signup-section img {
|
// Form styling
|
||||||
max-width: 80%;
|
#login-form {
|
||||||
height: auto;
|
display: flex;
|
||||||
}
|
flex-direction: column;
|
||||||
|
gap: var(--ov-meet-spacing-md);
|
||||||
a {
|
|
||||||
color: #6a5acd;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 991px) {
|
|
||||||
/* Hide .signup-section on medium screens */
|
|
||||||
.signup-section {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-container {
|
|
||||||
width: 75%;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-card {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
border-radius: 12px;
|
|
||||||
height: auto;
|
|
||||||
// box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);
|
|
||||||
padding: 40px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-button button {
|
|
||||||
width: 100%;
|
|
||||||
padding: 12px;
|
|
||||||
font-size: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-input {
|
.form-input {
|
||||||
margin-bottom: 10px;
|
width: 100%;
|
||||||
|
|
||||||
|
mat-icon {
|
||||||
|
@include ov-icon(md);
|
||||||
|
color: var(--ov-meet-text-secondary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-error {
|
||||||
|
text-align: center;
|
||||||
|
margin: var(--ov-meet-spacing-sm) 0;
|
||||||
|
color: var(--ov-meet-color-error);
|
||||||
|
font-size: var(--ov-meet-font-size-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-actions {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: var(--ov-meet-spacing-md);
|
||||||
|
|
||||||
|
.primary-button {
|
||||||
|
@include ov-button-base;
|
||||||
|
width: 100%;
|
||||||
|
padding: var(--ov-meet-spacing-md);
|
||||||
|
font-size: var(--ov-meet-font-size-md);
|
||||||
|
font-weight: var(--ov-meet-font-weight-medium);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Small devices (landscape phones, 576px and up) */
|
// Brand Section - Visual branding area
|
||||||
@media (max-width: 576px) {
|
.brand-section {
|
||||||
|
@include ov-flex-center;
|
||||||
|
@include ov-theme-transition;
|
||||||
|
flex: 1;
|
||||||
|
background: var(--ov-meet-color-secondary);
|
||||||
|
padding: var(--ov-meet-spacing-xl);
|
||||||
|
border-top-right-radius: var(--ov-meet-radius-lg);
|
||||||
|
border-bottom-right-radius: var(--ov-meet-radius-lg);
|
||||||
|
|
||||||
|
.brand-content {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
// opacity: 0.9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Responsive design using design system breakpoints
|
||||||
|
@include ov-tablet-down {
|
||||||
|
.ov-page-container {
|
||||||
|
padding: var(--ov-meet-spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form-container {
|
||||||
|
flex-direction: column;
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
.login-card {
|
.login-card {
|
||||||
padding: 40px;
|
border-radius: var(--ov-meet-radius-lg) var(--ov-meet-radius-lg) 0 0;
|
||||||
font-size: 0.9em;
|
|
||||||
|
mat-card-content {
|
||||||
|
padding: var(--ov-meet-spacing-lg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-button button {
|
.brand-section {
|
||||||
font-size: 0.85em;
|
border-radius: 0 0 var(--ov-meet-radius-lg) var(--ov-meet-radius-lg);
|
||||||
padding: 10px;
|
padding: var(--ov-meet-spacing-lg);
|
||||||
|
|
||||||
|
.brand-content img {
|
||||||
|
max-width: 70%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-container {
|
.get-started-header {
|
||||||
width: 95%;
|
h1 {
|
||||||
}
|
font-size: var(--ov-meet-font-size-xxl);
|
||||||
|
}
|
||||||
.signup-section {
|
}
|
||||||
display: none;
|
}
|
||||||
|
|
||||||
|
@include ov-mobile-down {
|
||||||
|
.ov-page-container {
|
||||||
|
padding: var(--ov-meet-spacing-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form-container {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-card mat-card-content {
|
||||||
|
padding: var(--ov-meet-spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-section {
|
||||||
|
padding: var(--ov-meet-spacing-md);
|
||||||
|
min-height: 120px;
|
||||||
|
|
||||||
|
// .brand-content img {
|
||||||
|
// max-width: 50%;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
#login-form {
|
||||||
|
gap: var(--ov-meet-spacing-sm);
|
||||||
|
|
||||||
|
.login-actions .primary-button {
|
||||||
|
padding: var(--ov-meet-spacing-sm) var(--ov-meet-spacing-md);
|
||||||
|
font-size: var(--ov-meet-font-size-sm);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.get-started-header {
|
||||||
|
.login-icon {
|
||||||
|
@include ov-icon(lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: var(--ov-meet-font-size-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: var(--ov-meet-font-size-md);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
BIN
frontend/src/assets/images/meet_logo.png
Normal file
BIN
frontend/src/assets/images/meet_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Loading…
x
Reference in New Issue
Block a user