copyrights and design changes, search inputs changed (#1684)
This commit is contained in:
parent
2533aa1ab1
commit
b14e7c3765
@ -9,7 +9,7 @@
|
||||
<div v-html='imageSource'></div>
|
||||
</div>
|
||||
<div class='delete-account__form-container'>
|
||||
<p>Are you sure you want to delete your account? If you do so, all your account information will be deleted from the Satellite forever.</p>
|
||||
<p>Are you sure you want to delete your account? If you do so, all your information, projects and API Keys will be deleted forever.(drop from the satellite)</p>
|
||||
<HeaderedInput
|
||||
label='Enter your password'
|
||||
placeholder='Your Password'
|
||||
|
@ -8,7 +8,7 @@
|
||||
<div v-html="imageSource"></div>
|
||||
</div>
|
||||
<div class="add-api-key-popup__form-container">
|
||||
<h2 class="add-api-key-popup__form-container__main-label-text">New API Key</h2>
|
||||
<h2 class="add-api-key-popup__form-container__main-label-text">Create an API Key</h2>
|
||||
<HeaderedInput
|
||||
@setData="onChangeName"
|
||||
label="Name"
|
||||
|
@ -19,10 +19,10 @@
|
||||
<EmptyState
|
||||
:onButtonClick="togglePopup"
|
||||
v-if="isEmpty"
|
||||
mainTitle="You have no API Keys yet"
|
||||
additional-text="<p>We recommend you to create your first API Key for this project. API Keys allow developers to manage their project and build applications over Storj Network through our Uplink CLI.</p>"
|
||||
mainTitle="Let's create your first API Key"
|
||||
additional-text="<p>API keys give access to the project allowing you to create buckets, upload files, and read them. Once you’ve created an API key, you’re ready to interact with the network through our Uplink CLI.</p>"
|
||||
:imageSource="emptyImage"
|
||||
buttonLabel="New Api Key"
|
||||
buttonLabel="Create an Api Key"
|
||||
isButtonShown />
|
||||
<AddAPIKeyPopup v-if="isPopupShown"/>
|
||||
</div>
|
||||
@ -187,4 +187,4 @@ export default class ApiKeysArea extends Vue {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
@ -6,8 +6,8 @@
|
||||
<div class="save-api-popup">
|
||||
<div class="save-api-popup__main">
|
||||
<div class="save-api-popup__content">
|
||||
<h1 class="save-api-popup__content__title">Save your API Key</h1>
|
||||
<p class="save-api-popup__content__name">You will need this to share access to the project with your team members.</p>
|
||||
<h1 class="save-api-popup__content__title">Success! Your API key has been created. It will only appear here once.</h1>
|
||||
<p class="save-api-popup__content__name">This API key allow users or applications to interact with the project.</p>
|
||||
<div class="save-api-popup__content__copy-area">
|
||||
<p class="save-api-popup__content__copy-area__save-api">{{apiKey}}</p>
|
||||
<Button class="save-api-popup__content__copy-area__save-btn" v-clipboard="apiKey" label="Copy" width="140px" height="48px" :onPress="onCopyClick" />
|
||||
@ -151,8 +151,9 @@ export default class AddApiKeyPopup extends Vue {
|
||||
.notification-wrap {
|
||||
background-color: rgba(194, 214, 241, 1);
|
||||
height: 98px;
|
||||
width: calc(100% - 100px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
padding: 0 50px;
|
||||
align-items: center;
|
||||
border-bottom-left-radius: 6px;
|
||||
|
@ -88,7 +88,7 @@ export default class SearchArea extends Vue {
|
||||
border-radius: 6px;
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
padding-right: 20px;
|
||||
padding-right: 100px;
|
||||
padding-left: 20px;
|
||||
font-family: 'font_regular';
|
||||
font-size: 16px;
|
||||
@ -113,4 +113,4 @@ export default class SearchArea extends Vue {
|
||||
::-webkit-input-placeholder {
|
||||
color: #AFB7C1;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
@ -103,6 +103,11 @@ export default class Button extends Vue {
|
||||
|
||||
&.disabled {
|
||||
box-shadow: none;
|
||||
background-color: #DADDE5 !important;
|
||||
|
||||
.label {
|
||||
color: #ACB0BC !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -124,7 +129,8 @@ export default class Button extends Vue {
|
||||
}
|
||||
.container.disabled {
|
||||
background-color: #DADDE5;
|
||||
.label.white {
|
||||
border-color: #DADDE5;
|
||||
.label {
|
||||
color: #ACB0BC;
|
||||
}
|
||||
}
|
||||
|
@ -10,7 +10,8 @@
|
||||
<Button
|
||||
:onPress="onButtonClick"
|
||||
:label="buttonLabel"
|
||||
width="170px" />
|
||||
width="190px"
|
||||
height="50px"/>
|
||||
</div>
|
||||
<div class="empty-state__wrap__img" v-html="imageSource"></div>
|
||||
</div>
|
||||
@ -48,6 +49,7 @@ export default class EmptyStateProjectArea extends Vue {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 120px;
|
||||
color: rgba(56, 75, 101, 0.7);
|
||||
|
||||
&__wrap {
|
||||
text-align: center;
|
||||
@ -76,7 +78,7 @@ export default class EmptyStateProjectArea extends Vue {
|
||||
font-family: 'font_bold';
|
||||
font-size: 32px;
|
||||
line-height: 35px;
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 15px;
|
||||
min-width: 900px;
|
||||
}
|
||||
|
||||
|
@ -18,10 +18,9 @@
|
||||
|
||||
</div>
|
||||
<div class="register-success-popup__form-container">
|
||||
<h2 class="register-success-popup__form-container__main-label-text">Congratulation!</h2>
|
||||
<p>You almost registered on the Satellite, only one step left.
|
||||
Please check your inbox and use the verification link we shared with you in last email.</p>
|
||||
<p>Didn’t receive a verification email?</p>
|
||||
<h2 class="register-success-popup__form-container__main-label-text">Verify Your Account</h2>
|
||||
<p>You have almost finished registering your account on the Tardigrade Satellite. Only one step left. Please check your inbox for a verification email.</p>
|
||||
<!--<p>Didn’t receive a verification email?</p>-->
|
||||
<div class="register-success-popup__form-container__button-container">
|
||||
<Button label="Go to Login" width="450px" height="50px" :onPress="onCloseClick" isWhite />
|
||||
</div>
|
||||
|
@ -83,7 +83,7 @@ export default class ProjectSelectionDropdown extends Vue {
|
||||
.account-dropdown-choice-container {
|
||||
position: absolute;
|
||||
top: 9vh;
|
||||
left: -70px;
|
||||
right: 0;
|
||||
border-radius: 4px;
|
||||
padding: 10px 0px 10px 0px;
|
||||
box-shadow: 0px 4px rgba(231, 232, 238, 0.6);
|
||||
|
@ -4,7 +4,7 @@
|
||||
<template>
|
||||
<div class="new-project-container">
|
||||
<div class="new-project-button-container" :class="{ active: !hasProjects }" v-on:click="toggleSelection" id="newProjectButton">
|
||||
<h1>New Project +</h1>
|
||||
<h1>+ New Project +</h1>
|
||||
</div>
|
||||
<NewProjectPopup v-if="isPopupShown"/>
|
||||
</div>
|
||||
|
@ -36,7 +36,8 @@ export default class NotificationArea extends Vue {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom: 50px;
|
||||
right: 30px;
|
||||
right: 50%;
|
||||
transform: translate(50%);
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0px 12px 24px rgba(175, 183, 193, 0.4);
|
||||
|
@ -11,7 +11,7 @@
|
||||
<div class="delete-project-popup__form-container">
|
||||
<p>Are you sure that you want to delete your project? You will lose all your buckets and files that linked to this project.</p>
|
||||
<div>
|
||||
<p class="text" v-if="!nameError">To proceed with deletion, enter full project name</p>
|
||||
<p class="text" v-if="!nameError">To confirm, enter the project name</p>
|
||||
<div v-if="nameError" class="delete-project-popup__form-container__label">
|
||||
<img src="../../../static/images/register/ErrorInfo.svg"/>
|
||||
<p class="text">{{nameError}}</p>
|
||||
|
@ -5,7 +5,7 @@
|
||||
<div class="new-project-popup-container" v-on:keyup.enter="createProjectClick" v-on:keyup.esc="onCloseClick">
|
||||
<div class="new-project-popup" id="newProjectPopup" >
|
||||
<div class="new-project-popup__info-panel-container">
|
||||
<h2 class="new-project-popup__info-panel-container__main-label-text">Create New Project</h2>
|
||||
<h2 class="new-project-popup__info-panel-container__main-label-text">Create a Project</h2>
|
||||
<img src="@/../static/images/dashboard/CreateNewProject.png" alt="">
|
||||
</div>
|
||||
<div class="new-project-popup__form-container">
|
||||
|
@ -41,12 +41,12 @@
|
||||
<div class="project-details-info-container__usage-report-container__info">
|
||||
<img src="../../../static/images/projectDetails/UsageReport.svg" alt="">
|
||||
<div class="project-details-info-container__usage-report-container__info__text">
|
||||
<h4>Usage Report</h4>
|
||||
<h2>Storj Satellite Usage reports provide access to detailed data, enabling you to better analyze and understand your Storj Network resources consumption</h2>
|
||||
<h4>Usage</h4>
|
||||
<h2>Analyze and understand your storage, egress and object usage amounts</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-details-info-container__usage-report-container__buttons-area">
|
||||
<Button label="More" width="140px" height="48px" :onPress="onMoreClick"/>
|
||||
<Button label="View" width="140px" height="48px" :onPress="onMoreClick"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -228,10 +228,6 @@ export default class ProjectDetailsArea extends Vue {
|
||||
align-items: flex-start;
|
||||
padding: 28px;
|
||||
background-color: #fff;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 12px 24px rgba(175, 183, 193, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
&__description-container {
|
||||
@ -274,6 +270,15 @@ export default class ProjectDetailsArea extends Vue {
|
||||
|
||||
svg {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
rect {
|
||||
fill: #2683FF !important;
|
||||
}
|
||||
path {
|
||||
fill: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -12,13 +12,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="usage-report-container__header">
|
||||
<p>Usage Report</p>
|
||||
<p>Usage</p>
|
||||
<div class="usage-report-container__header__options-area">
|
||||
<div class="usage-report-container__header__options-area__option active" @click.prevent="onCurrentRollupClick">
|
||||
<p>Current roll up period</p>
|
||||
<p>Current Billing Period</p>
|
||||
</div>
|
||||
<div class="usage-report-container__header__options-area__option" @click.prevent="onPreviousRollupClick">
|
||||
<p>Previous Roll Up Period</p>
|
||||
<p>Previous Billing Period</p>
|
||||
</div>
|
||||
<div class="usage-report-container__header__options-area__option" @click.prevent.self="onCustomDateClick">
|
||||
<p @click.prevent.self="onCustomDateClick">Custom Date Range</p>
|
||||
@ -32,15 +32,15 @@
|
||||
<div class="usage-report-container__main-area">
|
||||
<div class="usage-report-container__main-area__info-area">
|
||||
<div class="usage-report-container__main-area__info-area__item">
|
||||
<h1>Storage GB*H</h1>
|
||||
<h1>Storage GBh</h1>
|
||||
<h2>{{storage}}</h2>
|
||||
</div>
|
||||
<div class="usage-report-container__main-area__info-area__item">
|
||||
<h1>Egress GB</h1>
|
||||
<h1>Egress GBh</h1>
|
||||
<h2>{{egress}}</h2>
|
||||
</div>
|
||||
<div class="usage-report-container__main-area__info-area__item">
|
||||
<h1>Objects Count*H</h1>
|
||||
<h1>Objects per Hour</h1>
|
||||
<h2>{{objectsCount}}</h2>
|
||||
</div>
|
||||
</div>
|
||||
@ -335,8 +335,8 @@ import { NOTIFICATION_ACTIONS, PROJECT_USAGE_ACTIONS } from '@/utils/constants/a
|
||||
|
||||
p {
|
||||
font-family: 'font_regular';
|
||||
font-size: 20px;
|
||||
line-height: 27px;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: #AFB7C1;
|
||||
|
||||
b {
|
||||
@ -354,8 +354,8 @@ import { NOTIFICATION_ACTIONS, PROJECT_USAGE_ACTIONS } from '@/utils/constants/a
|
||||
p {
|
||||
font-family: 'font_medium';
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
line-height: 29px;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: #354049;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
@ -6,8 +6,7 @@
|
||||
<div class='add-user' id="addTeamMemberPopup">
|
||||
<div class="add-user__main">
|
||||
<div class='add-user__info-panel-container'>
|
||||
<h2 class='add-user__info-panel-container__main-label-text'>Add New User</h2>
|
||||
<p class="add-user__info-panel-container__text">You can only add users who are already registered on Storj Satellite</p>
|
||||
<h2 class='add-user__info-panel-container__main-label-text'>Add Team Member</h2>
|
||||
<div v-html='imageSource'></div>
|
||||
</div>
|
||||
<div class='add-user__form-container'>
|
||||
@ -38,13 +37,10 @@
|
||||
</div>
|
||||
<p v-bind:class="[isMaxInputsCount ? 'inactive-label' : '']">Add Another</p>
|
||||
</div>
|
||||
<div class="add-user-row__item">
|
||||
<p class="add-user__attention-text">Be careful! All new team members will have full admin rights. Otherwise use API Keys to share limited access.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class='add-user__form-container__button-container'>
|
||||
<Button label='Cancel' width='205px' height='48px' :onPress="onClose" isWhite/>
|
||||
<Button label='Add Users' width='205px' height='48px' :onPress="isButtonActive ? onAddUsersClick : () => {}" :isDisabled="!isButtonActive"/>
|
||||
<Button label='Add Team Members' width='205px' height='48px' :onPress="isButtonActive ? onAddUsersClick : () => {}" :isDisabled="!isButtonActive"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class='add-user__close-cross-container'>
|
||||
@ -246,10 +242,8 @@ export default class AddUserPopup extends Vue {}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 50%;
|
||||
|
||||
&:first-child {
|
||||
width: 36%;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
@ -257,21 +251,17 @@ export default class AddUserPopup extends Vue {}
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
svg {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 !important;
|
||||
font-family: 'font_medium';
|
||||
font-size: 16px;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
p {
|
||||
font-size: 12px;
|
||||
margin: 0 !important;
|
||||
text-align: left;
|
||||
padding-left: 30px;
|
||||
margin-block-start: 0em;
|
||||
margin-block-end: 0em;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -331,6 +321,7 @@ export default class AddUserPopup extends Vue {}
|
||||
justify-content: center;
|
||||
background-color: #FFFFFF;
|
||||
padding: 80px 20px 80px 60px;
|
||||
width: calc(100% - 80px);
|
||||
}
|
||||
|
||||
&__info-panel-container {
|
||||
@ -354,7 +345,7 @@ export default class AddUserPopup extends Vue {}
|
||||
line-height: 29px;
|
||||
color: #384B65;
|
||||
margin-top: 0;
|
||||
width: 100%;
|
||||
width: 107%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -434,10 +425,6 @@ export default class AddUserPopup extends Vue {}
|
||||
font-size: 16px;
|
||||
line-height: 25px;
|
||||
padding-left: 50px;
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@ -477,8 +464,9 @@ export default class AddUserPopup extends Vue {}
|
||||
.notification-wrap {
|
||||
background-color: rgba(194, 214, 241, 1);
|
||||
height: 98px;
|
||||
width: calc(100% - 100px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
padding: 0 50px;
|
||||
align-items: center;
|
||||
border-bottom-left-radius: 6px;
|
||||
|
@ -141,6 +141,12 @@ export default class TeamArea extends Vue {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
.team-header {
|
||||
max-width: 76%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
.team-container {
|
||||
|
||||
@ -190,4 +196,4 @@ export default class TeamArea extends Vue {
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
@ -98,7 +98,7 @@
|
||||
border-radius: 6px;
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
padding-right: 20px;
|
||||
padding-right: 100px;
|
||||
padding-left: 20px;
|
||||
font-family: 'font_regular';
|
||||
font-size: 16px;
|
||||
@ -123,4 +123,4 @@
|
||||
::-webkit-input-placeholder {
|
||||
color: #AFB7C1;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
@ -7,13 +7,13 @@
|
||||
<div class="sort-dropdown-overflow-container">
|
||||
<!-- TODO: add selection logic onclick -->
|
||||
<div class="sort-dropdown-item-container" v-on:click="onSortUsersClick(sortByEnum.EMAIL)">
|
||||
<h2>Sort by email</h2>
|
||||
<h2>Sort by Email</h2>
|
||||
</div>
|
||||
<div class="sort-dropdown-item-container" v-on:click="onSortUsersClick(sortByEnum.CREATED_AT)">
|
||||
<h2>Sort by date</h2>
|
||||
<h2>Sort by Date</h2>
|
||||
</div>
|
||||
<div class="sort-dropdown-item-container" v-on:click="onSortUsersClick(sortByEnum.NAME)">
|
||||
<h2>Sort by name</h2>
|
||||
<h2>Sort by Name</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -107,4 +107,4 @@ export default class SortDropdown extends Vue {
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
@ -4,4 +4,6 @@
|
||||
export const LOADING_CLASSES = {
|
||||
LOADING_OVERLAY: 'loading-overlay',
|
||||
LOADING_OVERLAY_ACTIVE: 'loading-overlay active',
|
||||
LOADING_LOGO: 'loading-overlay__logo',
|
||||
LOADING_LOGO_ACTIVE: 'loading-overlay__logo active',
|
||||
};
|
||||
|
@ -5,14 +5,14 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import HeaderlessInput from '../../components/common/HeaderlessInput.vue';
|
||||
import Button from '../../components/common/Button.vue';
|
||||
import { setToken } from '../../utils/tokenManager';
|
||||
import ROUTES from '../../utils/constants/routerConstants';
|
||||
import { APP_STATE_ACTIONS, NOTIFICATION_ACTIONS } from '../../utils/constants/actionNames';
|
||||
import { getTokenRequest } from '../../api/users';
|
||||
import { LOADING_CLASSES } from '../../utils/constants/classConstants';
|
||||
import { AppState } from '../../utils/constants/appStateEnum';
|
||||
import HeaderlessInput from '@/components/common/HeaderlessInput.vue';
|
||||
import Button from '@/components/common/Button.vue';
|
||||
import { setToken } from '@/utils/tokenManager';
|
||||
import ROUTES from '@/utils/constants/routerConstants';
|
||||
import { APP_STATE_ACTIONS, NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
|
||||
import { getTokenRequest } from '@/api/users';
|
||||
import { LOADING_CLASSES } from '@/utils/constants/classConstants';
|
||||
import { AppState } from '@/utils/constants/appStateEnum';
|
||||
|
||||
@Component({
|
||||
data: function () {
|
||||
@ -21,6 +21,7 @@ import { AppState } from '../../utils/constants/appStateEnum';
|
||||
email: '',
|
||||
password: '',
|
||||
loadingClassName: LOADING_CLASSES.LOADING_OVERLAY,
|
||||
loadingLogoClassName: LOADING_CLASSES.LOADING_LOGO,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@ -35,17 +36,13 @@ import { AppState } from '../../utils/constants/appStateEnum';
|
||||
},
|
||||
activateLoadingOverlay: function(): void {
|
||||
this.$data.loadingClassName = LOADING_CLASSES.LOADING_OVERLAY_ACTIVE;
|
||||
setTimeout(() => {
|
||||
this.$data.loadingClassName = LOADING_CLASSES.LOADING_OVERLAY;
|
||||
}, 2000);
|
||||
this.$data.loadingLogoClassName = LOADING_CLASSES.LOADING_LOGO_ACTIVE;
|
||||
},
|
||||
onLogin: async function (): Promise<any> {
|
||||
if (!this.$data.email || !this.$data.password) {
|
||||
return;
|
||||
}
|
||||
|
||||
(this as any).activateLoadingOverlay();
|
||||
|
||||
let loginResponse = await getTokenRequest(this.$data.email, this.$data.password);
|
||||
if (!loginResponse.isSuccess) {
|
||||
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, loginResponse.errorMessage);
|
||||
@ -53,9 +50,13 @@ import { AppState } from '../../utils/constants/appStateEnum';
|
||||
return;
|
||||
}
|
||||
|
||||
setToken(loginResponse.data);
|
||||
this.$store.dispatch(APP_STATE_ACTIONS.CHANGE_STATE, AppState.LOADING);
|
||||
this.$router.push(ROUTES.PROJECT_DETAILS.path);
|
||||
(this as any).activateLoadingOverlay();
|
||||
|
||||
setTimeout(() => {
|
||||
setToken(loginResponse.data);
|
||||
this.$store.dispatch(APP_STATE_ACTIONS.CHANGE_STATE, AppState.LOADING);
|
||||
this.$router.push(ROUTES.PROJECT_DETAILS.path);
|
||||
}, 2000);
|
||||
},
|
||||
onSignUpClick: function (): void {
|
||||
this.$router.push(ROUTES.REGISTER.path);
|
||||
|
@ -2,9 +2,8 @@
|
||||
<!--See LICENSE for copying information.-->
|
||||
|
||||
<div class="login-container" v-on:keyup.enter="onLogin">
|
||||
<div v-bind:class="loadingClassName">
|
||||
<img class="loading-overlay__logo" src="../../../static/images/Logo.svg" alt="loading-logo">
|
||||
</div>
|
||||
<div v-bind:class="loadingClassName"></div>
|
||||
<img v-bind:class="loadingLogoClassName" src="../../../static/images/LogoWhite.svg" alt="loading-logo">
|
||||
<img class="image" src="../../../static/images/AuthImage.svg" alt="" >
|
||||
<div class="login-container__wrapper">
|
||||
<div class="login-container__header">
|
||||
@ -38,7 +37,7 @@
|
||||
<h3><strong>Forgot password?</strong></h3>
|
||||
</router-link>
|
||||
<div class="login-area__submit-area__login-button" v-on:click.prevent="onLogin">
|
||||
<p>Login</p>
|
||||
<p>Log In</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-area__info-area">
|
||||
|
@ -150,7 +150,7 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 16px 24px #3A54DF;
|
||||
box-shadow: 0px 4px 20px rgba(35, 121, 236, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -237,9 +237,6 @@
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -248,7 +245,7 @@
|
||||
height: 100vh;
|
||||
width: 0;
|
||||
z-index: 100;
|
||||
background-color: rgba(134, 134, 148, 0.7);
|
||||
background-color: #2683FF;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.5s linear;
|
||||
@ -257,9 +254,20 @@
|
||||
transition: all 0.5s linear;
|
||||
|
||||
&__logo {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%);
|
||||
display: block;
|
||||
width: 240px;
|
||||
height: 110px;
|
||||
z-index: 200;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
-webkit-transition: visibility 0.5s linear, opacity 0.5s linear;
|
||||
-moz-transition: visibility 0.5s linear, opacity 0.5s linear;
|
||||
-o-transition: visibility 0.5s linear, opacity 0.5s linear;
|
||||
transition: visibility 0.5s linear, opacity 0.5s linear;
|
||||
}
|
||||
}
|
||||
|
||||
@ -269,6 +277,11 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.loading-overlay__logo.active {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1500px) {
|
||||
.login-container {
|
||||
&__wrapper {
|
||||
@ -280,12 +293,29 @@
|
||||
@media screen and (max-width: 1300px) {
|
||||
.login-container {
|
||||
&__wrapper {
|
||||
min-width: 75%;
|
||||
min-width: 40%;
|
||||
}
|
||||
}
|
||||
.image {
|
||||
display: block;
|
||||
}
|
||||
.login-area {
|
||||
width: 516px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1168px) {
|
||||
.login-container {
|
||||
&__wrapper {
|
||||
min-width: 64%;
|
||||
}
|
||||
}
|
||||
.image {
|
||||
display: none;
|
||||
}
|
||||
.login-area {
|
||||
width: 516px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 750px) {
|
||||
|
@ -20,7 +20,7 @@
|
||||
</div>
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Full name"
|
||||
label="Full Name"
|
||||
placeholder="Enter Full Name"
|
||||
:error="fullNameError"
|
||||
@setData="setFullName"
|
||||
@ -46,14 +46,14 @@
|
||||
</HeaderlessInput>
|
||||
<div class="register-input">
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Password"
|
||||
placeholder="Enter Password"
|
||||
:error="passwordError"
|
||||
@setData="setPassword"
|
||||
width="100%"
|
||||
height="46px"
|
||||
isPassword>
|
||||
class="full-input"
|
||||
label="Password"
|
||||
placeholder="Enter Password"
|
||||
:error="passwordError"
|
||||
@setData="setPassword"
|
||||
width="100%"
|
||||
height="46px"
|
||||
isPassword>
|
||||
</HeaderlessInput>
|
||||
<span
|
||||
v-html="infoImage"
|
||||
|
@ -259,7 +259,7 @@ body {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 16px 24px #3A54DF;
|
||||
box-shadow: 0px 4px 20px rgba(35, 121, 236, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -22,7 +22,7 @@
|
||||
<path d="M5 19C4.42857 19 4 18.3333 4 17.5556C4 16.7778 4.42857 16 5 16C5.57143 16 6 16.5556 6 17.4444C5.92857 18.3333 5.57143 19 5 19Z" fill="#2683FF"/>
|
||||
<path d="M48.9327 19C48.3635 19 47.9366 18.3333 48.0078 17.4444C48.0078 16.5556 48.4347 16 49.0039 16C49.5731 16 50 16.6667 50 17.5556C49.9288 18.3333 49.4308 19 48.9327 19Z" fill="#2683FF"/>
|
||||
</svg>
|
||||
<p class="container__title">Congratulations!</p>
|
||||
<p class="container__title">Let's Get Started!</p>
|
||||
<p class="container__info">You have successfully registered on Satellite. Now you can Log In to your account, create Projects and build Applications over our distributed cloud storage network.</p>
|
||||
<a href="/login">
|
||||
<div class="container__button">
|
||||
|
15
web/satellite/static/images/LogoWhite.svg
Normal file
15
web/satellite/static/images/LogoWhite.svg
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 9.9 KiB |
Loading…
Reference in New Issue
Block a user