web/satellite: fixed inputs to have correct box-sizing
Fixed inputs to have correct box-sizing and fixed stylings for it. Removed 2 unused components. Fixed VInfo component's small styling issue. Change-Id: I268b4b754be477d4e0d36b3946d62d65fd7d6cc8
This commit is contained in:
Vitalii Shpital
parent
84a383638b
commit
c06424cbf3
@ -47,7 +47,6 @@
|
||||
</div>
|
||||
<div v-else class="create-passphrase__container__value-area__password">
|
||||
<HeaderedInput
|
||||
class="create-passphrase__container__value-area__password__input"
|
||||
placeholder="Enter encryption passphrase here"
|
||||
:error="errorMessage"
|
||||
@setData="onChangePassphrase"
|
||||
@ -448,10 +447,6 @@ export default class CreatePassphraseStep extends Vue {
|
||||
&__password {
|
||||
width: 100%;
|
||||
margin: 10px 0 20px 0;
|
||||
|
||||
&__input {
|
||||
width: calc(100% - 2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,7 +7,6 @@
|
||||
<h1 class="enter-passphrase__title">Enter Encryption Passphrase</h1>
|
||||
<p class="enter-passphrase__sub-title">Enter the passphrase you most recently generated for Access Grants</p>
|
||||
<HeaderedInput
|
||||
class="enter-passphrase__input"
|
||||
label="Encryption Passphrase"
|
||||
placeholder="Enter your passphrase here"
|
||||
:error="errorMessage"
|
||||
@ -194,10 +193,6 @@ export default class EnterPassphraseStep extends Vue {
|
||||
max-width: 340px;
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: calc(100% - 2px);
|
||||
}
|
||||
|
||||
&__next-button {
|
||||
margin-top: 93px;
|
||||
}
|
||||
|
||||
@ -6,7 +6,6 @@
|
||||
<h1 class="name-step__title">Name Your Access Grant</h1>
|
||||
<p class="name-step__sub-title">Enter a name for your new Access grant to get started.</p>
|
||||
<HeaderedInput
|
||||
class="name-step__input"
|
||||
label="Access Grant Name"
|
||||
placeholder="Enter a name here..."
|
||||
:error="errorMessage"
|
||||
@ -169,10 +168,6 @@ export default class NameStep extends Vue {
|
||||
margin: 0 0 80px 0;
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: calc(100% - 2px);
|
||||
}
|
||||
|
||||
&__buttons-area {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
@ -13,7 +13,6 @@
|
||||
class="full-input"
|
||||
label="Old Password"
|
||||
placeholder="Enter Old Password"
|
||||
width="100%"
|
||||
is-password="true"
|
||||
:error="oldPasswordError"
|
||||
@setData="setOldPassword"
|
||||
@ -23,7 +22,6 @@
|
||||
class="full-input"
|
||||
label="New Password"
|
||||
placeholder="Enter New Password"
|
||||
width="100%"
|
||||
is-password="true"
|
||||
:error="newPasswordError"
|
||||
@setData="setNewPassword"
|
||||
@ -39,7 +37,6 @@
|
||||
class="full-input"
|
||||
label="Confirm Password"
|
||||
placeholder="Confirm Password"
|
||||
width="100%"
|
||||
is-password="true"
|
||||
:error="confirmationPasswordError"
|
||||
@setData="setPasswordConfirmation"
|
||||
@ -196,7 +193,6 @@ export default class ChangePasswordPopup extends Vue {
|
||||
}
|
||||
|
||||
.full-input {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
|
||||
@ -1,235 +0,0 @@
|
||||
// Copyright (C) 2019 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div class="delete-account-container">
|
||||
<div id="deleteAccountPopup" class="delete-account">
|
||||
<div class="delete-account__info-panel-container">
|
||||
<h2 class="delete-account__info-panel-container__main-label-text">Delete account</h2>
|
||||
<DeleteAccountIcon />
|
||||
</div>
|
||||
<div class="delete-account__form-container">
|
||||
<p class="delete-account__form-container__confirmation-text">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"
|
||||
class="full-input"
|
||||
width="100%"
|
||||
is-password="true"
|
||||
:error="passwordError"
|
||||
@setData="setPassword"
|
||||
/>
|
||||
<div class="delete-account__form-container__button-container">
|
||||
<VButton
|
||||
label="Cancel"
|
||||
width="205px" height="48px"
|
||||
:on-press="onCloseClick"
|
||||
is-transparent="true"
|
||||
/>
|
||||
<VButton
|
||||
label="Delete"
|
||||
width="205px"
|
||||
height="48px"
|
||||
class="red"
|
||||
:on-press="onDeleteAccountClick"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="delete-account__close-cross-container" @click="onCloseClick">
|
||||
<CloseCrossIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts'>
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
import HeaderedInput from '@/components/common/HeaderedInput.vue';
|
||||
import VButton from '@/components/common/VButton.vue';
|
||||
|
||||
import DeleteAccountIcon from '@/../static/images/account/deleteAccountPopup/deleteAccount.svg';
|
||||
import CloseCrossIcon from '@/../static/images/common/closeCross.svg';
|
||||
|
||||
import { AuthHttpApi } from '@/api/auth';
|
||||
import { RouteConfig } from '@/router';
|
||||
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
|
||||
import { Validator } from '@/utils/validation';
|
||||
|
||||
// @vue/component
|
||||
@Component({
|
||||
components: {
|
||||
DeleteAccountIcon,
|
||||
CloseCrossIcon,
|
||||
HeaderedInput,
|
||||
VButton,
|
||||
},
|
||||
})
|
||||
export default class DeleteAccountPopup extends Vue {
|
||||
public passwordError = '';
|
||||
private password = '';
|
||||
private isLoading = false;
|
||||
|
||||
private readonly auth: AuthHttpApi = new AuthHttpApi();
|
||||
|
||||
public setPassword(value: string): void {
|
||||
this.password = value;
|
||||
this.passwordError = '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Validates password and if it is correct tries to delete account, close popup and redirect to login page.
|
||||
*/
|
||||
public async onDeleteAccountClick(): Promise<void> {
|
||||
if (this.isLoading) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.isLoading = true;
|
||||
|
||||
if (!Validator.password(this.password)) {
|
||||
this.passwordError = 'Invalid password. Must be 6 or more characters';
|
||||
this.isLoading = false;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await this.auth.delete(this.password);
|
||||
await this.$notify.success('Account was successfully deleted');
|
||||
|
||||
this.isLoading = false;
|
||||
await this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_DEL_ACCOUNT);
|
||||
await this.$router.push(RouteConfig.Login.path);
|
||||
} catch (error) {
|
||||
await this.$notify.error(error.message);
|
||||
this.isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Closes popup.
|
||||
*/
|
||||
public onCloseClick(): void {
|
||||
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_DEL_ACCOUNT);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
.delete-account-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(134, 134, 148, 0.4);
|
||||
z-index: 1121;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: 'font_regular', sans-serif;
|
||||
}
|
||||
|
||||
.input-container.full-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: #eb5757;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin: 0 !important;
|
||||
font-size: 16px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.delete-account {
|
||||
width: 100%;
|
||||
max-width: 845px;
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
padding: 100px 100px 100px 80px;
|
||||
|
||||
&__info-panel-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-right: 100px;
|
||||
|
||||
&__main-label-text {
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
color: #384b65;
|
||||
margin: 0 0 60px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__form-container {
|
||||
width: 100%;
|
||||
max-width: 450px;
|
||||
|
||||
&__confirmation-text {
|
||||
margin: 0 0 25px 0;
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 25px;
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&__button-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
&__close-cross-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 40px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover .close-cross-svg-path {
|
||||
fill: #2683ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 720px) {
|
||||
|
||||
.delete-account {
|
||||
padding: 10px;
|
||||
|
||||
&__info-panel-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__form-container {
|
||||
|
||||
&__button-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -12,10 +12,8 @@
|
||||
<h2 class="edit-profile-popup__form-container__main-label-text">Edit Profile</h2>
|
||||
</div>
|
||||
<HeaderedInput
|
||||
class="full-input"
|
||||
label="Full Name"
|
||||
placeholder="Enter Full Name"
|
||||
width="100%"
|
||||
:error="fullNameError"
|
||||
:init-value="userInfo.fullName"
|
||||
@setData="setFullName"
|
||||
@ -137,10 +135,6 @@ export default class EditProfilePopup extends Vue {
|
||||
font-family: 'font_regular', sans-serif;
|
||||
}
|
||||
|
||||
.input-container.full-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.edit-profile-popup {
|
||||
width: 100%;
|
||||
max-width: 440px;
|
||||
|
||||
@ -189,13 +189,6 @@ export default class SettingsArea extends Vue {
|
||||
this.isMFACodesPopup = !this.isMFACodesPopup;
|
||||
}
|
||||
|
||||
/**
|
||||
* Opens delete account popup.
|
||||
*/
|
||||
public toggleDeleteAccountPopup(): void {
|
||||
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_DEL_ACCOUNT);
|
||||
}
|
||||
|
||||
/**
|
||||
* Opens change password popup.
|
||||
*/
|
||||
|
||||
@ -14,7 +14,6 @@
|
||||
<HeaderlessInput
|
||||
:label="inputLabel"
|
||||
placeholder="Enter Coupon Code"
|
||||
class="add-coupon__input"
|
||||
height="52px"
|
||||
:with-icon="true"
|
||||
@setData="setCouponCode"
|
||||
|
||||
@ -46,7 +46,6 @@
|
||||
<div v-else class="encrypt-container__enter">
|
||||
<HeaderlessInput
|
||||
placeholder="Enter a passphrase here..."
|
||||
width="100%"
|
||||
:error="enterError"
|
||||
@setData="setPassphrase"
|
||||
/>
|
||||
|
||||
@ -90,7 +90,7 @@ export default class HeaderedInput extends HeaderlessInput {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-top: 10px;
|
||||
width: 48%;
|
||||
width: 100%;
|
||||
font-family: 'font_regular', sans-serif;
|
||||
}
|
||||
|
||||
@ -159,9 +159,12 @@ export default class HeaderedInput extends HeaderlessInput {
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
&::placeholder {
|
||||
font-family: 'font_medium', sans-serif;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
<div class="info" @mouseenter="toggleVisibility" @mouseleave="toggleVisibility">
|
||||
<slot name="icon" />
|
||||
<div v-if="isVisible" class="info__box">
|
||||
<div v-if="isClickable" class="info__box__click-mock" />
|
||||
<div class="info__box__arrow" />
|
||||
<div class="info__box__message">
|
||||
<h1 v-if="title" class="info__box__message__title">{{ title }}</h1>
|
||||
@ -37,8 +36,6 @@ import VButton from '@/components/common/VButton.vue';
|
||||
export default class VInfo extends Vue {
|
||||
@Prop({default: ''})
|
||||
private readonly title: string;
|
||||
@Prop({default: false})
|
||||
private readonly isClickable: boolean;
|
||||
@Prop({default: ''})
|
||||
private readonly buttonLabel: string;
|
||||
@Prop({default: () => false})
|
||||
@ -79,7 +76,7 @@ export default class VInfo extends Vue {
|
||||
z-index: 1;
|
||||
|
||||
&__click-mock {
|
||||
height: 24px;
|
||||
height: 2px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
||||
@ -29,11 +29,10 @@
|
||||
class="header-container__right-area__info"
|
||||
title="Need some help?"
|
||||
button-label="START TOUR"
|
||||
is-clickable="true"
|
||||
:on-button-click="onStartTourButtonClick"
|
||||
>
|
||||
<template #icon>
|
||||
<InfoIcon />
|
||||
<InfoIcon class="header-container__right-area__info__icon" />
|
||||
</template>
|
||||
<template #message>
|
||||
<p class="header-container__right-area__info__message">
|
||||
@ -181,6 +180,10 @@ export default class HeaderArea extends Vue {
|
||||
max-height: 24px;
|
||||
margin-right: 17px;
|
||||
|
||||
&__icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__message {
|
||||
color: #586c86;
|
||||
font-family: 'font_regular', sans-serif;
|
||||
@ -247,7 +250,7 @@ export default class HeaderArea extends Vue {
|
||||
}
|
||||
|
||||
::v-deep .info__box {
|
||||
top: calc(100% - 24px);
|
||||
top: 100%;
|
||||
|
||||
&__message {
|
||||
min-width: 335px;
|
||||
|
||||
@ -141,7 +141,6 @@ export default class ObjectsPopup extends Vue {
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: calc(100% - 4px);
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
|
||||
@ -20,10 +20,9 @@
|
||||
<VInfo
|
||||
class="share-object__msg__info-button"
|
||||
title="Check out the documentation for more info"
|
||||
is-clickable="true"
|
||||
>
|
||||
<template #icon>
|
||||
<InfoIcon />
|
||||
<InfoIcon class="share-object__msg__info-button__icon" />
|
||||
</template>
|
||||
<template #message>
|
||||
<p class="share-object__msg__info-button__message">
|
||||
@ -127,6 +126,10 @@ export default class ShareObject extends Vue {
|
||||
&__info-button {
|
||||
max-width: 18px;
|
||||
|
||||
&__icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__message {
|
||||
color: #586c86;
|
||||
font-size: 12px;
|
||||
@ -161,7 +164,7 @@ export default class ShareObject extends Vue {
|
||||
}
|
||||
|
||||
::v-deep .info__box {
|
||||
top: calc(100% - 24px);
|
||||
top: 100%;
|
||||
|
||||
&__message {
|
||||
min-width: 360px;
|
||||
|
||||
@ -11,7 +11,6 @@
|
||||
additional-label="Up To 20 Characters"
|
||||
placeholder="Enter Project Name"
|
||||
class="full-input"
|
||||
width="100%"
|
||||
is-limit-shown="true"
|
||||
:current-limit="projectName.length"
|
||||
:max-symbols="20"
|
||||
@ -24,8 +23,7 @@
|
||||
additional-label="Optional"
|
||||
class="full-input"
|
||||
is-multiline="true"
|
||||
height="60px"
|
||||
width="calc(100% - 42px)"
|
||||
height="100px"
|
||||
is-limit-shown="true"
|
||||
:current-limit="description.length"
|
||||
:max-symbols="100"
|
||||
@ -164,11 +162,6 @@ export default class NewProjectPopup extends Vue {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.full-input {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.create-project-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -223,4 +216,8 @@ export default class NewProjectPopup extends Vue {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.full-input {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,300 +0,0 @@
|
||||
// Copyright (C) 2019 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div class="delete-project-popup-container">
|
||||
<div id="deleteProjectPopup" class="delete-project-popup">
|
||||
<div class="delete-project-popup__info-panel-container">
|
||||
<h2 class="delete-project-popup__info-panel-container__main-label-text">Delete Project</h2>
|
||||
<DeleteProjectIcon />
|
||||
</div>
|
||||
<div class="delete-project-popup__form-container">
|
||||
<p class="delete-project-popup__form-container__confirmation-text">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 v-if="!nameError" class="text">To confirm, enter the project name</p>
|
||||
<div v-if="nameError" class="delete-project-popup__form-container__label">
|
||||
<ErrorIcon alt="Red error icon with explanation mark" />
|
||||
<p class="text">{{ nameError }}</p>
|
||||
</div>
|
||||
<input
|
||||
v-model="projectName"
|
||||
class="delete-project-input"
|
||||
type="text"
|
||||
placeholder="Enter Project Name"
|
||||
@keyup="resetError"
|
||||
>
|
||||
</div>
|
||||
<div class="delete-project-popup__form-container__button-container">
|
||||
<VButton
|
||||
label="Cancel"
|
||||
width="205px"
|
||||
height="48px"
|
||||
:on-press="onCloseClick"
|
||||
is-transparent="true"
|
||||
/>
|
||||
<VButton
|
||||
label="Delete"
|
||||
width="205px"
|
||||
height="48px"
|
||||
class="red"
|
||||
:on-press="onDeleteProjectClick"
|
||||
:is-disabled="isDeleteButtonDisabled"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="delete-project-popup__close-cross-container" @click="onCloseClick">
|
||||
<CloseCrossIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
import VButton from '@/components/common/VButton.vue';
|
||||
|
||||
import CloseCrossIcon from '@/../static/images/common/closeCross.svg';
|
||||
import DeleteProjectIcon from '@/../static/images/project/deleteProject.svg';
|
||||
import ErrorIcon from '@/../static/images/register/ErrorInfo.svg';
|
||||
|
||||
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
|
||||
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
|
||||
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
|
||||
import {
|
||||
APP_STATE_ACTIONS,
|
||||
PM_ACTIONS,
|
||||
} from '@/utils/constants/actionNames';
|
||||
|
||||
// @vue/component
|
||||
@Component({
|
||||
components: {
|
||||
VButton,
|
||||
DeleteProjectIcon,
|
||||
ErrorIcon,
|
||||
CloseCrossIcon,
|
||||
},
|
||||
})
|
||||
export default class DeleteProjectPopup extends Vue {
|
||||
private projectName = '';
|
||||
private nameError = '';
|
||||
private isLoading = false;
|
||||
|
||||
public resetError (): void {
|
||||
this.nameError = '';
|
||||
}
|
||||
|
||||
/**
|
||||
* If entered project name matches tries to delete project and select another.
|
||||
*/
|
||||
public async onDeleteProjectClick(): Promise<void> {
|
||||
if (this.isLoading) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.validateProjectName()) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.isLoading = true;
|
||||
|
||||
try {
|
||||
await this.$store.dispatch(PROJECTS_ACTIONS.DELETE, this.$store.getters.selectedProject.id);
|
||||
await this.$notify.success('Project was successfully deleted');
|
||||
await this.selectProject();
|
||||
} catch (e) {
|
||||
await this.$notify.error(e.message);
|
||||
}
|
||||
|
||||
this.isLoading = false;
|
||||
|
||||
await this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_DEL_PROJ);
|
||||
}
|
||||
|
||||
/**
|
||||
* Closes popup.
|
||||
*/
|
||||
public onCloseClick(): void {
|
||||
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_DEL_PROJ);
|
||||
}
|
||||
|
||||
/**
|
||||
* Indicates if delete button is disabled when project name is not entered or incorrect.
|
||||
*/
|
||||
public get isDeleteButtonDisabled(): boolean {
|
||||
return !this.projectName || !!this.nameError;
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks is entered project name matches selected.
|
||||
*/
|
||||
private validateProjectName(): boolean {
|
||||
if (this.projectName === this.$store.getters.selectedProject.name) {
|
||||
return true;
|
||||
}
|
||||
|
||||
this.nameError = 'Name doesn\'t match with current project name';
|
||||
this.isLoading = false;
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
private async selectProject(): Promise<void> {
|
||||
if (this.$store.state.projectsModule.projects.length === 0) {
|
||||
await this.$store.dispatch(PM_ACTIONS.CLEAR);
|
||||
await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR);
|
||||
await this.$store.dispatch(BUCKET_ACTIONS.CLEAR);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// TODO: reuse select project functionality
|
||||
await this.$store.dispatch(PROJECTS_ACTIONS.SELECT, this.$store.state.projectsModule.projects[0].id);
|
||||
await this.$store.dispatch(PM_ACTIONS.FETCH, 1);
|
||||
await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.FETCH, 1);
|
||||
await this.$store.dispatch(BUCKET_ACTIONS.FETCH, 1);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.delete-project-popup-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(134, 134, 148, 0.4);
|
||||
z-index: 1121;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: 'font_medium', sans-serif;
|
||||
}
|
||||
|
||||
.input-container.full-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: #eb5757;
|
||||
}
|
||||
|
||||
.delete-project-popup {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
height: 460px;
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
padding: 20px 100px 0 100px;
|
||||
|
||||
&__info-panel-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-right: 55px;
|
||||
|
||||
&__main-label-text {
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
color: #384b65;
|
||||
margin-bottom: 30px;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__form-container {
|
||||
width: 100%;
|
||||
max-width: 440px;
|
||||
height: 335px;
|
||||
|
||||
&__confirmation-text {
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
&__label {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.text {
|
||||
font-family: 'font_medium', sans-serif;
|
||||
padding-left: 10px;
|
||||
color: #eb5757;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.delete-project-input {
|
||||
font-family: 'font_regular', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
margin-top: 10px;
|
||||
resize: none;
|
||||
margin-bottom: 18px;
|
||||
height: 48px;
|
||||
width: 100%;
|
||||
text-indent: 20px;
|
||||
border-color: rgba(56, 75, 101, 0.4);
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&__button-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
&__close-cross-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 40px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover .close-cross-svg-path {
|
||||
fill: #2683ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 720px) {
|
||||
|
||||
.delete-project-popup {
|
||||
|
||||
&__info-panel-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__form-container {
|
||||
|
||||
&__button-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -20,8 +20,6 @@ class ViewsState {
|
||||
public isFreeCreditsDropdownShown = false,
|
||||
public isAvailableBalanceDropdownShown = false,
|
||||
public isPeriodsDropdownShown = false,
|
||||
public isDeleteProjectPopupShown = false,
|
||||
public isDeleteAccountPopupShown = false,
|
||||
public isSuccessfulRegistrationShown = false,
|
||||
public isEditProfilePopupShown = false,
|
||||
public isChangePasswordPopupShown = false,
|
||||
@ -89,14 +87,6 @@ export const appStateModule = {
|
||||
[APP_STATE_MUTATIONS.TOGGLE_PERIODS_DROPDOWN](state: State): void {
|
||||
state.appState.isPeriodsDropdownShown = !state.appState.isPeriodsDropdownShown;
|
||||
},
|
||||
// Mutation changing delete project popup visibility
|
||||
[APP_STATE_MUTATIONS.TOGGLE_DELETE_PROJECT_DROPDOWN](state: State): void {
|
||||
state.appState.isDeleteProjectPopupShown = !state.appState.isDeleteProjectPopupShown;
|
||||
},
|
||||
// Mutation changing delete account popup visibility
|
||||
[APP_STATE_MUTATIONS.TOGGLE_DELETE_ACCOUNT_DROPDOWN](state: State): void {
|
||||
state.appState.isDeleteAccountPopupShown = !state.appState.isDeleteAccountPopupShown;
|
||||
},
|
||||
// Mutation changing 'successful registration' area visibility.
|
||||
[APP_STATE_MUTATIONS.TOGGLE_SUCCESSFUL_REGISTRATION](state: State): void {
|
||||
state.appState.isSuccessfulRegistrationShown = !state.appState.isSuccessfulRegistrationShown;
|
||||
@ -227,20 +217,6 @@ export const appStateModule = {
|
||||
|
||||
commit(APP_STATE_MUTATIONS.TOGGLE_PAYMENT_SELECTION, value);
|
||||
},
|
||||
[APP_STATE_ACTIONS.TOGGLE_DEL_PROJ]: function ({commit, state}: AppContext): void {
|
||||
if (!state.appState.isDeleteProjectPopupShown) {
|
||||
commit(APP_STATE_MUTATIONS.CLOSE_ALL);
|
||||
}
|
||||
|
||||
commit(APP_STATE_MUTATIONS.TOGGLE_DELETE_PROJECT_DROPDOWN);
|
||||
},
|
||||
[APP_STATE_ACTIONS.TOGGLE_DEL_ACCOUNT]: function ({commit, state}: AppContext): void {
|
||||
if (!state.appState.isDeleteAccountPopupShown) {
|
||||
commit(APP_STATE_MUTATIONS.CLOSE_ALL);
|
||||
}
|
||||
|
||||
commit(APP_STATE_MUTATIONS.TOGGLE_DELETE_ACCOUNT_DROPDOWN);
|
||||
},
|
||||
[APP_STATE_ACTIONS.TOGGLE_SUCCESSFUL_REGISTRATION]: function ({commit, state}: AppContext): void {
|
||||
if (!state.appState.isSuccessfulRegistrationShown) {
|
||||
commit(APP_STATE_MUTATIONS.CLOSE_ALL);
|
||||
|
||||
@ -16,8 +16,6 @@ export const APP_STATE_MUTATIONS = {
|
||||
TOGGLE_RESOURCES_DROPDOWN: 'TOGGLE_RESOURCES_DROPDOWN',
|
||||
TOGGLE_SETTINGS_DROPDOWN: 'TOGGLE_SETTINGS_DROPDOWN',
|
||||
TOGGLE_EDIT_PROJECT_DROPDOWN: 'TOGGLE_EDIT_PROJECT_DROPDOWN',
|
||||
TOGGLE_DELETE_PROJECT_DROPDOWN: 'TOGGLE_DELETE_PROJECT_DROPDOWN',
|
||||
TOGGLE_DELETE_ACCOUNT_DROPDOWN: 'TOGGLE_DELETE_ACCOUNT_DROPDOWN',
|
||||
TOGGLE_FREE_CREDITS_DROPDOWN: 'TOGGLE_FREE_CREDITS_DROPDOWN',
|
||||
TOGGLE_AVAILABLE_BALANCE_DROPDOWN: 'TOGGLE_AVAILABLE_BALANCE_DROPDOWN',
|
||||
TOGGLE_PERIODS_DROPDOWN: 'TOGGLE_PERIODS_DROPDOWN',
|
||||
|
||||
@ -11,8 +11,6 @@ export const APP_STATE_ACTIONS = {
|
||||
TOGGLE_FREE_CREDITS_DROPDOWN: 'toggleFreeCreditsDropdown',
|
||||
TOGGLE_AVAILABLE_BALANCE_DROPDOWN: 'toggleAvailableBalanceDropdown',
|
||||
TOGGLE_PERIODS_DROPDOWN: 'togglePeriodsDropdown',
|
||||
TOGGLE_DEL_PROJ: 'toggleDeleteProjectPopup',
|
||||
TOGGLE_DEL_ACCOUNT: 'toggleDeleteAccountPopup',
|
||||
TOGGLE_SUCCESSFUL_REGISTRATION: 'TOGGLE_SUCCESSFUL_REGISTRATION',
|
||||
TOGGLE_SUCCESSFUL_PASSWORD_RESET: 'TOGGLE_SUCCESSFUL_PASSWORD_RESET',
|
||||
TOGGLE_SUCCESSFUL_PROJECT_CREATION_POPUP: 'toggleSuccessfulProjectCreationPopup',
|
||||
|
||||
@ -27,12 +27,9 @@
|
||||
<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"
|
||||
width="calc(100% - 2px)"
|
||||
height="46px"
|
||||
@setData="setEmail"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -34,23 +34,17 @@
|
||||
</div>
|
||||
<div v-if="!isMFARequired" class="login-area__input-wrapper">
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Email Address"
|
||||
placeholder="example@email.com"
|
||||
:error="emailError"
|
||||
height="46px"
|
||||
width="calc(100% - 2px)"
|
||||
@setData="setEmail"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="!isMFARequired" class="login-area__input-wrapper">
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Password"
|
||||
placeholder="Password"
|
||||
:error="passwordError"
|
||||
width="calc(100% - 2px)"
|
||||
height="46px"
|
||||
is-password="true"
|
||||
@setData="setPassword"
|
||||
/>
|
||||
@ -602,10 +596,6 @@ export default class Login extends Vue {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.input-wrap.full-input {
|
||||
width: calc(100% - 2px);
|
||||
}
|
||||
|
||||
.disabled,
|
||||
.disabled-button {
|
||||
pointer-events: none;
|
||||
|
||||
@ -65,55 +65,40 @@
|
||||
</div>
|
||||
<div class="register-area__input-wrapper first-input">
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Full Name"
|
||||
placeholder="Enter Full Name"
|
||||
:error="fullNameError"
|
||||
width="calc(100% - 2px)"
|
||||
height="46px"
|
||||
@setData="setFullName"
|
||||
/>
|
||||
</div>
|
||||
<div class="register-area__input-wrapper">
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Email Address"
|
||||
placeholder="example@email.com"
|
||||
:error="emailError"
|
||||
width="calc(100% - 2px)"
|
||||
height="46px"
|
||||
@setData="setEmail"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="isProfessional">
|
||||
<div class="register-area__input-wrapper">
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Company Name"
|
||||
placeholder="Acme Corp."
|
||||
:error="companyNameError"
|
||||
width="calc(100% - 2px)"
|
||||
height="46px"
|
||||
@setData="setCompanyName"
|
||||
/>
|
||||
</div>
|
||||
<div class="register-area__input-wrapper">
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Position"
|
||||
placeholder="Position Title"
|
||||
:error="positionError"
|
||||
width="calc(100% - 2px)"
|
||||
height="46px"
|
||||
@setData="setPosition"
|
||||
/>
|
||||
</div>
|
||||
<div class="register-area__input-wrapper">
|
||||
<SelectInput
|
||||
class="full-input"
|
||||
label="Employees"
|
||||
width="calc(100% - 2px)"
|
||||
height="46px"
|
||||
:options-list="employeeCountOptions"
|
||||
@setData="setEmployeeCount"
|
||||
/>
|
||||
@ -122,12 +107,9 @@
|
||||
<div class="register-input">
|
||||
<div class="register-area__input-wrapper">
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Password"
|
||||
placeholder="Enter Password"
|
||||
:error="passwordError"
|
||||
width="calc(100% - 2px)"
|
||||
height="46px"
|
||||
is-password="true"
|
||||
@setData="setPassword"
|
||||
@showPasswordStrength="showPasswordStrength"
|
||||
@ -141,12 +123,9 @@
|
||||
</div>
|
||||
<div class="register-area__input-wrapper">
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Retype Password"
|
||||
placeholder="Retype Password"
|
||||
:error="repeatedPasswordError"
|
||||
width="calc(100% - 2px)"
|
||||
height="46px"
|
||||
is-password="true"
|
||||
@setData="setRepeatedPassword"
|
||||
/>
|
||||
@ -956,10 +935,6 @@ export default class RegisterArea extends Vue {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input-wrap.full-input {
|
||||
width: calc(100% - 2px);
|
||||
}
|
||||
|
||||
.container {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
@ -16,8 +16,6 @@
|
||||
label="Password"
|
||||
placeholder="Enter Password"
|
||||
:error="passwordError"
|
||||
width="100%"
|
||||
height="46px"
|
||||
is-password="true"
|
||||
@setData="setPassword"
|
||||
@showPasswordStrength="showPasswordStrength"
|
||||
@ -33,8 +31,6 @@
|
||||
label="Retype Password"
|
||||
placeholder="Retype Password"
|
||||
:error="repeatedPasswordError"
|
||||
width="100%"
|
||||
height="46px"
|
||||
is-password="true"
|
||||
@setData="setRepeatedPassword"
|
||||
/>
|
||||
|
||||
@ -29,7 +29,7 @@ exports[`CreateProject.vue renders correctly 1`] = `
|
||||
</div>
|
||||
<h3 class="label-container__limit">0/100</h3>
|
||||
</div>
|
||||
<!----> <textarea id="Description" placeholder="Enter Project Description" rows="5" cols="40" wrap="hard" class="headered-textarea" style="height: 60px;"></textarea>
|
||||
<!----> <textarea id="Description" placeholder="Enter Project Description" rows="5" cols="40" wrap="hard" class="headered-textarea" style="width: 100%; height: 100px;"></textarea>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="create-project-area__container__button-container">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user