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 2021-09-09 19:35:28 +03:00
parent 84a383638b
commit c06424cbf3
24 changed files with 24 additions and 661 deletions

View File

@ -47,7 +47,6 @@
</div> </div>
<div v-else class="create-passphrase__container__value-area__password"> <div v-else class="create-passphrase__container__value-area__password">
<HeaderedInput <HeaderedInput
class="create-passphrase__container__value-area__password__input"
placeholder="Enter encryption passphrase here" placeholder="Enter encryption passphrase here"
:error="errorMessage" :error="errorMessage"
@setData="onChangePassphrase" @setData="onChangePassphrase"
@ -448,10 +447,6 @@ export default class CreatePassphraseStep extends Vue {
&__password { &__password {
width: 100%; width: 100%;
margin: 10px 0 20px 0; margin: 10px 0 20px 0;
&__input {
width: calc(100% - 2px);
}
} }
} }
} }

View File

@ -7,7 +7,6 @@
<h1 class="enter-passphrase__title">Enter Encryption Passphrase</h1> <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> <p class="enter-passphrase__sub-title">Enter the passphrase you most recently generated for Access Grants</p>
<HeaderedInput <HeaderedInput
class="enter-passphrase__input"
label="Encryption Passphrase" label="Encryption Passphrase"
placeholder="Enter your passphrase here" placeholder="Enter your passphrase here"
:error="errorMessage" :error="errorMessage"
@ -194,10 +193,6 @@ export default class EnterPassphraseStep extends Vue {
max-width: 340px; max-width: 340px;
} }
&__input {
width: calc(100% - 2px);
}
&__next-button { &__next-button {
margin-top: 93px; margin-top: 93px;
} }

View File

@ -6,7 +6,6 @@
<h1 class="name-step__title">Name Your Access Grant</h1> <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> <p class="name-step__sub-title">Enter a name for your new Access grant to get started.</p>
<HeaderedInput <HeaderedInput
class="name-step__input"
label="Access Grant Name" label="Access Grant Name"
placeholder="Enter a name here..." placeholder="Enter a name here..."
:error="errorMessage" :error="errorMessage"
@ -169,10 +168,6 @@ export default class NameStep extends Vue {
margin: 0 0 80px 0; margin: 0 0 80px 0;
} }
&__input {
width: calc(100% - 2px);
}
&__buttons-area { &__buttons-area {
width: 100%; width: 100%;
display: flex; display: flex;

View File

@ -13,7 +13,6 @@
class="full-input" class="full-input"
label="Old Password" label="Old Password"
placeholder="Enter Old Password" placeholder="Enter Old Password"
width="100%"
is-password="true" is-password="true"
:error="oldPasswordError" :error="oldPasswordError"
@setData="setOldPassword" @setData="setOldPassword"
@ -23,7 +22,6 @@
class="full-input" class="full-input"
label="New Password" label="New Password"
placeholder="Enter New Password" placeholder="Enter New Password"
width="100%"
is-password="true" is-password="true"
:error="newPasswordError" :error="newPasswordError"
@setData="setNewPassword" @setData="setNewPassword"
@ -39,7 +37,6 @@
class="full-input" class="full-input"
label="Confirm Password" label="Confirm Password"
placeholder="Confirm Password" placeholder="Confirm Password"
width="100%"
is-password="true" is-password="true"
:error="confirmationPasswordError" :error="confirmationPasswordError"
@setData="setPasswordConfirmation" @setData="setPasswordConfirmation"
@ -196,7 +193,6 @@ export default class ChangePasswordPopup extends Vue {
} }
.full-input { .full-input {
width: 100%;
margin-bottom: 15px; margin-bottom: 15px;
} }

View File

@ -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>

View File

@ -12,10 +12,8 @@
<h2 class="edit-profile-popup__form-container__main-label-text">Edit Profile</h2> <h2 class="edit-profile-popup__form-container__main-label-text">Edit Profile</h2>
</div> </div>
<HeaderedInput <HeaderedInput
class="full-input"
label="Full Name" label="Full Name"
placeholder="Enter Full Name" placeholder="Enter Full Name"
width="100%"
:error="fullNameError" :error="fullNameError"
:init-value="userInfo.fullName" :init-value="userInfo.fullName"
@setData="setFullName" @setData="setFullName"
@ -137,10 +135,6 @@ export default class EditProfilePopup extends Vue {
font-family: 'font_regular', sans-serif; font-family: 'font_regular', sans-serif;
} }
.input-container.full-input {
width: 100%;
}
.edit-profile-popup { .edit-profile-popup {
width: 100%; width: 100%;
max-width: 440px; max-width: 440px;

View File

@ -189,13 +189,6 @@ export default class SettingsArea extends Vue {
this.isMFACodesPopup = !this.isMFACodesPopup; this.isMFACodesPopup = !this.isMFACodesPopup;
} }
/**
* Opens delete account popup.
*/
public toggleDeleteAccountPopup(): void {
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_DEL_ACCOUNT);
}
/** /**
* Opens change password popup. * Opens change password popup.
*/ */

