Web forgot password flow markup (#1627)
This commit is contained in:
Nikolay Yurchenko
Bogdan Artemenko
parent
c7c6d3d597
commit
ab1371d6ad
@ -6,6 +6,7 @@ import Router from 'vue-router';
|
||||
import ROUTES from '@/utils/constants/routerConstants';
|
||||
import Login from '@/views/login/Login.vue';
|
||||
import Register from '@/views/register/Register.vue';
|
||||
import ForgotPassword from '@/views/forgotPassword/ForgotPassword.vue';
|
||||
import Dashboard from '@/views/Dashboard.vue';
|
||||
import AccountArea from '@/components/account/AccountArea.vue';
|
||||
import ProjectDetails from '@/components/project/ProjectDetailsArea.vue';
|
||||
@ -30,6 +31,11 @@ let router = new Router({
|
||||
name: ROUTES.REGISTER.name,
|
||||
component: Register
|
||||
},
|
||||
{
|
||||
path: ROUTES.FORGOT_PASSWORD.path,
|
||||
name: ROUTES.FORGOT_PASSWORD.name,
|
||||
component: ForgotPassword
|
||||
},
|
||||
{
|
||||
path: ROUTES.DASHBOARD.path,
|
||||
name: ROUTES.DASHBOARD.name,
|
||||
|
||||
@ -10,6 +10,10 @@ const ROUTES = {
|
||||
path: '/register',
|
||||
name: 'Register'
|
||||
},
|
||||
FORGOT_PASSWORD: {
|
||||
path: '/forgot-password',
|
||||
name: 'ForgotPassword'
|
||||
},
|
||||
DASHBOARD: {
|
||||
path: '/',
|
||||
name: 'Dashboard'
|
||||
|
||||
27
web/satellite/src/views/forgotPassword/ForgotPassword.vue
Normal file
27
web/satellite/src/views/forgotPassword/ForgotPassword.vue
Normal file
@ -0,0 +1,27 @@
|
||||
// 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 { LOADING_CLASSES } from '@/utils/constants/classConstants';
|
||||
|
||||
@Component(
|
||||
{
|
||||
data: function () {
|
||||
return {
|
||||
loadingClassName: LOADING_CLASSES.LOADING_OVERLAY,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
HeaderlessInput,
|
||||
},
|
||||
})
|
||||
|
||||
export default class ForgotPassword extends Vue {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style src="./forgotPassword.scss" scoped lang="scss"></style>
|
||||
38
web/satellite/src/views/forgotPassword/forgotPassword.html
Normal file
38
web/satellite/src/views/forgotPassword/forgotPassword.html
Normal file
@ -0,0 +1,38 @@
|
||||
<!--Copyright (C) 2019 Storj Labs, Inc.-->
|
||||
<!--See LICENSE for copying information.-->
|
||||
|
||||
<div class="forgot-password-container">
|
||||
<div v-bind:class="loadingClassName">
|
||||
<img src="../../../static/images/register/Loading.gif">
|
||||
</div>
|
||||
<img class="planet" src="../../../static/images/Mars.png" alt="" >
|
||||
<div class="forgot-password-container__wrapper">
|
||||
<div class="forgot-password-container__header">
|
||||
<img class="forgot-password-container__logo" src="../../../static/images/Logo.svg" alt="logo">
|
||||
<div class="forgot-password-container__login-button" >
|
||||
<p>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>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"
|
||||
@setData="setEmail"
|
||||
width="100%"
|
||||
height="46px"
|
||||
isWhite>
|
||||
</HeaderlessInput>
|
||||
<div class="forgot-password-area__submit-container">
|
||||
<div class="forgot-password-area__submit-container__send-button" >
|
||||
<p>Send Configurations</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
310
web/satellite/src/views/forgotPassword/forgotPassword.scss
Normal file
310
web/satellite/src/views/forgotPassword/forgotPassword.scss
Normal file
@ -0,0 +1,310 @@
|
||||
// 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 0px 0px 104px;
|
||||
background-image: url("../../../static/images/Background.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
|
||||
.forgot-password-input {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
top: 66px;
|
||||
right: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
&__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: 139px;
|
||||
height: 62px;
|
||||
}
|
||||
|
||||
&__login-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
border-radius: 6px;
|
||||
border: 1px solid white;
|
||||
cursor: pointer;
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
|
||||
p {
|
||||
font-family: 'font_bold';
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: white;
|
||||
|
||||
p {
|
||||
color: #2683FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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%;
|
||||
|
||||
h1 {
|
||||
font-family: 'font_bold';
|
||||
font-size: 22px;
|
||||
color: white;
|
||||
line-height: 27px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__info-text {
|
||||
font-family: 'font_regular';
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
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: 0px 16px 24px #3A54DF;
|
||||
|
||||
p {
|
||||
font-family: 'font_bold';
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-wrap.full-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.planet {
|
||||
position: absolute;
|
||||
bottom: -61px;
|
||||
right: -257px;
|
||||
z-index: -100;
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
z-index: 100;
|
||||
background-color: rgba(134, 134, 148, 0.7);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.5s linear;
|
||||
-moz-transition: all 0.5s linear;
|
||||
-o-transition: all 0.5s linear;
|
||||
transition: all 0.5s linear;
|
||||
|
||||
img {
|
||||
z-index: 200;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-overlay.active {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
@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: 840px) {
|
||||
.planet {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
.forgot-password-container {
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.planet {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@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 {
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
&__submit-container {
|
||||
&__terms-area {
|
||||
h2 {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
&__send-button {
|
||||
height: 40px;
|
||||
p {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -475,7 +475,7 @@
|
||||
|
||||
<div style="Margin-left: 20px;Margin-right: 20px;Margin-top: 12px;Margin-bottom: 12px;">
|
||||
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
|
||||
<h1 class="size-40" style="Margin-top: 0;Margin-bottom: 0;font-style: normal;font-weight: normal;color: #000;font-size: 32px;line-height: 40px;font-family: montserrat,dejavu sans,verdana,sans-serif;" lang="x-size-40"><span class="font-montserrat"><strong>Forgot password</strong></span></h1>
|
||||
<h1 class="size-40" style="Margin-top: 0;Margin-bottom: 0;font-style: normal;font-weight: normal;color: #000;font-size: 32px;line-height: 40px;font-family: montserrat,dejavu sans,verdana,sans-serif;" lang="x-size-40"><span class="font-montserrat"><strong>You have requested to reset your password</strong></span></h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -493,7 +493,8 @@
|
||||
|
||||
<div style="Margin-left: 20px;Margin-right: 20px;Margin-top: 12px;Margin-bottom: 12px;">
|
||||
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
|
||||
<p class="size-20" style="Margin-top: 0;Margin-bottom: 0;font-family: montserrat,dejavu sans,verdana,sans-serif;font-size: 17px;line-height: 26px;" lang="x-size-20"><span class="font-montserrat">Hi {{ .UserName }},
</span></p><p class="size-20" style="Margin-top: 5px;Margin-bottom: 0;font-family: montserrat,dejavu sans,verdana,sans-serif;font-size: 17px;line-height: 26px;" lang="x-size-20"><span class="font-montserrat">
We received a request to reset your Satellite Account password 
</span></p>
|
||||
<p class="size-20" style="Margin-top: 0;Margin-bottom: 0;font-family: montserrat,dejavu sans,verdana,sans-serif;font-size: 17px;line-height: 26px;" lang="x-size-20"><span class="font-montserrat">Hi {{ .UserName }},
</span></p><p class="size-20" style="Margin-top: 5px;Margin-bottom: 0;font-family: montserrat,dejavu sans,verdana,sans-serif;font-size: 17px;line-height: 26px;" lang="x-size-20"><span class="font-montserrat">

We received a request to reset your Satellite Account password
|
||||
To reset your password, click the following link and follow the instructions. 
</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
269
web/satellite/static/resetPassword/resetPassword.css
Normal file
269
web/satellite/static/resetPassword/resetPassword.css
Normal file
@ -0,0 +1,269 @@
|
||||
/*Copyright (C) 2019 Storj Labs, Inc.*/
|
||||
/*See LICENSE for copying information.*/
|
||||
|
||||
body {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.reset-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 0px 0px 104px;
|
||||
background-image: url("../images/Background.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
}
|
||||
.reset-password-container .reset-password-input {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.reset-password-container .reset-password-input span {
|
||||
position: absolute;
|
||||
top: 66px;
|
||||
right: 43px;
|
||||
}
|
||||
.reset-password-container__wrapper {
|
||||
min-width: 45%;
|
||||
height: 86vh;
|
||||
}
|
||||
.reset-password-container__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
.reset-password-container__logo {
|
||||
cursor: pointer;
|
||||
width: 139px;
|
||||
height: 62px;
|
||||
}
|
||||
.reset-password-container__login-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
border-radius: 6px;
|
||||
border: 1px solid white;
|
||||
cursor: pointer;
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
}
|
||||
.reset-password-container__login-button p {
|
||||
font-family: 'font_bold';
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
color: white;
|
||||
}
|
||||
.reset-password-container__login-button:hover {
|
||||
background-color: white;
|
||||
}
|
||||
.reset-password-container__login-button:hover p {
|
||||
color: #2683ff;
|
||||
}
|
||||
.reset-password-area-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
margin-top: 50px;
|
||||
}
|
||||
.reset-password-area {
|
||||
background-color: transparent;
|
||||
width: 477px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-top: 150px;
|
||||
}
|
||||
.reset-password-area__title-container {
|
||||
height: 48px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
flex-direction: row;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
.reset-password-area__title-container h1 {
|
||||
font-family: 'font_bold';
|
||||
font-size: 22px;
|
||||
color: white;
|
||||
line-height: 27px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
.reset-password-area__submit-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.reset-password-area__submit-container__send-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #2683ff;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
box-shadow: 0px 16px 24px #3a54df;
|
||||
}
|
||||
.reset-password-area__submit-container__send-button p {
|
||||
font-family: 'font_bold';
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
color: white;
|
||||
}
|
||||
.reset-password-area__submit-container__send-button:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
.reset-password-area input {
|
||||
font-family: 'font_regular';
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
resize: none;
|
||||
height: 46px;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
text-indent: 20px;
|
||||
border-color: rgba(56, 75, 101, 0.4);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.reset-password-area input::placeholder {
|
||||
color: #384B65;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.reset-password-area input:first-of-type {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.planet {
|
||||
position: absolute;
|
||||
bottom: -61px;
|
||||
right: -257px;
|
||||
z-index: -100;
|
||||
}
|
||||
.loading-overlay {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
z-index: 100;
|
||||
background-color: rgba(134, 134, 148, 0.7);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.5s linear;
|
||||
-moz-transition: all 0.5s linear;
|
||||
-o-transition: all 0.5s linear;
|
||||
transition: all 0.5s linear;
|
||||
}
|
||||
.loading-overlay img {
|
||||
z-index: 200;
|
||||
}
|
||||
.loading-overlay.active {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
@media screen and (max-height: 840px) {
|
||||
.reset-password-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
.reset-password-container__wrapper {
|
||||
height: 770px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
-ms-overflow-style: none;
|
||||
overflow: -moz-scrollbars-none;
|
||||
}
|
||||
.reset-password-container__wrapper::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-height: 810px) {
|
||||
.reset-password-container__wrapper {
|
||||
height: 700px;
|
||||
}
|
||||
.reset-password-area__submit-container {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 840px) {
|
||||
.planet {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
.reset-password-container {
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.planet {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 650px) {
|
||||
.reset-password-container__wrapper {
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 520px) {
|
||||
.reset-password-container__wrapper {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 420px) {
|
||||
.reset-password-container__wrapper {
|
||||
width: 350px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 320px) {
|
||||
.reset-password-container__wrapper {
|
||||
width: 300px;
|
||||
}
|
||||
.reset-password-container__header {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.reset-password-container__login-button {
|
||||
width: 120px;
|
||||
height: 42px;
|
||||
}
|
||||
.reset-password-area__title-container h1 {
|
||||
font-size: 20px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.reset-password-area__submit-container__terms-area h2 {
|
||||
font-size: 12px;
|
||||
}
|
||||
.reset-password-area__submit-container__send-button {
|
||||
height: 40px;
|
||||
}
|
||||
.reset-password-area__submit-container__send-button p {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
46
web/satellite/static/resetPassword/resetPassword.html
Normal file
46
web/satellite/static/resetPassword/resetPassword.html
Normal file
@ -0,0 +1,46 @@
|
||||
<!--Copyright (C) 2019 Storj Labs, Inc.-->
|
||||
<!--See LICENSE for copying information.-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tardigrade Satellite - Mars</title>
|
||||
|
||||
<link href="/static/static/fonts/font_regular.ttf" rel="stylesheet">
|
||||
<link href="/static/static/fonts/font_bold.ttf" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="resetPassword.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="reset-password-container">
|
||||
<img class="planet" src="../images/Mars.png" alt="" >
|
||||
<div class="reset-password-container__wrapper">
|
||||
<div class="reset-password-container__header">
|
||||
<img class="reset-password-container__logo" src="../images/Logo.svg" alt="logo">
|
||||
<div class="reset-password-container__login-button" >
|
||||
<p>Back to Login</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reset-password-area-wrapper">
|
||||
<div class="reset-password-area">
|
||||
<div class="reset-password-area__title-container">
|
||||
<h1>Please enter your new password.</h1>
|
||||
</div>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="New Password">
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Confirm Password">
|
||||
<div class="reset-password-area__submit-container">
|
||||
<div class="reset-password-area__submit-container__send-button" >
|
||||
<p>Set New Password</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user