web/satellite: Merge and update 'Forgot Password' page files
Merges the 'Forgot Password' page files into one Vue file and updates it to be consistent with deployed code. This change is part of an ongoing effort to remove code from the branding repo. Change-Id: Ib18b95dd5a3269f26f4f547fc46ac6278c468a54
This commit is contained in:
Jeremy Wharton
Jeremy Wharton
parent
8f072bdeee
commit
49fbb5010f
@ -40,7 +40,7 @@ import { OBJECTS_ACTIONS } from '@/store/modules/objects';
|
||||
import { NavigationLink } from '@/types/navigation';
|
||||
|
||||
const DashboardArea = () => import('@/views/DashboardArea.vue');
|
||||
const ForgotPassword = () => import('@/views/forgotPassword/ForgotPassword.vue');
|
||||
const ForgotPassword = () => import('@/views/ForgotPassword.vue');
|
||||
const LoginArea = () => import('@/views/LoginArea.vue');
|
||||
const RegisterArea = () => import('@/views/RegisterArea.vue');
|
||||
|
||||
|
||||
361
web/satellite/src/views/ForgotPassword.vue
Normal file
361
web/satellite/src/views/ForgotPassword.vue
Normal file
@ -0,0 +1,361 @@
|
||||
// Copyright (C) 2021 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div class="forgot-area" @keyup.enter="onSendConfigurations">
|
||||
<div class="forgot-area__logo-wrapper">
|
||||
<LogoIcon class="forgot-area__logo-wrapper__logo" @click="onLogoClick"/>
|
||||
</div>
|
||||
<div class="forgot-area__content-area">
|
||||
<div class="forgot-area__content-area__container">
|
||||
<div class="forgot-area__content-area__container__title-area">
|
||||
<h1 class="forgot-area__content-area__container__title-area__title">Reset Password</h1>
|
||||
<div class="forgot-area__expand" @click.stop="toggleDropdown">
|
||||
<span class="forgot-area__expand__value">{{ satelliteName }}</span>
|
||||
<BottomArrowIcon />
|
||||
<div class="forgot-area__expand__dropdown" v-if="isDropdownShown" v-click-outside="closeDropdown">
|
||||
<div class="forgot-area__expand__dropdown__item" @click.stop="closeDropdown">
|
||||
<SelectedCheckIcon />
|
||||
<span class="forgot-area__expand__dropdown__item__name">{{ satelliteName }}</span>
|
||||
</div>
|
||||
<a v-for="sat in partneredSatellites" class="forgot-area__expand__dropdown__item" :href="sat.address + '/forgot-password'">
|
||||
{{ sat.name }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="forgot-area__content-area__container__message">If you’ve forgotten your account password, you can reset it here. Make sure you’re signing in to the right satellite.</p>
|
||||
<div class="forgot-area__content-area__container__input-wrapper">
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Email Address"
|
||||
placeholder="example@email.com"
|
||||
:error="emailError"
|
||||
@setData="setEmail"
|
||||
width="calc(100% - 2px)"
|
||||
height="46px"
|
||||
/>
|
||||
</div>
|
||||
<p class="forgot-area__content-area__container__button" @click.prevent="onSendConfigurations">Reset Password</p>
|
||||
</div>
|
||||
<div class="forgot-area__content-area__login-container">
|
||||
<router-link :to="loginPath" class="forgot-area__content-area__login-container__link">
|
||||
Back to Login
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
import HeaderlessInput from '@/components/common/HeaderlessInput.vue';
|
||||
|
||||
import AuthIcon from '@/../static/images/AuthImage.svg';
|
||||
import BottomArrowIcon from '@/../static/images/common/lightBottomArrow.svg';
|
||||
import SelectedCheckIcon from '@/../static/images/common/selectedCheck.svg';
|
||||
import LogoIcon from '@/../static/images/dcs-logo.svg';
|
||||
|
||||
import { AuthHttpApi } from '@/api/auth';
|
||||
import { RouteConfig } from '@/router';
|
||||
import { PartneredSatellite } from '@/types/common';
|
||||
import { Validator } from '@/utils/validation';
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
HeaderlessInput,
|
||||
AuthIcon,
|
||||
BottomArrowIcon,
|
||||
SelectedCheckIcon,
|
||||
LogoIcon,
|
||||
},
|
||||
})
|
||||
export default class ForgotPassword extends Vue {
|
||||
private email: string = '';
|
||||
private emailError: string = '';
|
||||
|
||||
private readonly auth: AuthHttpApi = new AuthHttpApi();
|
||||
|
||||
// tardigrade logic
|
||||
public isDropdownShown: boolean = false;
|
||||
|
||||
public readonly loginPath: string = RouteConfig.Login.path;
|
||||
|
||||
/**
|
||||
* Sets the email field to the given value.
|
||||
*/
|
||||
public setEmail(value: string): void {
|
||||
this.email = value;
|
||||
this.emailError = '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Name of the current satellite.
|
||||
*/
|
||||
public get satelliteName(): string {
|
||||
return this.$store.state.appStateModule.satelliteName;
|
||||
}
|
||||
|
||||
/**
|
||||
* Information about partnered satellites, including name and signup link.
|
||||
*/
|
||||
public get partneredSatellites(): PartneredSatellite[] {
|
||||
return this.$store.state.appStateModule.partneredSatellites;
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggles satellite selection dropdown visibility (Tardigrade).
|
||||
*/
|
||||
public toggleDropdown(): void {
|
||||
this.isDropdownShown = !this.isDropdownShown;
|
||||
}
|
||||
|
||||
/**
|
||||
* Closes satellite selection dropdown (Tardigrade).
|
||||
*/
|
||||
public closeDropdown(): void {
|
||||
this.isDropdownShown = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sends recovery password email.
|
||||
*/
|
||||
public async onSendConfigurations(): Promise<void> {
|
||||
const self = this;
|
||||
|
||||
if (!self.validateFields()) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await this.auth.forgotPassword(this.email);
|
||||
} catch (error) {
|
||||
await this.$notify.error(error.message);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
await this.$notify.success('Please look for instructions at your email');
|
||||
}
|
||||
|
||||
/**
|
||||
* Changes location to Login route.
|
||||
*/
|
||||
public onBackToLoginClick(): void {
|
||||
this.$router.push(RouteConfig.Login.path);
|
||||
}
|
||||
|
||||
/**
|
||||
* Reloads the page.
|
||||
*/
|
||||
public onLogoClick(): void {
|
||||
location.reload();
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns whether the email address is properly structured.
|
||||
*/
|
||||
private validateFields(): boolean {
|
||||
const isEmailValid = Validator.email(this.email.trim());
|
||||
|
||||
if (!isEmailValid) {
|
||||
this.emailError = 'Invalid Email';
|
||||
}
|
||||
|
||||
return isEmailValid;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.forgot-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
font-family: 'font_regular', sans-serif;
|
||||
background-color: #f5f6fa;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
min-height: 100%;
|
||||
overflow-y: scroll;
|
||||
|
||||
&__logo-wrapper {
|
||||
text-align: center;
|
||||
margin: 70px 0;
|
||||
|
||||
&__logo {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&__expand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
&__value {
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: #acbace;
|
||||
margin-right: 10px;
|
||||
font-family: 'font_regular', sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&__dropdown {
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
z-index: 1000;
|
||||
border: 1px solid #c5cbdb;
|
||||
box-shadow: 0 8px 34px rgba(161, 173, 185, 0.41);
|
||||
border-radius: 6px;
|
||||
min-width: 250px;
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 12px 25px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #7e8b9c;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
|
||||
&__name {
|
||||
font-family: 'font_bold', sans-serif;
|
||||
margin-left: 15px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #7e8b9c;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #f2f2f6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__content-area {
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
margin-bottom: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
&__container {
|
||||
width: 610px;
|
||||
padding: 60px 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&__title-area {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&__title {
|
||||
font-size: 24px;
|
||||
margin: 10px 0;
|
||||
letter-spacing: -0.100741px;
|
||||
color: #252525;
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
|
||||
&__input-wrapper {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
&__button {
|
||||
font-family: 'font_regular', sans-serif;
|
||||
font-weight: 700;
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #376fff;
|
||||
border-radius: 50px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
|
||||
&:hover {
|
||||
background-color: #0059d0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__login-container {
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 50px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
||||
&__link {
|
||||
font-family: 'font_medium', sans-serif;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
color: #376fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 750px) {
|
||||
|
||||
.forgot-area {
|
||||
|
||||
&__content-area {
|
||||
|
||||
&__container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__expand {
|
||||
|
||||
&__dropdown {
|
||||
left: -200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 414px) {
|
||||
|
||||
.forgot-area {
|
||||
|
||||
&__logo-wrapper {
|
||||
margin: 40px;
|
||||
}
|
||||
|
||||
&__content-area {
|
||||
padding: 0;
|
||||
|
||||
&__container {
|
||||
padding: 60px 60px;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,106 +0,0 @@
|
||||
// Copyright (C) 2019 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template src="./forgotPassword.html"></template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
import HeaderlessInput from '@/components/common/HeaderlessInput.vue';
|
||||
|
||||
import AuthIcon from '@/../static/images/AuthImage.svg';
|
||||
import LogoIcon from '@/../static/images/dcs-logo.svg';
|
||||
|
||||
import { AuthHttpApi } from '@/api/auth';
|
||||
import { RouteConfig } from '@/router';
|
||||
import { Validator } from '@/utils/validation';
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
HeaderlessInput,
|
||||
AuthIcon,
|
||||
LogoIcon,
|
||||
},
|
||||
})
|
||||
export default class ForgotPassword extends Vue {
|
||||
private email: string = '';
|
||||
private emailError: string = '';
|
||||
|
||||
private readonly auth: AuthHttpApi = new AuthHttpApi();
|
||||
|
||||
// tardigrade logic
|
||||
public isDropdownShown: boolean = false;
|
||||
|
||||
public readonly loginPath: string = RouteConfig.Login.path;
|
||||
|
||||
/**
|
||||
* Checks if page is inside iframe
|
||||
*/
|
||||
public get isInsideIframe(): boolean {
|
||||
return window.self !== window.top;
|
||||
}
|
||||
|
||||
public setEmail(value: string): void {
|
||||
this.email = value;
|
||||
this.emailError = '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggles satellite selection dropdown visibility (Tardigrade).
|
||||
*/
|
||||
public toggleDropdown(): void {
|
||||
this.isDropdownShown = !this.isDropdownShown;
|
||||
}
|
||||
|
||||
/**
|
||||
* Closes satellite selection dropdown (Tardigrade).
|
||||
*/
|
||||
public closeDropdown(): void {
|
||||
this.isDropdownShown = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sends recovery password email.
|
||||
*/
|
||||
public async onSendConfigurations(): Promise<void> {
|
||||
const self = this;
|
||||
|
||||
if (!self.validateFields()) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await this.auth.forgotPassword(this.email);
|
||||
} catch (error) {
|
||||
await this.$notify.error(error.message);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
await this.$notify.success('Please look for instructions at your email');
|
||||
}
|
||||
|
||||
/**
|
||||
* Changes location to Login route.
|
||||
*/
|
||||
public onBackToLoginClick(): void {
|
||||
this.$router.push(RouteConfig.Login.path);
|
||||
}
|
||||
|
||||
public onLogoClick(): void {
|
||||
location.reload();
|
||||
}
|
||||
|
||||
private validateFields(): boolean {
|
||||
const isEmailValid = Validator.email(this.email.trim());
|
||||
|
||||
if (!isEmailValid) {
|
||||
this.emailError = 'Invalid Email';
|
||||
}
|
||||
|
||||
return isEmailValid;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style src="./forgotPassword.scss" scoped lang="scss"></style>
|
||||
@ -1,41 +0,0 @@
|
||||
<!--Copyright (C) 2019 Storj Labs, Inc.-->
|
||||
<!--See LICENSE for copying information.-->
|
||||
|
||||
<div class="forgot-password-container">
|
||||
<AuthIcon
|
||||
class="image"
|
||||
alt="Authentication image"
|
||||
/>
|
||||
<div class="forgot-password-container__wrapper">
|
||||
<div class="forgot-password-container__header">
|
||||
<LogoIcon
|
||||
@click="onLogoClick" class="forgot-password-container__logo"
|
||||
alt="Company logo"
|
||||
/>
|
||||
<div class="forgot-password-container__login-button" @click="onBackToLoginClick">
|
||||
<p class="forgot-password-container__login-button__label">Back to Login</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="forgot-password-area-wrapper">
|
||||
<div class="forgot-password-area">
|
||||
<div class="forgot-password-area__title-container">
|
||||
<h1 class="forgot-password-area__title-container__title">Forgot Password</h1>
|
||||
</div>
|
||||
<p class="forgot-password-area__info-text">Enter your email address below and we'll get you back on track.</p>
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
placeholder="Enter Your Email"
|
||||
:error="emailError"
|
||||
@setData="setEmail"
|
||||
width="100%"
|
||||
height="46px"
|
||||
/>
|
||||
<div class="forgot-password-area__submit-container" @click.prevent="onSendConfigurations">
|
||||
<div class="forgot-password-area__submit-container__send-button">
|
||||
<p class="forgot-password-area__submit-container__send-button__label">Reset Password</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,292 +0,0 @@
|
||||
// Copyright (C) 2019 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
body {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.forgot-password-container {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background-size: contain;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 60px 0 0 104px;
|
||||
background-color: #f5f6fa;
|
||||
font-family: 'font_regular', sans-serif;
|
||||
|
||||
&__wrapper {
|
||||
min-width: 45%;
|
||||
height: 86vh;
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
cursor: pointer;
|
||||
width: 207px;
|
||||
height: 62px;
|
||||
}
|
||||
|
||||
&__login-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #afb7c1;
|
||||
cursor: pointer;
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
|
||||
&__label {
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
color: #354049;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #2683ff;
|
||||
border: 1px solid #2683ff;
|
||||
|
||||
.forgot-password-container__login-button__label {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.forgot-password-area-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.forgot-password-area {
|
||||
background-color: transparent;
|
||||
width: 477px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-top: 100px;
|
||||
|
||||
&__title-container {
|
||||
height: 48px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
flex-direction: row;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
|
||||
&__title {
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 22px;
|
||||
color: #384b65;
|
||||
line-height: 27px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__info-text {
|
||||
font-size: 14px;
|
||||
color: #384b65;
|
||||
line-height: 19px;
|
||||
opacity: 0.8;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
&__submit-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
|
||||
&__send-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #2683ff;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
box-shadow: none;
|
||||
|
||||
&__label {
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 20px rgba(35, 121, 236, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-wrap.full-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.image {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
|
||||
.st1 { fill: #2683ff; }
|
||||
.st2 { fill: #007aff; }
|
||||
.st3 { fill: #0062ff; }
|
||||
.st4 { fill: #fff; }
|
||||
.st5 { fill: #6cb9ff; }
|
||||
.st6 { fill: #499ffc; }
|
||||
.st7 { fill: #f7f9f9; }
|
||||
.st8 { fill: #0f002d; }
|
||||
.st9 { fill: #dedefc; }
|
||||
}
|
||||
|
||||
@media screen and (max-height: 840px) {
|
||||
|
||||
.forgot-password-container {
|
||||
overflow: hidden;
|
||||
|
||||
&__wrapper {
|
||||
height: 770px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
-ms-overflow-style: none;
|
||||
overflow: -moz-scrollbars-none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 810px) {
|
||||
|
||||
.forgot-password-container {
|
||||
|
||||
&__wrapper {
|
||||
height: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
.forgot-password-area__submit-container {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
|
||||
.forgot-password-container {
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 650px) {
|
||||
|
||||
.forgot-password-container {
|
||||
|
||||
&__wrapper {
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 520px) {
|
||||
|
||||
.forgot-password-container {
|
||||
|
||||
&__wrapper {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 420px) {
|
||||
|
||||
.forgot-password-container {
|
||||
|
||||
&__wrapper {
|
||||
width: 350px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 320px) {
|
||||
|
||||
.forgot-password-container {
|
||||
|
||||
&__wrapper {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
&__header {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
&__login-button {
|
||||
width: 120px;
|
||||
height: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
.forgot-password-area {
|
||||
|
||||
&__title-container {
|
||||
|
||||
&__title {
|
||||
font-size: 20px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
&__submit-container {
|
||||
|
||||
&__send-button {
|
||||
height: 40px;
|
||||
|
||||
&__label {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user