View File

@ -14,7 +14,6 @@
<HeaderlessInput <HeaderlessInput
:label="inputLabel" :label="inputLabel"
placeholder="Enter Coupon Code" placeholder="Enter Coupon Code"
class="add-coupon__input"
height="52px" height="52px"
:with-icon="true" :with-icon="true"
@setData="setCouponCode" @setData="setCouponCode"

View File

@ -46,7 +46,6 @@
<div v-else class="encrypt-container__enter"> <div v-else class="encrypt-container__enter">
<HeaderlessInput <HeaderlessInput
placeholder="Enter a passphrase here..." placeholder="Enter a passphrase here..."
width="100%"
:error="enterError" :error="enterError"
@setData="setPassphrase" @setData="setPassphrase"
/> />

View File

@ -90,7 +90,7 @@ export default class HeaderedInput extends HeaderlessInput {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
margin-top: 10px; margin-top: 10px;
width: 48%; width: 100%;
font-family: 'font_regular', sans-serif; font-family: 'font_regular', sans-serif;
} }
@ -159,9 +159,12 @@ export default class HeaderedInput extends HeaderlessInput {
border-radius: 6px; border-radius: 6px;
outline: none; outline: none;
box-shadow: none; box-shadow: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
&::placeholder { &::placeholder {
font-family: 'font_medium', sans-serif; opacity: 0.6;
} }
} }

View File

