web/satellite: logic removed from template (#3136)

web/satellite/src/components/account/AccountArea.vue

@@ -6,7 +6,8 @@
         <h1 class="account-area-container__title">Account</h1>
         <TabNavigation
             class="account-area-container__navigation"
-            :navigation="navigation"/>
+            :navigation="navigation"
+        />
         <router-view/>
     </div>
 </template>

web/satellite/src/components/account/AccountPaymentMethods.vue

@@ -39,7 +39,8 @@
             label="Add Card"
             width="140px"
             height="48px"
-            is-disabled="true"/>
+            is-disabled="true"
+        />
     </div>
 </template>
 

web/satellite/src/components/account/ChangePasswordPopup.vue

@@ -21,7 +21,8 @@
                     is-password="true"
                     ref="oldPasswordInput"
                     :error="oldPasswordError"
-                    @setData="setOldPassword" />
+                    @setData="setOldPassword"
+                />
                 <HeaderlessInput
                     class="full-input mt"
                     label="New Password"
@@ -30,7 +31,8 @@
                     ref="newPasswordInput"
                     is-password="true"
                     :error="newPasswordError"
-                    @setData="setNewPassword" />
+                    @setData="setNewPassword"
+                />
                 <HeaderlessInput
                     class="full-input mt"
                     label="Confirm password"
@@ -39,19 +41,22 @@
                     ref="confirmPasswordInput"
                     is-password="true"
                     :error="confirmationPasswordError"
-                    @setData="setPasswordConfirmation" />
+                    @setData="setPasswordConfirmation"
+                />
                 <div class="change-password-popup__form-container__button-container">
                     <VButton
                         label="Cancel"
                         width="205px"
                         height="48px"
                         :on-press="onCloseClick"
-                        is-white="true" />
+                        is-white="true"
+                    />
                     <VButton
                         label="Update"
                         width="205px"
                         height="48px"
-                        :on-press="onUpdateClick" />
+                        :on-press="onUpdateClick"
+                    />
                 </div>
             </div>
             <div class="change-password-popup__close-cross-container" @click="onCloseClick">

web/satellite/src/components/account/DeleteAccountPopup.vue

@@ -46,20 +46,22 @@
                     width='100%'
                     is-password="true"
                     :error='passwordError'
-                    @setData='setPassword'>
+                    @setData='setPassword'
-                </HeaderedInput>
+                />
                 <div class='delete-account__form-container__button-container'>
                     <VButton
                         label='Cancel'
                         width='205px' height='48px'
                         :on-press='onCloseClick'
-                        is-white="true"/>
+                        is-white="true"
+                    />
                     <VButton
                         label='Delete'
                         width='205px'
                         height='48px'
                         class='red'
-                        :on-press='onDeleteAccountClick'/>
+                        :on-press='onDeleteAccountClick'
+                    />
                 </div>
             </div>
             <div class='delete-account__close-cross-container' @click='onCloseClick'>

web/satellite/src/components/account/EditProfilePopup.vue

@@ -19,7 +19,8 @@
                     ref="fullNameInput"
                     :error="fullNameError"
                     :init-value="userInfo.fullName"
-                    @setData="setFullName" />
+                    @setData="setFullName"
+                />
                 <HeaderedInput
                     class="full-input"
                     label="Nickname"
@@ -27,19 +28,22 @@
                     width="100%"
                     ref="shortNameInput"
                     :init-value="userInfo.shortName"
-                    @setData="setShortName"/>
+                    @setData="setShortName"
+                />
                 <div class="edit-profile-popup__form-container__button-container">
                     <VButton
                         label="Cancel"
                         width="205px"
                         height="48px"
                         :on-press="onCloseClick"
-                        is-white="true" />
+                        is-white="true"
+                    />
                     <VButton
                         label="Update"
                         width="205px"
                         height="48px"
-                        :on-press="onUpdateClick" />
+                        :on-press="onUpdateClick"
+                    />
                 </div>
             </div>
             <div class="edit-profile-popup__close-cross-container" @click="onCloseClick">

web/satellite/src/components/account/ProfileArea.vue

@@ -59,7 +59,8 @@
                 width="210px"
                 height="56px"
                 :on-press="toggleDeleteAccountPopup"
-                is-deletion="true"/>
+                is-deletion="true"
+            />
         </div>
         <ChangePasswordPopup v-if="isChangePasswordPopupShown"/>
         <EditProfilePopup v-if="isEditProfilePopupShown"/>

web/satellite/src/components/account/billing/AccountBalance.vue

@@ -21,7 +21,8 @@
                 label="Earn Credits"
                 width="153px"
                 height="48px"
-                :on-press="onEarnCredits"/>
+                :on-press="onEarnCredits"
+            />
         </div>
     </div>
 </template>

web/satellite/src/components/account/billing/MonthlyBillingSummary.vue

@@ -13,7 +13,8 @@
                 <VButton
                     label="Earn Credits"
                     width="153px"
-                    height="48px"/>
+                    height="48px"
+                />
             </div>
         </div>
         <div class="current-month-area__content">

web/satellite/src/components/apiKeys/ApiKeysArea.vue

@@ -8,40 +8,45 @@
             <ApiKeysCreationPopup
                 @closePopup="closeNewApiKeyPopup"
                 @showCopyPopup="showCopyApiKeyPopup"
-                :is-popup-shown="isNewApiKeyPopupShown"/>
+                :is-popup-shown="isNewApiKeyPopupShown"
+            />
             <ApiKeysCopyPopup
                 :is-popup-shown="isCopyApiKeyPopupShown"
                 :api-key-secret="apiKeySecret"
-                @closePopup="closeCopyNewApiKeyPopup"/>
+                @closePopup="closeCopyNewApiKeyPopup"
-            <div v-if="!isEmpty || hasSearchQuery" class="api-keys-header">
+            />
+            <div v-if="isHeaderShown" class="api-keys-header">
                 <VHeader
                     ref="headerComponent"
                     placeholder="API Key"
                     :search="onSearchQueryCallback">
-                        <div class="header-default-state" v-if="headerState === 0">
+                    <div class="header-default-state" v-if="isDefaultHeaderState">
                         <VButton
                             class="button"
                             label="+Create API Key"
                             width="180px"
                             height="48px"
-                                :on-press="onCreateApiKeyClick"/>
+                            :on-press="onCreateApiKeyClick"
+                        />
                     </div>
-                        <div class="header-selected-api-keys" v-if="headerState === 1 && !isDeleteClicked">
+                    <div class="header-selected-api-keys" v-if="areApiKeysSelected">
                         <VButton
                             class="button deletion"
                             label="Delete"
                             width="122px"
                             height="48px"
-                                :on-press="onFirstDeleteClick"/>
+                            :on-press="onFirstDeleteClick"
+                        />
                         <VButton
                             class="button"
                             label="Cancel"
                             width="122px"
                             height="48px"
                             is-white="true"
-                                :on-press="onClearSelection"/>
+                            :on-press="onClearSelection"
+                        />
                     </div>
-                        <div class="header-after-delete-click" v-if="headerState === 1 && isDeleteClicked">
+                    <div class="header-after-delete-click" v-if="areSelectedApiKeysBeingDeleted">
                         <span class="header-after-delete-click__confirmation-label">Are you sure you want to delete {{selectedAPIKeysCount}} {{apiKeyCountTitle}} ?</span>
                         <div class="header-after-delete-click__button-area">
                             <VButton
@@ -49,14 +54,16 @@
                                 label="Delete"
                                 width="122px"
                                 height="48px"
-                                    :on-press="onDelete"/>
+                                :on-press="onDelete"
+                            />
                             <VButton
                                 class="button"
                                 label="Cancel"
                                 width="122px"
                                 height="48px"
                                 is-white="true"
-                                    :on-press="onClearSelection"/>
+                                :on-press="onClearSelection"
+                            />
                         </div>
                     </div>
                 </VHeader>
@@ -69,17 +76,19 @@
                     <VList
                         :data-set="apiKeyList"
                         :item-component="itemComponent"
-                        :on-item-click="toggleSelection"/>
+                        :on-item-click="toggleSelection"
+                    />
                 </div>
                 <VPagination
                     v-if="totalPageCount > 1"
                     class="pagination-area"
                     ref="pagination"
                     :total-page-count="totalPageCount"
-                    :on-page-click-callback="onPageClick"/>
+                    :on-page-click-callback="onPageClick"
+                />
                 <p class="api-keys-items__additional-info">Want to give limited access? <b>Use API Keys.</b></p>
             </div>
-            <div class="empty-search-result-area" v-if="(isEmpty && hasSearchQuery)">
+            <div class="empty-search-result-area" v-if="isEmptySearchResultShown">
                 <h1 class="empty-search-result-area__title">No results found</h1>
                 <svg class="empty-search-result-area__image" width="254" height="195" viewBox="0 0 380 295" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path d="M168 295C246.997 295 311 231.2 311 152.5C311 73.8 246.997 10 168 10C89.0028 10 25 73.8 25 152.5C25 231.2 89.0028 295 168 295Z" fill="#E8EAF2"/>
@@ -114,12 +123,13 @@
             </div>
             <EmptyState
                 :on-button-click="onCreateApiKeyClick"
-                v-if="isEmpty && !isNewApiKeyPopupShown && !hasSearchQuery"
+                v-if="isEmptyStateShown"
                 main-title="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>"
                 :image-source="emptyImage"
                 button-label="Create an API Key"
-                is-button-shown="true" />
+                is-button-shown="true"
+            />
         </div>
     </div>
 </template>
@@ -162,6 +172,10 @@ const {
     SET_SORT_DIRECTION,
 } = API_KEYS_ACTIONS;
 
+declare interface ResetPagination {
+    resetPageIndex(): void;
+}
+
 @Component({
     components: {
         VList,
@@ -183,17 +197,16 @@ export default class ApiKeysArea extends Vue {
     private isCopyApiKeyPopupShown: boolean = false;
     private apiKeySecret: string = '';
 
+    public $refs!: {
+        pagination: HTMLElement & ResetPagination;
+    };
+
     public mounted(): void {
         this.$store.dispatch(FETCH, this.FIRST_PAGE);
     }
 
     public async beforeDestroy(): Promise<void> {
         await this.$store.dispatch(API_KEYS_ACTIONS.CLEAR);
-        try {
-            await this.$store.dispatch(API_KEYS_ACTIONS.FETCH, this.FIRST_PAGE);
-        } catch (error) {
-            await this.notifyFetchError(error);
-        }
     }
 
     public async toggleSelection(apiKey: ApiKey): Promise<void> {
@@ -244,6 +257,10 @@ export default class ApiKeysArea extends Vue {
         }
 
         this.isDeleteClicked = false;
+
+        if (this.totalPageCount > 1) {
+            this.$refs.pagination.resetPageIndex();
+        }
     }
 
     public get itemComponent() {
@@ -290,6 +307,30 @@ export default class ApiKeysArea extends Vue {
         return HeaderState.DEFAULT;
     }
 
+    public get isHeaderShown(): boolean {
+        return !this.isEmpty || this.hasSearchQuery;
+    }
+
+    public get isDefaultHeaderState(): boolean {
+        return this.headerState === 0;
+    }
+
+    public get areApiKeysSelected(): boolean {
+        return this.headerState === 1 && !this.isDeleteClicked;
+    }
+
+    public get areSelectedApiKeysBeingDeleted(): boolean {
+        return this.headerState === 1 && this.isDeleteClicked;
+    }
+
+    public get isEmptySearchResultShown(): boolean {
+        return this.isEmpty && this.hasSearchQuery;
+    }
+
+    public get isEmptyStateShown(): boolean {
+        return this.isEmpty && !this.isNewApiKeyPopupShown && !this.hasSearchQuery;
+    }
+
     public async onPageClick(index: number): Promise<void> {
         try {
             await this.$store.dispatch(FETCH, index);
@@ -307,7 +348,9 @@ export default class ApiKeysArea extends Vue {
             await this.notifyFetchError(error);
         }
 
-        (this.$refs.pagination as VPagination).resetPageIndex();
+        if (this.totalPageCount > 1) {
+            this.$refs.pagination.resetPageIndex();
+        }
     }
 
     public async onSearchQueryCallback(query: string): Promise<void> {
@@ -318,7 +361,9 @@ export default class ApiKeysArea extends Vue {
             await this.notifyFetchError(error);
         }
 
-        (this.$refs.pagination as VPagination).resetPageIndex();
+        if (this.totalPageCount > 1) {
+            this.$refs.pagination.resetPageIndex();
+        }
     }
 
     public async notifyFetchError(error: Error): Promise<void> {

web/satellite/src/components/apiKeys/ApiKeysCopyPopup.vue

@@ -54,7 +54,7 @@ export default class ApiKeysCopyPopup extends Vue {
     @Prop({default: ''})
     private readonly apiKeySecret: string;
 
-    private isCopiedButtonShown: boolean = false;
+    public isCopiedButtonShown: boolean = false;
 
     public onCloseClick(): void {
         this.isCopiedButtonShown = false;

web/satellite/src/components/apiKeys/ApiKeysCreationPopup.vue

@@ -9,13 +9,15 @@
             :error="errorMessage"
             placeholder="Enter API Key Name"
             class="full-input"
-            width="100%" />
+            width="100%"
+        />
         <VButton
             class="next-button"
             label="Next >"
             width="128px"
             height="48px"
-            :on-press="onNextClick" />
+            :on-press="onNextClick"
+        />
         <div class="new-api-key__close-cross-container" @click="onCloseClick">
             <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path class="close-cross-svg-path" d="M15.7071 1.70711C16.0976 1.31658 16.0976 0.683417 15.7071 0.292893C15.3166 -0.0976311 14.6834 -0.0976311 14.2929 0.292893L15.7071 1.70711ZM0.292893 14.2929C-0.0976311 14.6834 -0.0976311 15.3166 0.292893 15.7071C0.683417 16.0976 1.31658 16.0976 1.70711 15.7071L0.292893 14.2929ZM1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L14.2929 15.7071ZM14.2929 0.292893L0.292893 14.2929L1.70711 15.7071L15.7071 1.70711L14.2929 0.292893ZM0.292893 1.70711L14.2929 15.7071L15.7071 14.2929L1.70711 0.292893L0.292893 1.70711Z" fill="#384B65"/>

web/satellite/src/components/apiKeys/ApiKeysItem.vue

@@ -17,9 +17,9 @@
                     <path d="M10.7756 14.334C10.4108 14.334 10.1226 14.6283 10.1226 15.0007C10.1226 15.3731 10.4108 15.6673 10.7756 15.6673C11.1404 15.6673 11.4287 15.3731 11.4287 15.0007C11.4287 14.6283 11.1404 14.334 10.7756 14.334Z" fill="#2683FF"/>
                 </svg>
             </div>
-            <p class="name">{{ itemData.formattedName() }}</p>
+            <p class="name">{{getItemName}}</p>
         </div>
-        <p class="date">{{ itemData.getDate() }}</p>
+        <p class="date">{{getItemDate}}</p>
     </div>
 </template>
 
@@ -32,6 +32,14 @@ import { ApiKey } from '@/types/apiKeys';
 export default class ApiKeysItem extends Vue {
     @Prop({default: () => new ApiKey('', '', '', '')})
     private readonly itemData: ApiKey;
+
+    public get getItemName(): string {
+        return this.itemData.formattedName();
+    }
+
+    public get getItemDate(): string {
+        return this.itemData.getDate();
+    }
 }
 </script>
 

web/satellite/src/components/apiKeys/SortingHeader.vue

@@ -6,14 +6,16 @@
         <div class="sort-header-container__name-item" @click="onHeaderItemClick(ApiKeyOrderBy.NAME)">
             <p class="sort-header-container__name-item__title">Key Name</p>
             <VerticalArrows
-                :isActive="getSortBy === ApiKeyOrderBy.NAME"
+                :isActive="areApiKeysSortedByName"
-                :direction="getSortDirection"></VerticalArrows>
+                :direction="getSortDirection"
+            />
         </div>
         <div class="sort-header-container__date-item" @click="onHeaderItemClick(ApiKeyOrderBy.CREATED_AT)">
             <p class="sort-header-container__date-item__title">Created</p>
             <VerticalArrows
-                :isActive="getSortBy === ApiKeyOrderBy.CREATED_AT"
+                :isActive="areApiKeysSortedByDate"
-                :direction="getSortDirection"></VerticalArrows>
+                :direction="getSortDirection"
+            />
         </div>
     </div>
 </template>
@@ -48,8 +50,12 @@ export default class SortApiKeysHeader extends Vue {
         return SortDirection.DESCENDING;
     }
 
-    public get getSortBy(): ApiKeyOrderBy {
+    public get areApiKeysSortedByName(): boolean {
-        return this.sortBy;
+        return this.sortBy === ApiKeyOrderBy.NAME;
+    }
+
+    public get areApiKeysSortedByDate(): boolean {
+        return this.sortBy === ApiKeyOrderBy.CREATED_AT;
     }
 
     public async onHeaderItemClick(sortBy: ApiKeyOrderBy): Promise<void> {

web/satellite/src/components/buckets/BucketArea.vue

@@ -3,14 +3,15 @@
 
 <template>
     <div>
-        <NoBucketArea v-if="!totalCount && !search" />
+        <NoBucketArea v-if="isNoBucketAreaShown"/>
         <div class="buckets-overflow" v-else>
             <div class="buckets-header">
                 <p class="buckets-header__title">Buckets</p>
                 <VHeader
                     class="buckets-header-component"
                     placeholder="Buckets"
-                    :search="fetch"/>
+                    :search="fetch"
+                />
             </div>
             <div class="buckets-notification-container">
                 <div class="buckets-notification">
@@ -26,17 +27,20 @@
                 <VList
                     :data-set="buckets"
                     :item-component="itemComponent"
-                    :on-item-click="doNothing"/>
+                    :on-item-click="doNothing"
+                />
                 <VPagination
-                    v-if="totalPageCount > 1"
+                    v-if="isPaginationShown"
                     :total-page-count="totalPageCount"
-                    :on-page-click-callback="onPageClick" />
+                    :on-page-click-callback="onPageClick"
+                />
             </div>
             <EmptyState
                 class="empty-container"
-                v-if="!totalPageCount && search"
+                v-if="isEmptySearchResultShown"
                 main-title="Nothing found :("
-                :image-source="emptyImage" />
+                :image-source="emptyImage"
+            />
         </div>
     </div>
 </template>
@@ -104,6 +108,18 @@ export default class BucketArea extends Vue {
         return this.$store.getters.cursor.search;
     }
 
+    public get isNoBucketAreaShown(): boolean {
+        return !this.totalCount && !this.search;
+    }
+
+    public get isPaginationShown(): boolean {
+        return this.totalPageCount > 1;
+    }
+
+    public get isEmptySearchResultShown(): boolean {
+        return !!(!this.totalPageCount && this.search);
+    }
+
     public async fetch(searchQuery: string): Promise<void> {
         await this.$store.dispatch(SET_SEARCH, searchQuery);
 

web/satellite/src/components/buckets/NoBucketsArea.vue

@@ -27,7 +27,7 @@
                     </div>
                 </a>
             </div>
-            <img src="../../../static/images/buckets/uplink.svg">
+            <img src="@/../static/images/buckets/uplink.svg">
         </div>
         <p class="no-buckets-area__s3-link">Familiar with AWS S3? <a class="s3-gateway-link" href="https://github.com/storj/storj/wiki/S3-Gateway" target="_blank">Try our S3 Gateway</a></p>
         <div class="no-buckets-area__next-step-area">

web/satellite/src/components/common/EmptyStateArea.vue

@@ -11,7 +11,8 @@
                     :on-press="onButtonClick"
                     :label="buttonLabel"
                     width="190px"
-                    height="50px"/>
+                    height="50px"
+                />
             </div>
             <div class="empty-state__wrap__img" v-html="imageSource"></div>
         </div>

web/satellite/src/components/common/HeaderedInput.vue

@@ -35,7 +35,8 @@
             @input="onInput"
             @change="onInput"
             v-model="value"
-            :style="style.inputStyle"/>
+            :style="style.inputStyle"
+        />
     </div>
 </template>
 

web/satellite/src/components/common/HeaderlessInput.vue

@@ -4,8 +4,8 @@
 <template>
     <div class="input-wrap">
         <div class="label-container">
-            <img v-if="error" src="../../../static/images/register/ErrorInfo.svg"/>
+            <img v-if="error" src="@/../static/images/register/ErrorInfo.svg"/>
-            <h3 class="label-container__label" v-if="!error && label" :style="style.labelStyle">{{label}}</h3>
+            <h3 class="label-container__label" v-if="isLabelShown" :style="style.labelStyle">{{label}}</h3>
             <h3 class="label-container__error" v-if="error" :style="style.errorStyle">{{error}}</h3>
         </div>
         <input
@@ -16,13 +16,14 @@
             v-model="value"
             :placeholder="placeholder"
             :type="type"
-            :style="style.inputStyle"/>
+            :style="style.inputStyle"
+        />
         <!--2 conditions of eye image (crossed or not) -->
-        <svg class="input-wrap__image" v-if="isPassword && !isPasswordShown" @click="changeVision" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg class="input-wrap__image" v-if="isPasswordHiddenState" @click="changeVision" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path class="input-wrap__image__path" d="M10 4C4.70642 4 1 10 1 10C1 10 3.6999 16 10 16C16.3527 16 19 10 19 10C19 10 15.3472 4 10 4ZM10 13.8176C7.93537 13.8176 6.2946 12.1271 6.2946 10C6.2946 7.87285 7.93537 6.18239 10 6.18239C12.0646 6.18239 13.7054 7.87285 13.7054 10C13.7054 12.1271 12.0646 13.8176 10 13.8176Z" fill="#AFB7C1"/>
             <path d="M11.6116 9.96328C11.6116 10.8473 10.8956 11.5633 10.0116 11.5633C9.12763 11.5633 8.41162 10.8473 8.41162 9.96328C8.41162 9.07929 9.12763 8.36328 10.0116 8.36328C10.8956 8.36328 11.6116 9.07929 11.6116 9.96328Z" fill="#AFB7C1"/>
         </svg>
-        <svg class="input-wrap__image" v-if="isPassword && isPasswordShown" @click="changeVision" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg class="input-wrap__image" v-if="isPasswordShownState" @click="changeVision" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path class="input-wrap__image__path" d="M10 4C4.70642 4 1 10 1 10C1 10 3.6999 16 10 16C16.3527 16 19 10 19 10C19 10 15.3472 4 10 4ZM10 13.8176C7.93537 13.8176 6.2946 12.1271 6.2946 10C6.2946 7.87285 7.93537 6.18239 10 6.18239C12.0646 6.18239 13.7054 7.87285 13.7054 10C13.7054 12.1271 12.0646 13.8176 10 13.8176Z" fill="#AFB7C1"/>
             <path d="M11.6121 9.96328C11.6121 10.8473 10.8961 11.5633 10.0121 11.5633C9.12812 11.5633 8.41211 10.8473 8.41211 9.96328C8.41211 9.07929 9.12812 8.36328 10.0121 8.36328C10.8961 8.36328 11.6121 9.07929 11.6121 9.96328Z" fill="#AFB7C1"/>
             <mask id="path-3-inside-1" fill="white">
@@ -101,6 +102,18 @@ export default class HeaderlessInput extends Vue {
         this.type = this.passwordType;
     }
 
+    public get isLabelShown(): boolean {
+        return !!(!this.error && this.label);
+    }
+
+    public get isPasswordHiddenState(): boolean {
+        return this.isPassword && !this.isPasswordShown;
+    }
+
+    public get isPasswordShownState(): boolean {
+        return this.isPassword && this.isPasswordShown;
+    }
+
     protected get style(): object {
         return {
             inputStyle: {

web/satellite/src/components/common/VHeader.vue

@@ -9,7 +9,8 @@
         <VSearch
             ref="search"
             :placeholder="placeholder"
-            :search="search"/>
+            :search="search"
+        />
     </div>
 </template>
 

web/satellite/src/components/common/VInfo.vue

@@ -18,13 +18,13 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
 
 @Component
 export default class VInfo extends Vue {
-    private isVisible: boolean = false;
-
     @Prop({default: ''})
     private readonly text: String;
     @Prop({default: ''})
     private readonly boldText: String;
 
+    private isVisible: boolean = false;
+
     public toggleVisibility(): void {
         this.isVisible = !this.isVisible;
     }

web/satellite/src/components/common/VList.vue

@@ -4,13 +4,14 @@
 <template>
     <div class="item-component">
         <component
-            v-for="item in dataSet"
+            v-for="(item, key) in dataSet"
             class="item-component__item"
             :is="itemComponent"
             :item-data="item"
             @click.native="onItemClick(item)"
             :class="{ selected: item.isSelected }"
-            :key="item.name"/>
+            :key="key"
+        />
     </div>
 </template>
 

web/satellite/src/components/common/VPagination.vue

@@ -12,15 +12,18 @@
             <div class="pagination-container__items">
                 <PagesBlock
                     :pages="firstBlockPages"
-                    :is-selected="isSelected"/>
+                    :is-selected="isSelected"
+                />
                 <span class="pages-divider" v-if="isFirstDotsShown">...</span>
                 <PagesBlock
                     :pages="middleBlockPages"
-                    :is-selected="isSelected"/>
+                    :is-selected="isSelected"
+                />
                 <span class="pages-divider" v-if="isSecondDotsShown">...</span>
                 <PagesBlock
                     :pages="lastBlockPages"
-                    :is-selected="isSelected"/>
+                    :is-selected="isSelected"
+                />
             </div>
             <div class="pagination-container__button" @click="nextPage">
                 <svg class="pagination-container__button__image" width="6" height="9" viewBox="0 0 6 9" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -37,7 +40,6 @@ import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 import PagesBlock from '@/components/common/PagesBlock.vue';
 
 import { Page } from '@/types/pagination';
-import { EMPTY_STATE_IMAGES } from '@/utils/constants/emptyStatesImages';
 
 @Component({
     components: {

web/satellite/src/components/common/VSearch.vue

@@ -12,7 +12,8 @@
         :placeholder="`Search ${placeholder}`"
         :style="style"
         type="text"
-        autocomplete="off">
+        autocomplete="off"
+    />
 </template>
 
 <script lang="ts">

web/satellite/src/components/common/registrationSuccessPopup.html

@@ -24,7 +24,8 @@
                     width="450px"
                     height="50px"
                     :on-press="onResendEmailButtonClick"
-                    :is-disabled="isResendEmailButtonDisabled"/>
+                    :is-disabled="isResendEmailButtonDisabled"
+                />
             </div>
         </div>
         <div class="register-success-popup__close-cross-container" @click="onCloseClick">

web/satellite/src/components/common/test/TestList.vue

@@ -5,7 +5,8 @@
     <VList
         :data-set="dataSetItems"
         :item-component="getItemComponent"
-        :on-item-click="onItemClick"/>
+        :on-item-click="onItemClick"
+    />
 </template>
 
 <script lang="ts">

web/satellite/src/components/dashboard/DashboardArea.vue

@@ -5,7 +5,8 @@
     <div>
         <EmptyState
             main-title="Create your first new project"
-            :image-source="emptyImage" />
+            :image-source="emptyImage"
+        />
     </div>
 </template>
 

web/satellite/src/components/header/AccountButton.vue

@@ -12,8 +12,8 @@
             </div>
             <h1 class="account-button-toggle-container__user-name">{{userName}}</h1>
             <div class="account-button-toggle-container__expander-area">
-                <img v-if="!isDropdownShown" src="../../../static/images/register/BlueExpand.svg"  alt="expand settings" />
+                <img v-if="!isDropdownShown" src="@/../static/images/register/BlueExpand.svg"  alt="expand settings"/>
-                <img v-if="isDropdownShown" src="../../../static/images/register/BlueHide.svg"  alt="hide settings" />
+                <img v-if="isDropdownShown" src="@/../static/images/register/BlueHide.svg"  alt="hide settings"/>
             </div>
         </div>
         <AccountDropdown v-if="isDropdownShown"/>

web/satellite/src/components/header/headerArea.html

@@ -36,6 +36,7 @@
     <ProjectCreationSuccessPopup/>
     <NavigationArea
         class="adapted-navigation"
-        v-if="isNavigationVisible" />
+        v-if="isNavigationVisible"
+    />
     <div class="navigation-blur" v-if="isNavigationVisible"></div>
 </div>

web/satellite/src/components/header/projectSelection/ProjectSelectionArea.vue

@@ -7,8 +7,8 @@
         <div class="project-selection-toggle-container" @click="toggleSelection" v-if="hasProjects">
             <h1 class="project-selection-toggle-container__name">{{name}}</h1>
             <div class="project-selection-toggle-container__expander-area">
-                <img v-if="!isDropdownShown" src="../../../../static/images/register/BlueExpand.svg" alt="expand project list" />
+                <img v-if="!isDropdownShown" src="@/../static/images/register/BlueExpand.svg" alt="expand project list"/>
-                <img v-if="isDropdownShown" src="../../../../static/images/register/BlueHide.svg" alt="hide project list" />
+                <img v-if="isDropdownShown" src="@/../static/images/register/BlueHide.svg" alt="hide project list"/>
             </div>
         </div>
         <ProjectSelectionDropdown v-if="isDropdownShown"/>

web/satellite/src/components/navigation/NavigationArea.vue

@@ -78,6 +78,22 @@ export default class NavigationArea extends Vue {
     public get isProjectNotSelected(): boolean {
         return this.$store.state.projectsModule.selectedProject.id === '';
     }
+
+    public get isResourcesDisplayingButtonShown(): boolean {
+        return !this.areResourceItemsShown && this.isResourceButtonShown;
+    }
+
+    public get isResourcesHidingButtonShown(): boolean {
+        return this.areResourceItemsShown && this.isResourceButtonShown;
+    }
+
+    public get isAccountItemsDisplayingButtonShown(): boolean {
+        return !this.areAccountItemsShown && this.isAccountButtonShown;
+    }
+
+    public get isAccountItemsHidingButtonShown(): boolean {
+        return this.areAccountItemsShown && this.isAccountButtonShown;
+    }
 }
 </script>
 

web/satellite/src/components/navigation/navigationArea.html

@@ -32,8 +32,8 @@
         </router-link>
         <div class="navigation-area__resources-title" :class="{ custom: areResourceItemsShown }" @mouseenter="toggleResourceButtonVisibility" @mouseleave="toggleResourceButtonVisibility">
             <p class="navigation-area__resources-title__title">RESOURCES</p>
-            <p v-if="!areResourceItemsShown && isResourceButtonShown" @click="toggleResourceItemsVisibility" class="navigation-area__resources-title__button">Show</p>
+            <p v-if="isResourcesDisplayingButtonShown" @click="toggleResourceItemsVisibility" class="navigation-area__resources-title__button">Show</p>
-            <p v-if="areResourceItemsShown && isResourceButtonShown" @click="toggleResourceItemsVisibility" class="navigation-area__resources-title__button">Hide</p>
+            <p v-if="isResourcesHidingButtonShown" @click="toggleResourceItemsVisibility" class="navigation-area__resources-title__button">Hide</p>
         </div>
         <a v-if="areResourceItemsShown" class="navigation-area__item-container" href="https://github.com/storj/docs/blob/master/Vanguard-Release-Setup-Instructions.md" target="_blank">
             <div class="navigation-area__item-container__link-container">
@@ -57,14 +57,16 @@
         </a>
         <div class="navigation-area__account-title" :class="{custom: areAccountItemsShown}" @mouseenter="toggleAccountButtonVisibility" @mouseleave="toggleAccountButtonVisibility">
             <p class="navigation-area__account-title__title">ACCOUNT</p>
-            <p v-if="!areAccountItemsShown && isAccountButtonShown" @click="toggleAccountItemsVisibility" class="navigation-area__account-title__button">Show</p>
+            <p v-if="isAccountItemsDisplayingButtonShown" @click="toggleAccountItemsVisibility" class="navigation-area__account-title__button">Show</p>
-            <p v-if="areAccountItemsShown && isAccountButtonShown" @click="toggleAccountItemsVisibility" class="navigation-area__account-title__button">Hide</p>
+            <p v-if="isAccountItemsHidingButtonShown" @click="toggleAccountItemsVisibility" class="navigation-area__account-title__button">Hide</p>
         </div>
-        <router-link v-if="areAccountItemsShown" class="navigation-area__item-container account-item" v-for="navItem in accountNavigation" :key="navItem.name" :to="navItem.path">
+        <div v-if="areAccountItemsShown" class="navigation-area__account-area">
+            <router-link class="navigation-area__item-container account-item" v-for="navItem in accountNavigation" :key="navItem.name" :to="navItem.path">
                 <div class="navigation-area__item-container__link-container" >
                     <h1 class="navigation-area__item-container__link-container__title account-item">{{navItem.name}}</h1>
                 </div>
             </router-link>
+        </div>
         <div class="divider" :class="{'custom-divider': areAccountItemsShown}"></div>
     </div>
 </div>

web/satellite/src/components/notifications/NotificationArea.vue

@@ -2,11 +2,12 @@
 // See LICENSE for copying information.
 
 <template>
-    <div id="notificationArea" class="notification-container" v-if="notifications.length > 0" >
+    <div id="notificationArea" class="notification-container" v-if="doNotificationsExist">
         <NotificationItem
             v-for="notification in notifications"
             :notification="notification"
-            :key="notification.id" />
+            :key="notification.id"
+        />
     </div>
 </template>
 
@@ -26,6 +27,10 @@ export default class NotificationArea extends Vue {
     public get notifications(): DelayedNotification[] {
         return this.$store.state.notificationsModule.notificationQueue;
     }
+
+    public get doNotificationsExist(): boolean {
+        return this.notifications.length > 0;
+    }
 }
 </script>
 

web/satellite/src/components/project/AddStripeCardPopup.vue

@@ -52,7 +52,8 @@
             <VButton
                 label="Save Card"
                 height="48px"
-                width="100%"/>
+                width="100%"
+            />
             <div class="add-stripe-card-popup-container__close-cross-container">
                 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" >
                     <path d="M15.7071 1.70711C16.0976 1.31658 16.0976 0.683417 15.7071 0.292893C15.3166 -0.0976311 14.6834 -0.0976311 14.2929 0.292893L15.7071 1.70711ZM0.292893 14.2929C-0.0976311 14.6834 -0.0976311 15.3166 0.292893 15.7071C0.683417 16.0976 1.31658 16.0976 1.70711 15.7071L0.292893 14.2929ZM1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L14.2929 15.7071ZM14.2929 0.292893L0.292893 14.2929L1.70711 15.7071L15.7071 1.70711L14.2929 0.292893ZM0.292893 1.70711L14.2929 15.7071L15.7071 14.2929L1.70711 0.292893L0.292893 1.70711Z" fill="#384B65"/>

web/satellite/src/components/project/DeleteProjectPopup.vue

@@ -57,7 +57,8 @@
                         type="text" 
                         placeholder="Enter Project Name"
                         v-model="projectName"
-                        @keyup="resetError" >
+                        @keyup="resetError"
+                    />
                 </div>
                 <div class="delete-project-popup__form-container__button-container">
                     <VButton
@@ -65,14 +66,16 @@
                         width="205px"
                         height="48px"
                         :on-press="onCloseClick"
-                        is-white="true"/>
+                        is-white="true"
+                    />
                     <VButton
                         label="Delete"
                         width="205px" 
                         height="48px" 
                         class="red"
                         :on-press="onDeleteProjectClick"
-                        :is-disabled="isDeleteButtonDisabled" />
+                        :is-disabled="isDeleteButtonDisabled"
+                    />
                 </div>
             </div>
             <div class="delete-project-popup__close-cross-container" @click="onCloseClick">

web/satellite/src/components/project/NewProjectPopup.vue

@@ -17,8 +17,8 @@
                     width="100%"
                     max-symbols="20"
                     :error="nameError"
-                    @setData="setProjectName">
+                    @setData="setProjectName"
-                </HeaderedInput>
+                />
                 <HeaderedInput
                     label="Description"
                     placeholder="Enter Project Description"
@@ -27,20 +27,22 @@
                     is-multiline="true"
                     height="100px"
                     width="100%"
-                    @setData="setProjectDescription">
+                    @setData="setProjectDescription"
-                </HeaderedInput>
+                />
                 <div class="new-project-popup__form-container__button-container">
                     <VButton
                         label="Cancel"
                         width="205px"
                         height="48px"
                         :on-press="onCloseClick"
-                        is-white="true"/>
+                        is-white="true"
+                    />
                     <VButton
                         label="Next"
                         width="205px"
                         height="48px"
-                        :on-press="createProjectClick"/>
+                        :on-press="createProjectClick"
+                    />
                 </div>
             </div>
             <div class="new-project-popup__close-cross-container" @click="onCloseClick">

web/satellite/src/components/project/ProjectCreationSuccessPopup.vue

@@ -40,12 +40,14 @@
                         width="214px"
                         height="50px"
                         :on-press="onCloseClick"
-                        is-white="true" />
+                        is-white="true"
+                    />
                     <VButton
                         label="Create first API Key"
                         width="214px"
                         height="50px"
-                        :on-press="onCreateAPIKeyClick" />
+                        :on-press="onCreateAPIKeyClick"
+                    />
                 </div>
             </div>
             <div class="project-creation-success-popup__close-cross-container" @click="onCloseClick">
@@ -71,7 +73,7 @@ import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
     },
 })
 export default class ProjectCreationSuccessPopup extends Vue {
-    private onCloseClick(): void {
+    public onCloseClick(): void {
         this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_SUCCESSFUL_PROJECT_CREATION_POPUP);
     }
 

web/satellite/src/components/project/ProjectDetails.vue

@@ -32,19 +32,22 @@
                         height="10vh"
                         is-multiline="true"
                         :init-value="storedDescription"
-                        @setData="setNewDescription" />
+                        @setData="setNewDescription" 
+                    />
                     <div class="project-details-info-container__description-container__buttons-area">
                         <VButton
                             label="Cancel"
                             width="180px"
                             height="48px"
                             :on-press="toggleEditing"
-                            is-white="true"/>
+                            is-white="true"
+                        />
                         <VButton
                             label="Save"
                             width="180px"
                             height="48px"
-                            :on-press="onSaveButtonClick"/>
+                            :on-press="onSaveButtonClick"
+                        />
                     </div>
                 </div>
             </div>
@@ -55,7 +58,8 @@
                     width="180px"
                     height="48px"
                     :on-press="toggleDeleteDialog"
-                    is-deletion="true"/>
+                    is-deletion="true"
+                />
             </div>
         </div>
         <DeleteProjectPopup v-if="isPopupShown"/>

web/satellite/src/components/project/ProjectOverviewArea.vue

@@ -6,13 +6,15 @@
         <TabNavigation
             v-if="isProjectSelected"
             class="project-overview__navigation"
-            :navigation="navigation"/>
+            :navigation="navigation"
+        />
         <router-view v-if="isProjectSelected"/>
         <EmptyState
             v-if="!isProjectSelected"
             main-title="Create your first project"
             additional-text='<p>Please click the button <b>"New Project"</b> in the right corner</p>'
-            :image-source="emptyImage" />
+            :image-source="emptyImage"
+        />
     </div>
 </template>
 

web/satellite/src/components/project/UsageReport.vue

@@ -18,7 +18,8 @@
                 <Datepicker
                     ref="datePicker"
                     :date="startTime"
-                    @change="getDates"/>
+                    @change="getDates"
+                />
                 <svg class="usage-report-container__options-area__option__image" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" @click.prevent.self="onCustomDateClick">
                     <path class="usage-report-svg-path" d="M16.3213 2.28026H14.8009V1.50058C14.8009 1.10058 14.4806 0.760742 14.0611 0.760742C13.6611 0.760742 13.3213 1.08106 13.3213 1.50058V2.28026H6.66106V1.50058C6.66106 1.10058 6.34074 0.760742 5.92122 0.760742C5.5009 0.760742 5.2009 1.10058 5.2009 1.50058V2.28026H3.68058C1.92042 2.28026 0.500977 3.70058 0.500977 5.45986V16.0599C0.500977 17.82 1.9213 19.2395 3.68058 19.2395H16.3204C18.0805 19.2395 19.5 17.8191 19.5 16.0599V5.45986C19.5008 3.70048 18.0804 2.28026 16.321 2.28026H16.3213ZM3.68066 3.74042H5.20098V4.5201C5.20098 4.9201 5.5213 5.25994 5.94082 5.25994C6.36114 5.25994 6.68066 4.93962 6.68066 4.5201V3.74042H13.3603V4.5201C13.3603 4.9201 13.6806 5.25994 14.1001 5.25994C14.5001 5.25994 14.8399 4.93962 14.8399 4.5201V3.74042H16.3603C17.3001 3.74042 18.0806 4.50058 18.0806 5.46074V7.06074H1.96098V5.46074C1.96098 4.5209 2.74066 3.74042 3.68052 3.74042H3.68066ZM9.62126 14.2006H10.4009C11.0213 14.2006 11.5213 14.7006 11.5213 15.3209C11.5213 15.9413 11.0213 16.4413 10.4009 16.4413H9.62126C9.00094 16.4413 8.50094 15.9413 8.50094 15.3209C8.50094 14.7006 9.00094 14.2006 9.62126 14.2006ZM8.50094 10.8404C8.50094 10.2201 9.00094 9.7201 9.62126 9.7201L10.4009 9.72088C11.0213 9.72088 11.5213 10.2209 11.5213 10.8412C11.5213 11.4615 11.0213 11.9615 10.4009 11.9615H9.62126C9.00094 11.9607 8.50094 11.4607 8.50094 10.8404V10.8404ZM14.8407 14.2006H15.6204C16.2407 14.2006 16.7407 14.7006 16.7407 15.3209C16.7407 15.9413 16.2407 16.4413 15.6204 16.4413H14.8407C14.2204 16.4413 13.7204 15.9413 13.7204 15.3209C13.7212 14.7006 14.2212 14.2006 14.8407 14.2006ZM13.7212 10.8404C13.7212 10.2201 14.2212 9.7201 14.8415 9.7201H15.6212C16.2415 9.7201 16.7415 10.2201 16.7415 10.8404C16.7415 11.4607 16.2415 11.9607 15.6212 11.9607H14.8415C14.2212 11.9607 13.7212 11.4607 13.7212 10.8404ZM6.2806 10.8404C6.2806 11.4607 5.7806 11.9607 5.16028 11.9607H4.3806C3.76028 11.9607 3.26028 11.4607 3.26028 10.8404C3.26028 10.2201 3.76028 9.7201 4.3806 9.7201H5.16028C5.7806 9.72088 6.2806 10.2209 6.2806 10.8404ZM4.3806 14.2006H5.16028C5.7806 14.2006 6.2806 14.7006 6.2806 15.3209C6.2806 15.9413 5.7806 16.4413 5.16028 16.4413H4.3806C3.76028 16.4413 3.26028 15.9413 3.26028 15.3209C3.26106 14.7006 3.76106 14.2006 4.3806 14.2006Z" fill="#2683FF"/>
                 </svg>
@@ -74,6 +75,7 @@ export default class UsageReport extends Vue {
     public startTime: any = {
         time: '',
     };
+
     private readonly dateRange: any;
 
     public constructor() {

web/satellite/src/components/team/AddUserPopup.vue

@@ -15,7 +15,7 @@
                         <img src="../../../static/images/register/ErrorInfo.svg"/>
                         <p class="add-user__form-container__label__error">{{formError}}</p>
                     </div>
-                    <div class="add-user__form-container__inputs-group" :class="{ 'scrollable': inputs.length > 4 }">
+                    <div class="add-user__form-container__inputs-group" :class="{ 'scrollable': isInputsGroupScrollable }">
                         <div v-for="(input, index) in inputs"
                             class="add-user__form-container__inputs-group__item"
                             :key="index" >
@@ -24,7 +24,8 @@
                                 v-model="input.value"
                                 class="no-error-input"
                                 :class="{ 'error-input': input.error }"
-                                    @keyup="resetFormErrors(index)" />
+                                @keyup="resetFormErrors(index)"
+                            />
                             <svg class="add-user__form-container__inputs-group__item__image" @click="deleteInput(index)" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <path class="delete-input-svg-path" d="M11.7803 1.28033C12.0732 0.987437 12.0732 0.512563 11.7803 0.21967C11.4874 -0.0732233 11.0126 -0.0732233 10.7197 0.21967L11.7803 1.28033ZM0.21967 10.7197C-0.0732233 11.0126 -0.0732233 11.4874 0.21967 11.7803C0.512563 12.0732 0.987437 12.0732 1.28033 11.7803L0.21967 10.7197ZM1.28033 0.21967C0.987437 -0.0732233 0.512563 -0.0732233 0.21967 0.21967C-0.0732233 0.512563 -0.0732233 0.987437 0.21967 1.28033L1.28033 0.21967ZM10.7197 11.7803C11.0126 12.0732 11.4874 12.0732 11.7803 11.7803C12.0732 11.4874 12.0732 11.0126 11.7803 10.7197L10.7197 11.7803ZM10.7197 0.21967L0.21967 10.7197L1.28033 11.7803L11.7803 1.28033L10.7197 0.21967ZM0.21967 1.28033L10.7197 11.7803L11.7803 10.7197L1.28033 0.21967L0.21967 1.28033Z" fill="#AFB7C1"/>
                             </svg>
@@ -47,13 +48,15 @@
                             width='205px'
                             height='48px'
                             :on-press="onClose"
-                            is-white="true"/>
+                            is-white="true"
+                        />
                         <VButton
                             label='Add Team Members'
                             width='205px'
                             height='48px'
                             :on-press="onAddUsersClick"
-                            :is-disabled="!isButtonActive"/>
+                            :is-disabled="!isButtonActive"
+                        />
                     </div>
                 </div>
                 <div class='add-user__close-cross-container' @click='onClose'>
@@ -159,8 +162,8 @@ export default class AddUserPopup extends Vue {
 
         try {
             await this.$store.dispatch(PM_ACTIONS.ADD, emailArray);
-        } catch (err) {
+        } catch (error) {
-            this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, `Error during adding project members. ${err.message}`);
+            this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, `Error during adding project members. ${error.message}`);
             this.isLoading = false;
 
             return;
@@ -219,6 +222,10 @@ export default class AddUserPopup extends Vue {
         return location.host + RouteConfig.Register.path;
     }
 
+    public get isInputsGroupScrollable(): boolean {
+        return this.inputs.length > 4;
+    }
+
     private resetFormErrors(index): void {
         this.inputs[index].setError(false);
         if (!this.hasInputError()) {

web/satellite/src/components/team/HeaderArea.vue

@@ -9,31 +9,34 @@
                 ref="headerComponent"
                 placeholder="Team Members"
                 :search="processSearchQuery">
-                    <div class="header-default-state" v-if="headerState === 0">
+                <div class="header-default-state" v-if="isDefaultState">
                     <span class="header-default-state__info-text">The only project role currently available is Admin, which gives <b>full access</b> to the project.</span>
                     <VButton
                         class="button"
                         label="+Add"
                         width="122px"
                         height="48px"
-                            :on-press="onAddUsersClick"/>
+                        :on-press="onAddUsersClick"
+                    />
                 </div>
-                    <div class="header-selected-members" v-if="headerState === 1 && !isDeleteClicked">
+                <div class="header-selected-members" v-if="areProjectMembersSelected">
                     <VButton
                         class="button deletion"
                         label="Delete"
                         width="122px"
                         height="48px"
-                            :on-press="onFirstDeleteClick"/>
+                        :on-press="onFirstDeleteClick"
+                    />
                     <VButton
                         class="button"
                         label="Cancel"
                         width="122px"
                         height="48px"
                         is-white="true"
-                            :on-press="onClearSelection"/>
+                        :on-press="onClearSelection"
+                    />
                 </div>
-                    <div class="header-after-delete-click" v-if="headerState === 1 && isDeleteClicked">
+                <div class="header-after-delete-click" v-if="areSelectedProjectMembersBeingDeleted">
                     <span class="header-after-delete-click__delete-confirmation">Are you sure you want to delete {{selectedProjectMembersCount}} {{userCountTitle}}?</span>
                     <div class="header-after-delete-click__button-area">
                         <VButton
@@ -41,14 +44,16 @@
                             label="Delete"
                             width="122px"
                             height="48px"
-                                :on-press="onDelete"/>
+                            :on-press="onDelete"
+                        />
                         <VButton
                             class="button"
                             label="Cancel"
                             width="122px"
                             height="48px"
                             is-white="true"
-                                :on-press="onClearSelection"/>
+                            :on-press="onClearSelection"
+                        />
                     </div>
                 </div>
             </VHeader>
@@ -124,8 +129,8 @@ export default class HeaderArea extends Vue {
 
         try {
             await this.$store.dispatch(PM_ACTIONS.DELETE, projectMemberEmails);
-        } catch (err) {
+        } catch (error) {
-            this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, `Error while deleting users from projectMembers. ${err.message}`);
+            this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, `Error while deleting users from projectMembers. ${error.message}`);
 
             return;
         }
@@ -140,14 +145,26 @@ export default class HeaderArea extends Vue {
         this.$store.dispatch(PM_ACTIONS.SET_SEARCH_QUERY, search);
         try {
             await this.$store.dispatch(PM_ACTIONS.FETCH, this.FIRST_PAGE);
-        } catch (err) {
+        } catch (error) {
-            this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, `Unable to fetch project members. ${err.message}`);
+            this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, `Unable to fetch project members. ${error.message}`);
         }
     }
 
     public get isAddTeamMembersPopupShown(): boolean {
         return this.$store.state.appStateModule.appState.isAddTeamMembersPopupShown;
     }
+
+    public get isDefaultState(): boolean {
+        return this.headerState === 0;
+    }
+
+    public get areProjectMembersSelected(): boolean {
+        return this.headerState === 1 && !this.isDeleteClicked;
+    }
+
+    public get areSelectedProjectMembersBeingDeleted(): boolean {
+        return this.headerState === 1 && this.isDeleteClicked;
+    }
 }
 </script>
 

web/satellite/src/components/team/ProjectMemberListItem.vue

@@ -8,10 +8,10 @@
             <div class="user-container__base-info__avatar" :style="avatarData.style">
                 <h1 class="user-container__base-info__avatar__letter">{{avatarData.letter}}</h1>
             </div>
-            <p class="user-container__base-info__user-name">{{this.itemData.formattedFullName()}}</p>
+            <p class="user-container__base-info__user-name">{{itemName}}</p>
         </div>
-        <p class="user-container__date">{{this.itemData.joinedAtLocal()}}</p>
+        <p class="user-container__date">{{itemDate}}</p>
-        <p class="user-container__user-email">{{this.itemData.formattedEmail()}}</p>
+        <p class="user-container__user-email">{{itemEmail}}</p>
     </div>
 </template>
 
@@ -40,6 +40,18 @@ export default class ProjectMemberListItem extends Vue {
             style,
         };
     }
+
+    public get itemName(): string {
+        return this.itemData.formattedFullName();
+    }
+
+    public get itemDate(): string {
+        return this.itemData.joinedAtLocal();
+    }
+
+    public get itemEmail(): string {
+        return this.itemData.formattedEmail();
+    }
 }
 </script>
 

web/satellite/src/components/team/ProjectMembersArea.vue

@@ -6,24 +6,27 @@
         <div class="team-area__header">
             <HeaderArea
                 :header-state="headerState"
-                :selected-project-members-count="selectedProjectMembers.length"/>
+                :selected-project-members-count="selectedProjectMembers.length"
+            />
         </div>
-        <div class="team-area__container" id="team-container" v-if="projectMembersCount > 0 || projectMembersTotalCount > 0">
+        <div class="team-area__container" id="team-container" v-if="isTeamAreaShown">
             <SortingListHeader :on-header-click-callback="onHeaderSectionClickCallback"/>
             <div class="team-area__container__content">
                 <VList
                     :data-set="projectMembers"
                     :item-component="getItemComponent"
-                    :on-item-click="onMemberClick"/>
+                    :on-item-click="onMemberClick"
+                />
             </div>
             <VPagination
                 v-if="totalPageCount > 1"
                 class="pagination-area"
                 ref="pagination"
                 :total-page-count="totalPageCount"
-                :on-page-click-callback="onPageClick"/>
+                :on-page-click-callback="onPageClick"
+            />
         </div>
-        <div class="team-area__empty-search-result-area" v-if="(projectMembersCount === 0 && projectMembersTotalCount === 0)">
+        <div class="team-area__empty-search-result-area" v-if="isEmptySearchResultShown">
             <h1 class="team-area__empty-search-result-area__title">No results found</h1>
             <svg class="team-area__empty-search-result-area__image" width="380" height="295" viewBox="0 0 380 295" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M168 295C246.997 295 311 231.2 311 152.5C311 73.8 246.997 10 168 10C89.0028 10 25 73.8 25 152.5C25 231.2 89.0028 295 168 295Z" fill="#E8EAF2"/>
@@ -72,6 +75,10 @@ import { SortDirection } from '@/types/common';
 import { ProjectMember, ProjectMemberHeaderState, ProjectMemberOrderBy } from '@/types/projectMembers';
 import { NOTIFICATION_ACTIONS, PM_ACTIONS } from '@/utils/constants/actionNames';
 
+declare interface ResetPagination {
+    resetPageIndex(): void;
+}
+
 @Component({
     components: {
         HeaderArea,
@@ -83,6 +90,10 @@ import { NOTIFICATION_ACTIONS, PM_ACTIONS } from '@/utils/constants/actionNames'
 export default class ProjectMembersArea extends Vue {
     private FIRST_PAGE = 1;
 
+    public $refs!: {
+        pagination: HTMLElement & ResetPagination;
+    };
+
     public async beforeDestroy(): Promise<void> {
         await this.$store.dispatch(PM_ACTIONS.CLEAR_SELECTION);
     }
@@ -123,6 +134,14 @@ export default class ProjectMembersArea extends Vue {
         return ProjectMemberHeaderState.DEFAULT;
     }
 
+    public get isTeamAreaShown(): boolean {
+        return this.projectMembersCount > 0 || this.projectMembersTotalCount > 0;
+    }
+
+    public get isEmptySearchResultShown(): boolean {
+        return this.projectMembersCount === 0 && this.projectMembersTotalCount === 0;
+    }
+
     public async onPageClick(index: number): Promise<void> {
         try {
             await this.$store.dispatch(PM_ACTIONS.FETCH, index);
@@ -140,7 +159,9 @@ export default class ProjectMembersArea extends Vue {
             this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, `Unable to fetch project members. ${error.message}`);
         }
 
-        (this.$refs.pagination as VPagination).resetPageIndex();
+        if (this.totalPageCount > 1) {
+            this.$refs.pagination.resetPageIndex();
+        }
     }
 }
 </script>

web/satellite/src/components/team/SortingListHeader.vue

@@ -6,20 +6,23 @@
         <div class="sort-header-container__name-container" @click="onHeaderItemClick(ProjectMemberOrderBy.NAME)">
             <p class="sort-header-container__name-container__title">Name</p>
             <VerticalArrows
-                :is-active="getSortBy === ProjectMemberOrderBy.NAME"
+                :is-active="areProjectMembersSortedByName"
-                :direction="getSortDirection"/>
+                :direction="getSortDirection"
+            />
         </div>
         <div class="sort-header-container__added-container" @click="onHeaderItemClick(ProjectMemberOrderBy.CREATED_AT)">
             <p class="sort-header-container__added-container__title">Added</p>
             <VerticalArrows
-                :is-active="getSortBy === ProjectMemberOrderBy.CREATED_AT"
+                :is-active="areProjectMembersSortedByDate"
-                :direction="getSortDirection"/>
+                :direction="getSortDirection"
+            />
         </div>
         <div class="sort-header-container__email-container" @click="onHeaderItemClick(ProjectMemberOrderBy.EMAIL)">
             <p class="sort-header-container__email-container__title">Email</p>
             <VerticalArrows
-                :is-active="getSortBy === ProjectMemberOrderBy.EMAIL"
+                :is-active="areProjectMembersSortedByEmail"
-                :direction="getSortDirection"/>
+                :direction="getSortDirection"
+            />
         </div>
     </div>
 </template>
@@ -54,8 +57,16 @@ export default class SortingListHeader extends Vue {
         return SortDirection.DESCENDING;
     }
 
-    public get getSortBy() {
+    public areProjectMembersSortedByName(): boolean {
-        return this.sortBy;
+        return this.sortBy === ProjectMemberOrderBy.NAME;
+    }
+
+    public areProjectMembersSortedByDate(): boolean {
+        return this.sortBy === ProjectMemberOrderBy.CREATED_AT;
+    }
+
+    public areProjectMembersSortedByEmail(): boolean {
+        return this.sortBy === ProjectMemberOrderBy.EMAIL;
     }
 
     public async onHeaderItemClick(sortBy: ProjectMemberOrderBy): Promise<void> {

web/satellite/src/views/DashboardArea.vue

@@ -4,7 +4,7 @@
 <template>
     <div class="dashboard-container">
         <div v-if="isLoading" class="loading-overlay active">
-            <img class="loading-image" src="../../static/images/register/Loading.gif">
+            <img class="loading-image" src="@/../static/images/register/Loading.gif">
         </div>
         <div v-if="!isLoading" class="dashboard-container__wrap">
             <NavigationArea class="regular-navigation"/>

web/satellite/src/views/forgotPassword/forgotPassword.html

@@ -3,12 +3,12 @@
 
 <div class="forgot-password-container">
     <div :class="loadingClassName">
-        <img class="loading-image" src="../../../static/images/register/Loading.gif">
+        <img class="loading-image" src="@/../static/images/register/Loading.gif">
     </div>
-    <img class="image" src="../../../static/images/AuthImage.svg" alt="" >
+    <img class="image" src="@/../static/images/AuthImage.svg" alt="">
     <div class="forgot-password-container__wrapper">
         <div class="forgot-password-container__header">
-            <img @click="onLogoClick" class="forgot-password-container__logo" src="../../../static/images/Logo.svg" alt="logo">
+            <img @click="onLogoClick" class="forgot-password-container__logo" src="@/../static/images/Logo.svg" alt="logo">
             <div class="forgot-password-container__login-button" @click="onBackToLoginClick">
                 <p class="forgot-password-container__login-button__label">Back to Login</p>
             </div>
@@ -25,7 +25,8 @@
                     :error="emailError"
                     @setData="setEmail"
                     width="100%"
-                    height="46px" />
+                    height="46px"
+                />
                 <div class="forgot-password-area__submit-container" @click.prevent="onSendConfigurations">
                     <div class="forgot-password-area__submit-container__send-button">
                         <p class="forgot-password-area__submit-container__send-button__label">Reset Password</p>

web/satellite/src/views/login/loginArea.html

@@ -3,11 +3,11 @@
 
 <div class="login-container" @keyup.enter="onLogin">
     <div :class="loadingClassName"></div>
-    <img :class="loadingLogoClassName" src="../../../static/images/LogoWhite.svg" alt="loading-logo">
+    <img :class="loadingLogoClassName" src="@/../static/images/LogoWhite.svg" alt="loading-logo">
-    <img class="image" src="../../../static/images/AuthImage.svg" alt="" >
+    <img class="image" src="@/../static/images/AuthImage.svg" alt="" >
     <div class="login-container__wrapper">
         <div class="login-container__header">
-            <img class="login-container__logo" src="../../../static/images/Logo.svg" alt="logo" @click="onLogoClick">
+            <img class="login-container__logo" src="@/../static/images/Logo.svg" alt="logo" @click="onLogoClick">
             <div class="login-container__register-button" @click.prevent="onSignUpClick">
                 <p class="login-container__register-button__label">Create Account</p>
             </div>
@@ -23,7 +23,8 @@
                     :error="emailError"
                     @setData="setEmail"
                     height="46px"
-                    width="100%" />
+                    width="100%"
+                />
                 <HeaderlessInput
                     class="login-area__password-input"
                     placeholder="Password"
@@ -31,7 +32,8 @@
                     @setData="setPassword"
                     width="100%"
                     height="46px"
-                    is-password="true" />
+                    is-password="true"
+                />
                 <div class="login-area__submit-area">
                     <router-link :to="forgotPasswordPath" class="login-area__navigation-area__nav-link" exact>
                         <h3 class="login-area__navigation-area__nav-link__link"><strong>Forgot password?</strong></h3>

web/satellite/src/views/register/registerArea.html

@@ -3,12 +3,12 @@
 
 <div class="register-container" @keyup.enter="onCreateClick">
     <div :class="loadingClassName">
-        <img class="loading-image" src="../../../static/images/register/Loading.gif">
+        <img class="loading-image" src="@/../static/images/register/Loading.gif">
     </div>
-    <img class="image" src="../../../static/images/AuthImage.svg" alt="" >
+    <img class="image" src="@/../static/images/AuthImage.svg" alt="" >
     <div class="register-container__wrapper">
         <div class="register-container__header">
-            <img class="register-container__logo" src="../../../static/images/Logo.svg" alt="logo" @click="onLogoClick">
+            <img class="register-container__logo" src="@/../static/images/Logo.svg" alt="logo" @click="onLogoClick">
             <div class="register-container__register-button" @click.prevent="onLoginClick">
                 <p class="register-container__register-button__label">Login</p>
             </div>
@@ -25,14 +25,16 @@
                     :error="fullNameError"
                     @setData="setFullName"
                     width="100%"
-                    height="46px" />
+                    height="46px"
+                />
                 <HeaderlessInput
                     class="full-input"
                     label="Nickname"
                     placeholder="Enter Nickname"
                     @setData="setShortName"
                     width="100%"
-                    height="46px" />
+                    height="46px"
+                />
                 <HeaderlessInput
                     class="full-input"
                     label="Email"
@@ -40,7 +42,8 @@
                     :error="emailError"
                     @setData="setEmail"
                     width="100%"
-                    height="46px" />
+                    height="46px"
+                />
                 <div class="register-input">
                     <HeaderlessInput
                         class="full-input"
@@ -50,7 +53,8 @@
                         @setData="setPassword"
                         width="100%"
                         height="46px"
-                        is-password="true" />
+                        is-password="true"
+                    />
                     <VInfo
                         class="register-input__info-button"
                         bold-text="Use 6 or more characters with a mix of letters, numbers & symbols" >
@@ -70,7 +74,8 @@
                         @setData="setRepeatedPassword"
                         width="100%"
                         height="46px"
-                        is-password="true" />
+                        is-password="true"
+                    />
                     <VInfo
                         class="register-input__info-button"
                         bold-text="Use 6 or more characters with a mix of letters, numbers & symbols">
@@ -85,7 +90,7 @@
                     <div class="register-area__submit-container__terms-area">
                         <label class="container">
                             <input type="checkbox" v-model="isTermsAccepted">
-                            <span :class="[isTermsAcceptedError ? 'checkmark error': 'checkmark']"></span>
+                            <span class="checkmark" :class="{'error': isTermsAcceptedError}"></span>
                         </label>
                         <h2 class="register-area__submit-container__terms-area__terms-confirmation">I agree to the <a class="register-area__submit-container__terms-area__link" href="https://tardigrade.io/terms-of-use/" target="_blank">Terms & Conditions</a></h2>
                     </div>

web/satellite/tests/unit/components/navigation/__snapshots__/navigationArea.spec.ts.snap

@@ -86,6 +86,7 @@ exports[`NavigationArea snapshot not changed with project 1`] = `
       <!---->
       <!---->
     </div>
+    <div class="navigation-area__account-area">
       <router-link-stub to="/account/profile" tag="a" event="click" class="navigation-area__item-container account-item">
         <div class="navigation-area__item-container__link-container">
           <h1 class="navigation-area__item-container__link-container__title account-item">Profile</h1>
@@ -101,6 +102,7 @@ exports[`NavigationArea snapshot not changed with project 1`] = `
           <h1 class="navigation-area__item-container__link-container__title account-item">Payment Methods</h1>
         </div>
       </router-link-stub>
+    </div>
     <div class="divider custom-divider"></div>
   </div>
 </div>
@@ -192,6 +194,7 @@ exports[`NavigationArea snapshot not changed without project 1`] = `
       <!---->
       <!---->
     </div>
+    <div class="navigation-area__account-area">
       <router-link-stub to="/account/profile" tag="a" event="click" class="navigation-area__item-container account-item">
         <div class="navigation-area__item-container__link-container">
           <h1 class="navigation-area__item-container__link-container__title account-item">Profile</h1>
@@ -207,6 +210,7 @@ exports[`NavigationArea snapshot not changed without project 1`] = `
           <h1 class="navigation-area__item-container__link-container__title account-item">Payment Methods</h1>
         </div>
       </router-link-stub>
+    </div>
     <div class="divider custom-divider"></div>
   </div>
 </div>

web/satellite/tests/unit/projectMembers/__snapshots__/SortingListHeader.spec.ts.snap

@@ -14,7 +14,7 @@ exports[`SortingListHeader.vue should render correctly 1`] = `
     <p class="sort-header-container__added-container__title">Added</p>
     <div class="container"><svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="">
         <path d="M4.73684 5.70565e-07L9 6L-9.53674e-07 6L4.73684 5.70565e-07Z" fill="#354049" class="arrow-svg-path"></path>
-      </svg> <svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="">
+      </svg> <svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="active">
         <path d="M4.26316 6L1.90735e-06 0L9 1.59559e-06L4.26316 6Z" fill="#354049" class="arrow-svg-path"></path>
       </svg></div>
   </div>
@@ -22,7 +22,7 @@ exports[`SortingListHeader.vue should render correctly 1`] = `
     <p class="sort-header-container__email-container__title">Email</p>
     <div class="container"><svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="">
         <path d="M4.73684 5.70565e-07L9 6L-9.53674e-07 6L4.73684 5.70565e-07Z" fill="#354049" class="arrow-svg-path"></path>
-      </svg> <svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="">
+      </svg> <svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="active">
         <path d="M4.26316 6L1.90735e-06 0L9 1.59559e-06L4.26316 6Z" fill="#354049" class="arrow-svg-path"></path>
       </svg></div>
   </div>

web/satellite/tests/unit/views/__snapshots__/DashboardArea.spec.ts.snap

@@ -17,7 +17,7 @@ exports[`Dashboard renders correctly when data is loaded 1`] = `
 
 exports[`Dashboard renders correctly when data is loading 1`] = `
 <div class="dashboard-container">
-  <div class="loading-overlay active"><img src="../../static/images/register/Loading.gif" class="loading-image"></div>
+  <div class="loading-overlay active"><img src="@/../static/images/register/Loading.gif" class="loading-image"></div>
   <!---->
 </div>
 `;