@ -5,7 +5,6 @@
<div class="info" @mouseenter="toggleVisibility" @mouseleave="toggleVisibility"> <div class="info" @mouseenter="toggleVisibility" @mouseleave="toggleVisibility">
<slot name="icon" /> <slot name="icon" />
<div v-if="isVisible" class="info__box"> <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__arrow" />
<div class="info__box__message"> <div class="info__box__message">
<h1 v-if="title" class="info__box__message__title">{{ title }}</h1> <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 { export default class VInfo extends Vue {
@Prop({default: ''}) @Prop({default: ''})
private readonly title: string; private readonly title: string;
@Prop({default: false})
private readonly isClickable: boolean;
@Prop({default: ''}) @Prop({default: ''})
private readonly buttonLabel: string; private readonly buttonLabel: string;
@Prop({default: () => false}) @Prop({default: () => false})
@ -79,7 +76,7 @@ export default class VInfo extends Vue {
z-index: 1; z-index: 1;
&__click-mock { &__click-mock {
height: 24px; height: 2px;
background: transparent; background: transparent;
} }

View File

@ -29,11 +29,10 @@
class="header-container__right-area__info" class="header-container__right-area__info"
title="Need some help?" title="Need some help?"
button-label="START TOUR" button-label="START TOUR"
is-clickable="true"
:on-button-click="onStartTourButtonClick" :on-button-click="onStartTourButtonClick"
> >
<template #icon> <template #icon>
<InfoIcon /> <InfoIcon class="header-container__right-area__info__icon" />
</template> </template>
<template #message> <template #message>
<p class="header-container__right-area__info__message"> <p class="header-container__right-area__info__message">
@ -181,6 +180,10 @@ export default class HeaderArea extends Vue {
max-height: 24px; max-height: 24px;
margin-right: 17px; margin-right: 17px;
&__icon {
cursor: pointer;
}
&__message { &__message {
color: #586c86; color: #586c86;
font-family: 'font_regular', sans-serif; font-family: 'font_regular', sans-serif;
@ -247,7 +250,7 @@ export default class HeaderArea extends Vue {
} }
::v-deep .info__box { ::v-deep .info__box {
top: calc(100% - 24px); top: 100%;
&__message { &__message {
min-width: 335px; min-width: 335px;

View File

@ -141,7 +141,6 @@ export default class ObjectsPopup extends Vue {
} }
&__input { &__input {
width: calc(100% - 4px);
margin-bottom: 18px; margin-bottom: 18px;
} }

View File

@ -20,10 +20,9 @@
<VInfo <VInfo
class="share-object__msg__info-button" class="share-object__msg__info-button"
title="Check out the documentation for more info" title="Check out the documentation for more info"
is-clickable="true"
> >
<template #icon> <template #icon>
<InfoIcon /> <InfoIcon class="share-object__msg__info-button__icon" />
</template> </template>
<template #message> <template #message>
<p class="share-object__msg__info-button__message"> <p class="share-object__msg__info-button__message">
@ -127,6 +126,10 @@ export default class ShareObject extends Vue {
&__info-button { &__info-button {
max-width: 18px; max-width: 18px;
&__icon {
cursor: pointer;
}
&__message { &__message {
color: #586c86; color: #586c86;
font-size: 12px; font-size: 12px;
@ -161,7 +164,7 @@ export default class ShareObject extends Vue {
} }
::v-deep .info__box { ::v-deep .info__box {
top: calc(100% - 24px); top: 100%;
&__message { &__message {
min-width: 360px; min-width: 360px;

View File

@ -11,7 +11,6 @@
additional-label="Up To 20 Characters" additional-label="Up To 20 Characters"
placeholder="Enter Project Name" placeholder="Enter Project Name"
class="full-input" class="full-input"
width="100%"
is-limit-shown="true" is-limit-shown="true"
:current-limit="projectName.length" :current-limit="projectName.length"
:max-symbols="20" :max-symbols="20"
@ -24,8 +23,7 @@
additional-label="Optional" additional-label="Optional"
class="full-input" class="full-input"
is-multiline="true" is-multiline="true"
height="60px" height="100px"
width="calc(100% - 42px)"
is-limit-shown="true" is-limit-shown="true"
:current-limit="description.length" :current-limit="description.length"
:max-symbols="100" :max-symbols="100"
@ -164,11 +162,6 @@ export default class NewProjectPopup extends Vue {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.full-input {
width: 100%;
margin-top: 20px;
}
.create-project-area { .create-project-area {
display: flex; display: flex;
align-items: center; align-items: center;
@ -223,4 +216,8 @@ export default class NewProjectPopup extends Vue {
} }
} }
} }
.full-input {
margin-top: 20px;
}
</style> </style>

View File

@ -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>

View File

@ -20,8 +20,6 @@ class ViewsState {
public isFreeCreditsDropdownShown = false, public isFreeCreditsDropdownShown = false,
public isAvailableBalanceDropdownShown = false, public isAvailableBalanceDropdownShown = false,
public isPeriodsDropdownShown = false, public isPeriodsDropdownShown = false,
public isDeleteProjectPopupShown = false,
public isDeleteAccountPopupShown = false,
public isSuccessfulRegistrationShown = false, public isSuccessfulRegistrationShown = false,
public isEditProfilePopupShown = false, public isEditProfilePopupShown = false,
public isChangePasswordPopupShown = false, public isChangePasswordPopupShown = false,
@ -89,14 +87,6 @@ export const appStateModule = {
[APP_STATE_MUTATIONS.TOGGLE_PERIODS_DROPDOWN](state: State): void { [APP_STATE_MUTATIONS.TOGGLE_PERIODS_DROPDOWN](state: State): void {
state.appState.isPeriodsDropdownShown = !state.appState.isPeriodsDropdownShown; 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. // Mutation changing 'successful registration' area visibility.
[APP_STATE_MUTATIONS.TOGGLE_SUCCESSFUL_REGISTRATION](state: State): void { [APP_STATE_MUTATIONS.TOGGLE_SUCCESSFUL_REGISTRATION](state: State): void {
state.appState.isSuccessfulRegistrationShown = !state.appState.isSuccessfulRegistrationShown; state.appState.isSuccessfulRegistrationShown = !state.appState.isSuccessfulRegistrationShown;
@ -227,20 +217,6 @@ export const appStateModule = {
commit(APP_STATE_MUTATIONS.TOGGLE_PAYMENT_SELECTION, value); 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 { [APP_STATE_ACTIONS.TOGGLE_SUCCESSFUL_REGISTRATION]: function ({commit, state}: AppContext): void {
if (!state.appState.isSuccessfulRegistrationShown) { if (!state.appState.isSuccessfulRegistrationShown) {
commit(APP_STATE_MUTATIONS.CLOSE_ALL); commit(APP_STATE_MUTATIONS.CLOSE_ALL);

View File

@ -16,8 +16,6 @@ export const APP_STATE_MUTATIONS = {
TOGGLE_RESOURCES_DROPDOWN: 'TOGGLE_RESOURCES_DROPDOWN', TOGGLE_RESOURCES_DROPDOWN: 'TOGGLE_RESOURCES_DROPDOWN',
TOGGLE_SETTINGS_DROPDOWN: 'TOGGLE_SETTINGS_DROPDOWN', TOGGLE_SETTINGS_DROPDOWN: 'TOGGLE_SETTINGS_DROPDOWN',
TOGGLE_EDIT_PROJECT_DROPDOWN: 'TOGGLE_EDIT_PROJECT_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_FREE_CREDITS_DROPDOWN: 'TOGGLE_FREE_CREDITS_DROPDOWN',
TOGGLE_AVAILABLE_BALANCE_DROPDOWN: 'TOGGLE_AVAILABLE_BALANCE_DROPDOWN', TOGGLE_AVAILABLE_BALANCE_DROPDOWN: 'TOGGLE_AVAILABLE_BALANCE_DROPDOWN',
TOGGLE_PERIODS_DROPDOWN: 'TOGGLE_PERIODS_DROPDOWN', TOGGLE_PERIODS_DROPDOWN: 'TOGGLE_PERIODS_DROPDOWN',

View File

@ -11,8 +11,6 @@ export const APP_STATE_ACTIONS = {
TOGGLE_FREE_CREDITS_DROPDOWN: 'toggleFreeCreditsDropdown', TOGGLE_FREE_CREDITS_DROPDOWN: 'toggleFreeCreditsDropdown',
TOGGLE_AVAILABLE_BALANCE_DROPDOWN: 'toggleAvailableBalanceDropdown', TOGGLE_AVAILABLE_BALANCE_DROPDOWN: 'toggleAvailableBalanceDropdown',
TOGGLE_PERIODS_DROPDOWN: 'togglePeriodsDropdown', TOGGLE_PERIODS_DROPDOWN: 'togglePeriodsDropdown',
TOGGLE_DEL_PROJ: 'toggleDeleteProjectPopup',
TOGGLE_DEL_ACCOUNT: 'toggleDeleteAccountPopup',
TOGGLE_SUCCESSFUL_REGISTRATION: 'TOGGLE_SUCCESSFUL_REGISTRATION', TOGGLE_SUCCESSFUL_REGISTRATION: 'TOGGLE_SUCCESSFUL_REGISTRATION',
TOGGLE_SUCCESSFUL_PASSWORD_RESET: 'TOGGLE_SUCCESSFUL_PASSWORD_RESET', TOGGLE_SUCCESSFUL_PASSWORD_RESET: 'TOGGLE_SUCCESSFUL_PASSWORD_RESET',
TOGGLE_SUCCESSFUL_PROJECT_CREATION_POPUP: 'toggleSuccessfulProjectCreationPopup', TOGGLE_SUCCESSFUL_PROJECT_CREATION_POPUP: 'toggleSuccessfulProjectCreationPopup',

View File

@ -27,12 +27,9 @@
<p class="forgot-area__content-area__container__message">If youve forgotten your account password, you can reset it here. Make sure youre signing in to the right satellite.</p> <p class="forgot-area__content-area__container__message">If youve forgotten your account password, you can reset it here. Make sure youre signing in to the right satellite.</p>
<div class="forgot-area__content-area__container__input-wrapper"> <div class="forgot-area__content-area__container__input-wrapper">
<HeaderlessInput <HeaderlessInput
class="full-input"
label="Email Address" label="Email Address"
placeholder="example@email.com" placeholder="example@email.com"
:error="emailError" :error="emailError"
width="calc(100% - 2px)"
height="46px"
@setData="setEmail" @setData="setEmail"
/> />
</div> </div>

View File

@ -34,23 +34,17 @@
</div> </div>
<div v-if="!isMFARequired" class="login-area__input-wrapper"> <div v-if="!isMFARequired" class="login-area__input-wrapper">
<HeaderlessInput <HeaderlessInput
class="full-input"
label="Email Address" label="Email Address"
placeholder="example@email.com" placeholder="example@email.com"
:error="emailError" :error="emailError"
height="46px"
width="calc(100% - 2px)"
@setData="setEmail" @setData="setEmail"
/> />
</div> </div>
<div v-if="!isMFARequired" class="login-area__input-wrapper"> <div v-if="!isMFARequired" class="login-area__input-wrapper">
<HeaderlessInput <HeaderlessInput
class="full-input"
label="Password" label="Password"
placeholder="Password" placeholder="Password"
:error="passwordError" :error="passwordError"
width="calc(100% - 2px)"
height="46px"
is-password="true" is-password="true"
@setData="setPassword" @setData="setPassword"
/> />
@ -602,10 +596,6 @@ export default class Login extends Vue {
cursor: pointer; cursor: pointer;
} }
.input-wrap.full-input {
width: calc(100% - 2px);
}
.disabled, .disabled,
.disabled-button { .disabled-button {
pointer-events: none; pointer-events: none;

View File

@ -65,55 +65,40 @@
</div> </div>
<div class="register-area__input-wrapper first-input"> <div class="register-area__input-wrapper first-input">
<HeaderlessInput <HeaderlessInput
class="full-input"
label="Full Name" label="Full Name"
placeholder="Enter Full Name" placeholder="Enter Full Name"
:error="fullNameError" :error="fullNameError"
width="calc(100% - 2px)"
height="46px"
@setData="setFullName" @setData="setFullName"
/> />
</div> </div>
<div class="register-area__input-wrapper"> <div class="register-area__input-wrapper">
<HeaderlessInput <HeaderlessInput
class="full-input"
label="Email Address" label="Email Address"
placeholder="example@email.com" placeholder="example@email.com"
:error="emailError" :error="emailError"
width="calc(100% - 2px)"
height="46px"
@setData="setEmail" @setData="setEmail"
/> />
</div> </div>
<div v-if="isProfessional"> <div v-if="isProfessional">
<div class="register-area__input-wrapper"> <div class="register-area__input-wrapper">
<HeaderlessInput <HeaderlessInput
class="full-input"
label="Company Name" label="Company Name"
placeholder="Acme Corp." placeholder="Acme Corp."
:error="companyNameError" :error="companyNameError"
width="calc(100% - 2px)"
height="46px"
@setData="setCompanyName" @setData="setCompanyName"
/> />
</div> </div>
<div class="register-area__input-wrapper"> <div class="register-area__input-wrapper">
<HeaderlessInput <HeaderlessInput
class="full-input"
label="Position" label="Position"
placeholder="Position Title" placeholder="Position Title"
:error="positionError" :error="positionError"
width="calc(100% - 2px)"
height="46px"
@setData="setPosition" @setData="setPosition"
/> />
</div> </div>
<div class="register-area__input-wrapper"> <div class="register-area__input-wrapper">
<SelectInput <SelectInput
class="full-input"
label="Employees" label="Employees"
width="calc(100% - 2px)"
height="46px"
:options-list="employeeCountOptions" :options-list="employeeCountOptions"
@setData="setEmployeeCount" @setData="setEmployeeCount"
/> />
@ -122,12 +107,9 @@
<div class="register-input"> <div class="register-input">
<div class="register-area__input-wrapper"> <div class="register-area__input-wrapper">
<HeaderlessInput <HeaderlessInput
class="full-input"
label="Password" label="Password"
placeholder="Enter Password" placeholder="Enter Password"
:error="passwordError" :error="passwordError"
width="calc(100% - 2px)"
height="46px"
is-password="true" is-password="true"
@setData="setPassword" @setData="setPassword"
@showPasswordStrength="showPasswordStrength" @showPasswordStrength="showPasswordStrength"
@ -141,12 +123,9 @@
</div> </div>
<div class="register-area__input-wrapper"> <div class="register-area__input-wrapper">
<HeaderlessInput <HeaderlessInput
class="full-input"
label="Retype Password" label="Retype Password"
placeholder="Retype Password" placeholder="Retype Password"
:error="repeatedPasswordError" :error="repeatedPasswordError"
width="calc(100% - 2px)"
height="46px"
is-password="true" is-password="true"
@setData="setRepeatedPassword" @setData="setRepeatedPassword"
/> />
@ -956,10 +935,6 @@ export default class RegisterArea extends Vue {
width: 100%; width: 100%;
} }
.input-wrap.full-input {
width: calc(100% - 2px);
}
.container { .container {
display: block; display: block;
position: relative; position: relative;

View File

@ -16,8 +16,6 @@
label="Password" label="Password"
placeholder="Enter Password" placeholder="Enter Password"
:error="passwordError" :error="passwordError"
width="100%"
height="46px"
is-password="true" is-password="true"
@setData="setPassword" @setData="setPassword"
@showPasswordStrength="showPasswordStrength" @showPasswordStrength="showPasswordStrength"
@ -33,8 +31,6 @@
label="Retype Password" label="Retype Password"
placeholder="Retype Password" placeholder="Retype Password"
:error="repeatedPasswordError" :error="repeatedPasswordError"
width="100%"
height="46px"
is-password="true" is-password="true"
@setData="setRepeatedPassword" @setData="setRepeatedPassword"
/> />

View File

@ -29,7 +29,7 @@ exports[`CreateProject.vue renders correctly 1`] = `
</div> </div>
<h3 class="label-container__limit">0/100</h3> <h3 class="label-container__limit">0/100</h3>
</div> </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>
<div class="create-project-area__container__button-container"> <div class="create-project-area__container__button-container">