Account settings page rework (#2007)
This commit is contained in:
Nikolay Yurchenko
GitHub
parent
2ab95b533e
commit
5062436846
@ -3,307 +3,62 @@
|
||||
|
||||
<template>
|
||||
<div class="account-area-container">
|
||||
<h1>Account Settings</h1>
|
||||
<div class="account-area-container__edit-profile" >
|
||||
<div class="account-area-container__edit-profile__row">
|
||||
<div class="account-area-container__edit-profile__avatar">
|
||||
<h1>{{avatarLetter}}</h1>
|
||||
</div>
|
||||
<div class="account-area-container__edit-profile__text">
|
||||
<h2>Edit Profile</h2>
|
||||
<h3>This information will be visible to all users</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div title="Edit">
|
||||
<svg class="editsvg" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" v-on:click="toggleEditProfilePopup">
|
||||
<rect width="40" height="40" rx="4" fill="#E2ECF7"/>
|
||||
<path d="M19.0901 21.4605C19.3416 21.7259 19.6695 21.8576 19.9995 21.8576C20.3295 21.8576 20.6574 21.7259 20.9089 21.4605L28.6228 13.3181C29.1257 12.7871 29.1257 11.9291 28.6228 11.3982C28.1198 10.8673 27.3069 10.8673 26.8039 11.3982L19.0901 19.5406C18.5891 20.0715 18.5891 20.9295 19.0901 21.4605ZM27.7134 19.1435C27.0031 19.1435 26.4277 19.7509 26.4277 20.5005V27.2859H13.5713V13.7152H19.9995C20.7097 13.7152 21.2851 13.1078 21.2851 12.3581C21.2851 11.6085 20.7097 11.0011 19.9995 11.0011H13.5713C12.1508 11.0011 11 12.2158 11 13.7152V27.2859C11 28.7852 12.1508 30 13.5713 30H26.4277C27.8482 30 28.999 28.7852 28.999 27.2859V20.5005C28.999 19.7509 28.4236 19.1435 27.7134 19.1435Z" fill="#2683FF"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="account-area-container__secondary-container">
|
||||
<div class="account-area-container__secondary-container__change-password">
|
||||
<div class="account-area-container__edit-profile__row">
|
||||
<svg class="account-area-container__secondary-container__img" width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M30 60C46.5685 60 60 46.5685 60 30C60 13.4315 46.5685 0 30 0C13.4315 0 0 13.4315 0 30C0 46.5685 13.4315 60 30 60Z" fill="#E8EAF2"/>
|
||||
<path d="M29.5001 34.5196C30.1001 34.5196 30.5865 34.0452 30.5865 33.46C30.5865 32.8748 30.1001 32.4004 29.5001 32.4004C28.9 32.4004 28.4136 32.8748 28.4136 33.46C28.4136 34.0452 28.9 34.5196 29.5001 34.5196Z" fill="#354049"/>
|
||||
<path d="M39.9405 40.2152C40.1781 40 40.3139 39.6854 40.3139 39.3709V25.5464C40.3139 24.9007 39.7707 24.3709 39.1086 24.3709H35.7473V21.0927C35.7473 17.7318 32.9462 15 29.5 15C26.0538 15 23.2527 17.7318 23.2527 21.0927V24.3709H19.8914C19.2293 24.3709 18.686 24.9007 18.686 25.5464V39.3709C18.686 39.6854 18.8218 40 19.0595 40.2152L23.7959 44.6689C24.0166 44.8841 24.3222 45 24.6278 45H34.3552C34.6608 45 34.9664 44.8841 35.1871 44.6689L39.9405 40.2152ZM30.7053 36.6391V38.1291C30.7053 38.7748 30.1621 39.3046 29.5 39.3046C28.8379 39.3046 28.2947 38.7748 28.2947 38.1291V36.6391C26.9705 36.1589 26.0198 34.9172 26.0198 33.4437C26.0198 31.5728 27.5817 30.0497 29.5 30.0497C31.4183 30.0497 32.9801 31.5728 32.9801 33.4437C32.9801 34.9172 32.0295 36.1589 30.7053 36.6391ZM33.3367 24.3709H25.6464V21.0927C25.6464 19.0232 27.3779 17.351 29.483 17.351C31.5881 17.351 33.3197 19.0397 33.3197 21.0927V24.3709H33.3367Z" fill="#354049"/>
|
||||
</svg>
|
||||
<div class="account-area-container__secondary-container__change-password__text-container">
|
||||
<h2>Change Password</h2>
|
||||
<h3>6 or more characters</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div title="Edit">
|
||||
<svg class="editsvg" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" v-on:click="toggleChangePasswordPopup">
|
||||
<rect width="40" height="40" rx="4" fill="#E2ECF7"/>
|
||||
<path d="M19.0901 21.4605C19.3416 21.7259 19.6695 21.8576 19.9995 21.8576C20.3295 21.8576 20.6574 21.7259 20.9089 21.4605L28.6228 13.3181C29.1257 12.7871 29.1257 11.9291 28.6228 11.3982C28.1198 10.8673 27.3069 10.8673 26.8039 11.3982L19.0901 19.5406C18.5891 20.0715 18.5891 20.9295 19.0901 21.4605ZM27.7134 19.1435C27.0031 19.1435 26.4277 19.7509 26.4277 20.5005V27.2859H13.5713V13.7152H19.9995C20.7097 13.7152 21.2851 13.1078 21.2851 12.3581C21.2851 11.6085 20.7097 11.0011 19.9995 11.0011H13.5713C12.1508 11.0011 11 12.2158 11 13.7152V27.2859C11 28.7852 12.1508 30 13.5713 30H26.4277C27.8482 30 28.999 28.7852 28.999 27.2859V20.5005C28.999 19.7509 28.4236 19.1435 27.7134 19.1435Z" fill="#2683FF"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="account-area-container__secondary-container__email-container">
|
||||
<div class="account-area-container__edit-profile__row">
|
||||
<svg class="account-area-container__secondary-container__img" width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M30 60C46.5685 60 60 46.5685 60 30C60 13.4315 46.5685 0 30 0C13.4315 0 0 13.4315 0 30C0 46.5685 13.4315 60 30 60Z" fill="#E8EAF2"/>
|
||||
<path d="M29.9998 16.7598C25.7965 16.7641 21.8459 18.7646 19.3534 22.1498C16.8607 25.535 16.1236 29.9013 17.3671 33.9162C18.6096 37.9314 21.6853 41.1186 25.6546 42.5032C29.6238 43.8868 34.014 43.305 37.4846 40.9348L35.9861 38.7538C33.3633 40.552 30.0711 41.0781 27.0174 40.1856C23.9649 39.2931 21.4732 37.077 20.2319 34.1482C18.9905 31.2203 19.1294 27.8888 20.6104 25.0734C22.0924 22.2591 24.7588 20.2577 27.8761 19.6232C30.9922 18.9878 34.2296 19.7862 36.6938 21.7976C39.1581 23.809 40.5898 26.8202 40.592 30.0007V31.0365C40.592 32.8762 39.8001 33.9732 38.4723 33.9732V33.995L38.4734 33.9961C38.3892 33.9819 38.305 33.9743 38.2208 33.9743H37.9408C37.1959 33.9743 36.0868 32.8903 36.0868 32.1597V30.0007C36.0989 28.1019 35.2293 26.3038 33.7331 25.1345C32.2358 23.9653 30.2824 23.5563 28.4417 24.0277C26.602 24.498 25.085 25.7963 24.3335 27.5408C23.5832 29.2854 23.6838 31.2794 24.6069 32.9395C25.529 34.5987 27.1696 35.7373 29.0475 36.0206C30.9254 36.3039 32.8286 35.6991 34.2 34.3855C35.0597 35.6542 36.521 36.6255 37.9386 36.6255V36.6025C38.0228 36.6178 38.1092 36.6255 38.1956 36.6255H38.4756C41.326 36.6255 43.2356 34.3855 43.2356 31.042V30.0007C43.2312 26.4909 41.8356 23.1265 39.3551 20.6448C36.8734 18.1631 33.5101 16.7654 30.0003 16.7598L29.9998 16.7598ZM29.9998 33.4416C28.6075 33.4416 27.353 32.6038 26.8204 31.3176C26.2878 30.0313 26.582 28.5515 27.5664 27.567C28.5508 26.5824 30.0306 26.2884 31.317 26.821C32.6032 27.3537 33.441 28.6082 33.441 30.0004C33.441 31.9014 31.901 33.4413 30.0001 33.4413L29.9998 33.4416Z" fill="#354049"/>
|
||||
</svg>
|
||||
<div class="account-area-container__secondary-container__email-container__text-container">
|
||||
<h2>{{user.email}}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="account-area-container__button-area">
|
||||
<Button
|
||||
class="account-area-container__button-area__delete-button"
|
||||
label="Delete account"
|
||||
width="210px"
|
||||
height="56px"
|
||||
:onPress="toggleDeleteAccountPopup"
|
||||
isDeletion/>
|
||||
</div>
|
||||
<ChangePasswordPopup v-if="isChangePasswordPopupShown"/>
|
||||
<EditProfilePopup v-if="isEditProfilePopupShown"/>
|
||||
<DeleteAccountPopup v-if="isDeleteAccountPopupShown" />
|
||||
<h1>Account</h1>
|
||||
<TabNavigation
|
||||
class="account-area-container__navigation"
|
||||
:navigation="navigation"/>
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import Button from '@/components/common/Button.vue';
|
||||
import HeaderedInput from '@/components/common/HeaderedInput.vue';
|
||||
import HeaderlessInput from '@/components/common/HeaderlessInput.vue';
|
||||
import Checkbox from '@/components/common/Checkbox.vue';
|
||||
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
|
||||
import DeleteAccountPopup from '@/components/account/DeleteAccountPopup.vue';
|
||||
import ChangePasswordPopup from '@/components/account/ChangePasswordPopup.vue';
|
||||
import EditProfilePopup from '@/components/account/EditProfilePopup.vue';
|
||||
import TabNavigation from '@/components/navigation/TabNavigation.vue';
|
||||
import { ACCOUNT_ROUTES } from '@/utils/constants/tabNavigation';
|
||||
|
||||
@Component(
|
||||
{
|
||||
mounted() {
|
||||
this.$router.push(ACCOUNT_ROUTES.PROFILE.path);
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
email: this.$store.getters.user.email,
|
||||
navigation: ACCOUNT_ROUTES,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleDeleteAccountPopup: function(): void {
|
||||
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_DEL_ACCOUNT);
|
||||
},
|
||||
toggleChangePasswordPopup: function(): void {
|
||||
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_CHANGE_PASSWORD_POPUP);
|
||||
},
|
||||
toggleEditProfilePopup: function(): void {
|
||||
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_EDIT_PROFILE_POPUP);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
user: function() {
|
||||
return {
|
||||
fullName: this.$store.getters.user.fullName,
|
||||
shortName: this.$store.getters.user.shortName,
|
||||
email: this.$store.getters.user.email,
|
||||
};
|
||||
},
|
||||
isEditProfilePopupShown: function () {
|
||||
return this.$store.state.appStateModule.appState.isEditProfilePopupShown;
|
||||
},
|
||||
isChangePasswordPopupShown: function () {
|
||||
return this.$store.state.appStateModule.appState.isChangePasswordPopupShown;
|
||||
},
|
||||
isDeleteAccountPopupShown: function () {
|
||||
return this.$store.state.appStateModule.appState.isDeleteAccountPopupShown;
|
||||
},
|
||||
avatarLetter: function (): string {
|
||||
return this.$store.getters.userName.slice(0, 1).toUpperCase();
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Button,
|
||||
HeaderedInput,
|
||||
HeaderlessInput,
|
||||
Checkbox,
|
||||
DeleteAccountPopup,
|
||||
ChangePasswordPopup,
|
||||
EditProfilePopup,
|
||||
TabNavigation,
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
export default class AccountArea extends Vue {
|
||||
}
|
||||
|
||||
export default class AccountArea extends Vue {}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.account-area-container {
|
||||
padding: 55px 55px 55px 55px;
|
||||
position: relative;
|
||||
padding: 44px 55px 55px 55px;
|
||||
position: relative;
|
||||
|
||||
h1 {
|
||||
font-family: 'font_bold';
|
||||
font-size: 24px;
|
||||
line-height: 29px;
|
||||
color: #354049;
|
||||
margin-block-start: 0.5em;
|
||||
margin-block-end: 0.5em;
|
||||
}
|
||||
h2 {
|
||||
@extend h1;
|
||||
font-size: 18px;
|
||||
line-height: 27px;
|
||||
word-break: break-all;
|
||||
}
|
||||
h3 {
|
||||
@extend h2;
|
||||
font-family: 'font_regular';
|
||||
color: #AFB7C1;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
}
|
||||
&__navigation {
|
||||
position: absolute;
|
||||
right: 55px;
|
||||
top: 44px;
|
||||
z-index: 99;
|
||||
background-color: #F5F6FA;
|
||||
}
|
||||
|
||||
&__edit-profile {
|
||||
height: 66px;
|
||||
width: calc(100% - 80px);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 37px 40px;
|
||||
margin-top: 40px;
|
||||
background-color: #fff;
|
||||
|
||||
&__row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #E8EAF2;
|
||||
margin-right: 32px;
|
||||
|
||||
h1 {
|
||||
font-family: 'font_medium';
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
color: #354049;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__secondary-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 40px;
|
||||
|
||||
&__change-password {
|
||||
height: 66px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 37px 40px;
|
||||
background-color: #fff;
|
||||
width: calc(48% - 80px);
|
||||
|
||||
&__text-container {
|
||||
margin-left: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&__email-container {
|
||||
height: 66px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 37px 40px;
|
||||
background-color: #fff;
|
||||
width: calc(48% - 80px);
|
||||
|
||||
&__text-container {
|
||||
margin-left: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&__img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
&__button-area {
|
||||
margin-top: 40px;
|
||||
width: 100%;
|
||||
align-self: flex-start;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
.editsvg {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
rect {
|
||||
fill: #2683FF !important;
|
||||
}
|
||||
path {
|
||||
fill: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input-container.full-input,
|
||||
.input-wrap.full-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px) {
|
||||
.account-area-container {
|
||||
&__secondary-container {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
&__change-password {
|
||||
width: calc(100% - 80px);
|
||||
}
|
||||
|
||||
&__email-container {
|
||||
margin-top: 40px;
|
||||
width: calc(100% - 80px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 850px) {
|
||||
.account-area-container {
|
||||
height: 600px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
@media screen and (max-height: 850px) {
|
||||
.account-area-container {
|
||||
height: 550px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-height: 700px) {
|
||||
.account-area-container {
|
||||
height: 500px;
|
||||
}
|
||||
h1 {
|
||||
position: absolute;
|
||||
left: 55px;
|
||||
top: 44px;
|
||||
z-index: 99;
|
||||
font-family: 'font_bold';
|
||||
font-size: 24px;
|
||||
line-height: 29px;
|
||||
color: #354049;
|
||||
margin-block-start: 0.5em;
|
||||
margin-block-end: 0.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
180
web/satellite/src/components/account/AccountPaymentMethods.vue
Normal file
180
web/satellite/src/components/account/AccountPaymentMethods.vue
Normal file
@ -0,0 +1,180 @@
|
||||
// Copyright (C) 2018 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div class="payment-methods-container">
|
||||
<div class="payment-methods-container__card-container">
|
||||
<div class="payment-methods-container__card-container__info-area">
|
||||
<img class="payment-methods-container__card-container__info-area__card-logo" src="../../../static/images/Logo.svg">
|
||||
<div class="payment-methods-container__card-container__info-area__info-container">
|
||||
<h1>xxxx 0000</h1>
|
||||
<h2>Shawn Wilkinson</h2>
|
||||
</div>
|
||||
<div class="payment-methods-container__card-container__info-area__expire-container">
|
||||
<h2>Expires</h2>
|
||||
<h1>12/2020</h1>
|
||||
</div>
|
||||
<h3 class="payment-methods-container__card-container__info-area__added-text">Added on 29 May 2019</h3>
|
||||
</div>
|
||||
<div class="payment-methods-container__card-container__default-button" v-if="true">
|
||||
<p class="payment-methods-container__card-container__default-button__label">Default</p>
|
||||
</div>
|
||||
<div class="payment-methods-container__card-container__button-area" v-if="false">
|
||||
<div class="payment-methods-container__card-container__button-area__make-button">
|
||||
<p class="payment-methods-container__card-container__button-area__make-button__label">Make Default</p>
|
||||
</div>
|
||||
<svg class="payment-methods-container__card-container__button-area__delete-button"
|
||||
width="34"
|
||||
height="34"
|
||||
viewBox="0 0 34 34"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="34" height="34" rx="17" fill="#EB5757"/>
|
||||
<path d="M19.7834 11.9727V11.409C19.7834 10.6576 19.1215 10 18.2706 10H16.0014C15.1504 10 14.4886 10.6576 14.4886 11.409V11.9727H10.7065V13.1938H12.0302V22.3057C12.0302 23.5269 12.9758 24.4662 14.0158 24.4662H20.1616C21.2962 24.4662 22.1471 23.5269 22.1471 22.3057V13.1938H23.4709V11.9727H19.7834ZM16.6632 22.3057H15.3395V14.2271H16.6632V22.3057ZM18.9324 22.3057H17.6087V14.2271H18.9324V22.3057Z" fill="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
class="payment-methods-container__add-button"
|
||||
label="Add Card"
|
||||
width="140px"
|
||||
height="48px"
|
||||
isDisabled />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import Button from '@/components/common/Button.vue';
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
Button,
|
||||
}
|
||||
})
|
||||
export default class AccountPaymentMethods extends Vue {}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.payment-methods-container {
|
||||
margin-top: 83px;
|
||||
|
||||
&__card-container {
|
||||
width: calc(100% - 80px);
|
||||
margin-top: 37px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 50px 40px 50px 40px;
|
||||
background-color: white;
|
||||
border-radius: 6px;
|
||||
|
||||
&__info-area {
|
||||
width: 75%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
&__card-logo {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
&__info-container {
|
||||
|
||||
h1 {
|
||||
font-family: 'font_bold';
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: #61666B;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: 'font_regular';
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: #61666B;
|
||||
margin-block-start: 0.5em;
|
||||
margin-block-end: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&__expire-container {
|
||||
|
||||
h1 {
|
||||
font-family: 'font_bold';
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: #61666B;
|
||||
margin-block-start: 0.5em;
|
||||
margin-block-end: 0.5em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: 'font_regular';
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: #61666B;
|
||||
}
|
||||
}
|
||||
|
||||
&__added-text {
|
||||
font-family: 'font_regular';
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: #61666B;
|
||||
}
|
||||
}
|
||||
|
||||
&__default-button {
|
||||
width: 100px;
|
||||
height: 34px;
|
||||
border-radius: 6px;
|
||||
background-color: #F5F6FA;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&__label {
|
||||
font-family: 'font_medium';
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
color: #AFB7C1;
|
||||
}
|
||||
}
|
||||
|
||||
&__button-area {
|
||||
width: 20%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&__make-button {
|
||||
width: 134px;
|
||||
height: 34px;
|
||||
border-radius: 6px;
|
||||
background-color: #DFEDFF;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
&__label {
|
||||
font-family: 'font_medium';
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
color: #2683FF;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__add-button {
|
||||
margin-top: 35px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
310
web/satellite/src/components/account/Profile.vue
Normal file
310
web/satellite/src/components/account/Profile.vue
Normal file
@ -0,0 +1,310 @@
|
||||
// Copyright (C) 2019 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div class="profile-container">
|
||||
<div class="profile-container__edit-profile no-margin" >
|
||||
<div class="profile-container__edit-profile__row">
|
||||
<div class="profile-container__edit-profile__avatar">
|
||||
<h1>{{avatarLetter}}</h1>
|
||||
</div>
|
||||
<div class="profile-container__edit-profile__text">
|
||||
<h2>Edit Profile</h2>
|
||||
<h3>This information will be visible to all users</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div title="Edit">
|
||||
<svg class="editsvg" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" v-on:click="toggleEditProfilePopup">
|
||||
<rect width="40" height="40" rx="4" fill="#E2ECF7"/>
|
||||
<path d="M19.0901 21.4605C19.3416 21.7259 19.6695 21.8576 19.9995 21.8576C20.3295 21.8576 20.6574 21.7259 20.9089 21.4605L28.6228 13.3181C29.1257 12.7871 29.1257 11.9291 28.6228 11.3982C28.1198 10.8673 27.3069 10.8673 26.8039 11.3982L19.0901 19.5406C18.5891 20.0715 18.5891 20.9295 19.0901 21.4605ZM27.7134 19.1435C27.0031 19.1435 26.4277 19.7509 26.4277 20.5005V27.2859H13.5713V13.7152H19.9995C20.7097 13.7152 21.2851 13.1078 21.2851 12.3581C21.2851 11.6085 20.7097 11.0011 19.9995 11.0011H13.5713C12.1508 11.0011 11 12.2158 11 13.7152V27.2859C11 28.7852 12.1508 30 13.5713 30H26.4277C27.8482 30 28.999 28.7852 28.999 27.2859V20.5005C28.999 19.7509 28.4236 19.1435 27.7134 19.1435Z" fill="#2683FF"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile-container__secondary-container">
|
||||
<div class="profile-container__secondary-container__change-password">
|
||||
<div class="profile-container__edit-profile__row">
|
||||
<svg class="profile-container__secondary-container__img" width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M30 60C46.5685 60 60 46.5685 60 30C60 13.4315 46.5685 0 30 0C13.4315 0 0 13.4315 0 30C0 46.5685 13.4315 60 30 60Z" fill="#E8EAF2"/>
|
||||
<path d="M29.5001 34.5196C30.1001 34.5196 30.5865 34.0452 30.5865 33.46C30.5865 32.8748 30.1001 32.4004 29.5001 32.4004C28.9 32.4004 28.4136 32.8748 28.4136 33.46C28.4136 34.0452 28.9 34.5196 29.5001 34.5196Z" fill="#354049"/>
|
||||
<path d="M39.9405 40.2152C40.1781 40 40.3139 39.6854 40.3139 39.3709V25.5464C40.3139 24.9007 39.7707 24.3709 39.1086 24.3709H35.7473V21.0927C35.7473 17.7318 32.9462 15 29.5 15C26.0538 15 23.2527 17.7318 23.2527 21.0927V24.3709H19.8914C19.2293 24.3709 18.686 24.9007 18.686 25.5464V39.3709C18.686 39.6854 18.8218 40 19.0595 40.2152L23.7959 44.6689C24.0166 44.8841 24.3222 45 24.6278 45H34.3552C34.6608 45 34.9664 44.8841 35.1871 44.6689L39.9405 40.2152ZM30.7053 36.6391V38.1291C30.7053 38.7748 30.1621 39.3046 29.5 39.3046C28.8379 39.3046 28.2947 38.7748 28.2947 38.1291V36.6391C26.9705 36.1589 26.0198 34.9172 26.0198 33.4437C26.0198 31.5728 27.5817 30.0497 29.5 30.0497C31.4183 30.0497 32.9801 31.5728 32.9801 33.4437C32.9801 34.9172 32.0295 36.1589 30.7053 36.6391ZM33.3367 24.3709H25.6464V21.0927C25.6464 19.0232 27.3779 17.351 29.483 17.351C31.5881 17.351 33.3197 19.0397 33.3197 21.0927V24.3709H33.3367Z" fill="#354049"/>
|
||||
</svg>
|
||||
<div class="profile-container__secondary-container__change-password__text-container">
|
||||
<h2>Change Password</h2>
|
||||
<h3>6 or more characters</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div title="Edit">
|
||||
<svg class="edit-svg" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" v-on:click="toggleChangePasswordPopup">
|
||||
<rect width="40" height="40" rx="4" fill="#E2ECF7"/>
|
||||
<path d="M19.0901 21.4605C19.3416 21.7259 19.6695 21.8576 19.9995 21.8576C20.3295 21.8576 20.6574 21.7259 20.9089 21.4605L28.6228 13.3181C29.1257 12.7871 29.1257 11.9291 28.6228 11.3982C28.1198 10.8673 27.3069 10.8673 26.8039 11.3982L19.0901 19.5406C18.5891 20.0715 18.5891 20.9295 19.0901 21.4605ZM27.7134 19.1435C27.0031 19.1435 26.4277 19.7509 26.4277 20.5005V27.2859H13.5713V13.7152H19.9995C20.7097 13.7152 21.2851 13.1078 21.2851 12.3581C21.2851 11.6085 20.7097 11.0011 19.9995 11.0011H13.5713C12.1508 11.0011 11 12.2158 11 13.7152V27.2859C11 28.7852 12.1508 30 13.5713 30H26.4277C27.8482 30 28.999 28.7852 28.999 27.2859V20.5005C28.999 19.7509 28.4236 19.1435 27.7134 19.1435Z" fill="#2683FF"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile-container__secondary-container__email-container">
|
||||
<div class="profile-container__edit-profile__row">
|
||||
<svg class="profile-container__secondary-container__img" width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M30 60C46.5685 60 60 46.5685 60 30C60 13.4315 46.5685 0 30 0C13.4315 0 0 13.4315 0 30C0 46.5685 13.4315 60 30 60Z" fill="#E8EAF2"/>
|
||||
<path d="M29.9998 16.7598C25.7965 16.7641 21.8459 18.7646 19.3534 22.1498C16.8607 25.535 16.1236 29.9013 17.3671 33.9162C18.6096 37.9314 21.6853 41.1186 25.6546 42.5032C29.6238 43.8868 34.014 43.305 37.4846 40.9348L35.9861 38.7538C33.3633 40.552 30.0711 41.0781 27.0174 40.1856C23.9649 39.2931 21.4732 37.077 20.2319 34.1482C18.9905 31.2203 19.1294 27.8888 20.6104 25.0734C22.0924 22.2591 24.7588 20.2577 27.8761 19.6232C30.9922 18.9878 34.2296 19.7862 36.6938 21.7976C39.1581 23.809 40.5898 26.8202 40.592 30.0007V31.0365C40.592 32.8762 39.8001 33.9732 38.4723 33.9732V33.995L38.4734 33.9961C38.3892 33.9819 38.305 33.9743 38.2208 33.9743H37.9408C37.1959 33.9743 36.0868 32.8903 36.0868 32.1597V30.0007C36.0989 28.1019 35.2293 26.3038 33.7331 25.1345C32.2358 23.9653 30.2824 23.5563 28.4417 24.0277C26.602 24.498 25.085 25.7963 24.3335 27.5408C23.5832 29.2854 23.6838 31.2794 24.6069 32.9395C25.529 34.5987 27.1696 35.7373 29.0475 36.0206C30.9254 36.3039 32.8286 35.6991 34.2 34.3855C35.0597 35.6542 36.521 36.6255 37.9386 36.6255V36.6025C38.0228 36.6178 38.1092 36.6255 38.1956 36.6255H38.4756C41.326 36.6255 43.2356 34.3855 43.2356 31.042V30.0007C43.2312 26.4909 41.8356 23.1265 39.3551 20.6448C36.8734 18.1631 33.5101 16.7654 30.0003 16.7598L29.9998 16.7598ZM29.9998 33.4416C28.6075 33.4416 27.353 32.6038 26.8204 31.3176C26.2878 30.0313 26.582 28.5515 27.5664 27.567C28.5508 26.5824 30.0306 26.2884 31.317 26.821C32.6032 27.3537 33.441 28.6082 33.441 30.0004C33.441 31.9014 31.901 33.4413 30.0001 33.4413L29.9998 33.4416Z" fill="#354049"/>
|
||||
</svg>
|
||||
<div class="profile-container__secondary-container__email-container__text-container">
|
||||
<h2>{{user.email}}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile-container__button-area">
|
||||
<Button
|
||||
class="profile-container__button-area__delete-button"
|
||||
label="Delete account"
|
||||
width="210px"
|
||||
height="56px"
|
||||
:onPress="toggleDeleteAccountPopup"
|
||||
isDeletion/>
|
||||
</div>
|
||||
<ChangePasswordPopup v-if="isChangePasswordPopupShown"/>
|
||||
<EditProfilePopup v-if="isEditProfilePopupShown"/>
|
||||
<DeleteAccountPopup v-if="isDeleteAccountPopupShown" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import Button from '@/components/common/Button.vue';
|
||||
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
|
||||
import DeleteAccountPopup from '@/components/account/DeleteAccountPopup.vue';
|
||||
import ChangePasswordPopup from '@/components/account/ChangePasswordPopup.vue';
|
||||
import EditProfilePopup from '@/components/account/EditProfilePopup.vue';
|
||||
|
||||
@Component(
|
||||
{
|
||||
methods: {
|
||||
toggleDeleteAccountPopup: function(): void {
|
||||
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_DEL_ACCOUNT);
|
||||
},
|
||||
toggleChangePasswordPopup: function(): void {
|
||||
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_CHANGE_PASSWORD_POPUP);
|
||||
},
|
||||
toggleEditProfilePopup: function(): void {
|
||||
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_EDIT_PROFILE_POPUP);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
user: function() {
|
||||
return {
|
||||
fullName: this.$store.getters.user.fullName,
|
||||
shortName: this.$store.getters.user.shortName,
|
||||
email: this.$store.getters.user.email,
|
||||
};
|
||||
},
|
||||
isEditProfilePopupShown: function () {
|
||||
return this.$store.state.appStateModule.appState.isEditProfilePopupShown;
|
||||
},
|
||||
isChangePasswordPopupShown: function () {
|
||||
return this.$store.state.appStateModule.appState.isChangePasswordPopupShown;
|
||||
},
|
||||
isDeleteAccountPopupShown: function () {
|
||||
return this.$store.state.appStateModule.appState.isDeleteAccountPopupShown;
|
||||
},
|
||||
avatarLetter: function (): string {
|
||||
return this.$store.getters.userName.slice(0, 1).toUpperCase();
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Button,
|
||||
DeleteAccountPopup,
|
||||
ChangePasswordPopup,
|
||||
EditProfilePopup,
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
export default class Profile extends Vue {
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.profile-container {
|
||||
position: relative;
|
||||
margin-top: 83px;
|
||||
|
||||
&__navigation {
|
||||
position: absolute;
|
||||
right: 55px;
|
||||
top: 44px;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'font_bold';
|
||||
font-size: 24px;
|
||||
line-height: 29px;
|
||||
color: #354049;
|
||||
margin-block-start: 0.5em;
|
||||
margin-block-end: 0.5em;
|
||||
}
|
||||
h2 {
|
||||
@extend h1;
|
||||
font-size: 18px;
|
||||
line-height: 27px;
|
||||
word-break: break-all;
|
||||
}
|
||||
h3 {
|
||||
@extend h2;
|
||||
font-family: 'font_regular';
|
||||
color: #AFB7C1;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
&__edit-profile {
|
||||
height: 66px;
|
||||
width: calc(100% - 80px);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 37px 40px;
|
||||
margin-top: 40px;
|
||||
background-color: #fff;
|
||||
|
||||
&__row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #E8EAF2;
|
||||
margin-right: 32px;
|
||||
|
||||
h1 {
|
||||
font-family: 'font_medium';
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
color: #354049;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__secondary-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 40px;
|
||||
|
||||
&__change-password {
|
||||
height: 66px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 37px 40px;
|
||||
background-color: #fff;
|
||||
width: calc(48% - 80px);
|
||||
|
||||
&__text-container {
|
||||
margin-left: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&__email-container {
|
||||
height: 66px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 37px 40px;
|
||||
background-color: #fff;
|
||||
width: calc(48% - 80px);
|
||||
|
||||
&__text-container {
|
||||
margin-left: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&__img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
&__button-area {
|
||||
margin-top: 40px;
|
||||
width: 100%;
|
||||
align-self: flex-start;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
.no-margin {
|
||||
margin-top: 0;
|
||||
}
|
||||
.edit-svg {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
rect {
|
||||
fill: #2683FF !important;
|
||||
}
|
||||
path {
|
||||
fill: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input-container.full-input,
|
||||
.input-wrap.full-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px) {
|
||||
.profile-container {
|
||||
&__secondary-container {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
&__change-password {
|
||||
width: calc(100% - 80px);
|
||||
}
|
||||
|
||||
&__email-container {
|
||||
margin-top: 40px;
|
||||
width: calc(100% - 80px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 850px) {
|
||||
.profile-container {
|
||||
height: 650px;
|
||||
overflow-y: scroll;
|
||||
margin-top: 70px;
|
||||
|
||||
&__secondary-container {
|
||||
margin-top: 20px;
|
||||
|
||||
&__email-container {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&__button-area {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
96
web/satellite/src/components/account/billing/BillingArea.vue
Normal file
96
web/satellite/src/components/account/billing/BillingArea.vue
Normal file
@ -0,0 +1,96 @@
|
||||
// Copyright (C) 2018 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="billing > 0" class="billing-overflow">
|
||||
<div class="billing-container">
|
||||
<table class="billing-container__table">
|
||||
<SortingHeader />
|
||||
<BillingItem />
|
||||
</table>
|
||||
<PaginationArea />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import EmptyState from '@/components/common/EmptyStateArea.vue';
|
||||
import BillingItem from '@/components/account/billing/BillingItem.vue';
|
||||
import PaginationArea from '@/components/account/billing/PaginationArea.vue';
|
||||
import SortingHeader from '@/components/account/billing/SortingHeader.vue';
|
||||
|
||||
@Component({
|
||||
data: function () {
|
||||
return {
|
||||
billing: 1,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
EmptyState,
|
||||
SortingHeader,
|
||||
BillingItem,
|
||||
PaginationArea,
|
||||
}
|
||||
})
|
||||
export default class BillingArea extends Vue {}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.billing-container {
|
||||
margin-top: 83px;
|
||||
|
||||
&__table {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 90px 0 40px;
|
||||
|
||||
&:last-child {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 860px) {
|
||||
.billing-overflow {
|
||||
overflow-y: scroll;
|
||||
height: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 835px) {
|
||||
.billing-overflow {
|
||||
overflow-y: scroll;
|
||||
height: 660px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 815px) {
|
||||
.billing-overflow {
|
||||
overflow-y: scroll;
|
||||
height: 660px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 795px) {
|
||||
.billing-overflow {
|
||||
overflow-y: scroll;
|
||||
height: 640px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 780px) {
|
||||
.billing-overflow {
|
||||
overflow-y: scroll;
|
||||
height: 620px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
116
web/satellite/src/components/account/billing/BillingItem.vue
Normal file
116
web/satellite/src/components/account/billing/BillingItem.vue
Normal file
@ -0,0 +1,116 @@
|
||||
// Copyright (C) 2018 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<tr class="container">
|
||||
<td class="container__item bold">test</td>
|
||||
<td class="container__item">test</td>
|
||||
<td class="container__item">test</td>
|
||||
<td class="container__item">
|
||||
<div class="row justify-start">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20 7.26316V3.87134C20 3.40351 19.7938 2.93567 19.4845 2.5848C19.1753 2.23392 18.7629 2 18.3505 2H1.64948C1.23711 2 0.824742 2.23392 0.515464 2.5848C0.206186 2.93567 0 3.40351 0 3.87134V7.26316H20Z" fill="#2683FF"/>
|
||||
<path d="M0 9.36816V16.1852C0 16.5862 0.206186 16.9872 0.515464 17.288C0.824742 17.5887 1.23711 17.7892 1.64948 17.7892H18.3505C18.7629 17.7892 19.1753 17.5887 19.4845 17.288C19.7938 16.9872 20 16.5862 20 16.1852V9.36816H0ZM5.36083 15.1827H2.68041V13.8794H5.36083V15.1827ZM10.7217 15.1827H6.70103V13.8794H10.7217V15.1827Z" fill="#2683FF"/>
|
||||
</svg>
|
||||
<p>test</p>
|
||||
</div>
|
||||
</td>
|
||||
<td class="container__item bold">
|
||||
<div class="row justify-start">
|
||||
<p>test</p>
|
||||
</div>
|
||||
</td>
|
||||
<td class="container__item">
|
||||
<div class="row">
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect class="background" width="40" height="40" rx="4" fill="#E2ECF7"/>
|
||||
<path class="blue" d="M25.6491 19.2809L21.2192 23.5281C20.891 23.8427 20.3988 24 20.0707 24C19.7425 24 19.2503 23.8427 19.0862 23.5281L14.4922 19.2809C13.8359 18.6517 13.8359 17.8652 14.4922 17.236C14.8204 16.9213 15.1485 16.9213 15.6407 16.9213C15.9689 16.9213 16.4611 17.0787 16.6252 17.3933L18.594 19.1236L18.594 11.4157C18.594 10.6292 19.2503 10 20.0707 10C20.891 10 21.5473 10.6292 21.5473 11.4157L21.5473 19.1236L23.5162 17.236C23.6803 16.9213 24.1725 16.9213 24.5006 16.9213C24.8288 16.9213 25.321 17.0787 25.4851 17.3933C26.1414 17.8652 26.1414 18.809 25.6491 19.2809Z" fill="#2683FF"/>
|
||||
<rect class="blue" x="11" y="28" width="18" height="2" rx="1" fill="#2683FF"/>
|
||||
</svg>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
@Component({})
|
||||
|
||||
export default class BillingItem extends Vue {}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding: 35px 0px 35px 70px;
|
||||
transition: all .2s ease;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 6px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
outline: none;
|
||||
|
||||
&:hover {
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 4px rgba(231, 232, 238, 0.6);
|
||||
}
|
||||
|
||||
&__item {
|
||||
width: 19%;
|
||||
height: 80px;
|
||||
padding-left: 30px;
|
||||
font-family: 'font_medium';
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
|
||||
svg {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
svg:hover {
|
||||
.background {
|
||||
fill: #2683FF !important;
|
||||
}
|
||||
.blue {
|
||||
fill: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-right: 36px;
|
||||
}
|
||||
|
||||
.justify-start {
|
||||
justify-content: flex-start;
|
||||
|
||||
svg {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-left: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-family: 'font_bold';
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
.container {
|
||||
grid-template-columns: 2% 20% 30% 20% 15% 13%;
|
||||
padding: 20px 0px 20px 70px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
113
web/satellite/src/components/account/billing/PaginationArea.vue
Normal file
113
web/satellite/src/components/account/billing/PaginationArea.vue
Normal file
@ -0,0 +1,113 @@
|
||||
// Copyright (C) 2018 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div class="pagination-container">
|
||||
<div class="pagination-container__pages">
|
||||
<div v-html="arrowLeft" class="pagination-container__button"></div>
|
||||
<div class="pagination-container__items">
|
||||
<span class="selected">1</span>
|
||||
<span>2</span>
|
||||
</div>
|
||||
<div v-html="arrowRight" class="pagination-container__button"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import { EMPTY_STATE_IMAGES } from '@/utils/constants/emptyStatesImages';
|
||||
|
||||
@Component({
|
||||
data: function() {
|
||||
return {
|
||||
arrowLeft: EMPTY_STATE_IMAGES.ARROW_LEFT,
|
||||
arrowRight: EMPTY_STATE_IMAGES.ARROW_RIGHT,
|
||||
};
|
||||
},
|
||||
})
|
||||
|
||||
export default class PaginationArea extends Vue {}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-left: 25px;
|
||||
margin-top: 25px;
|
||||
&__pages {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
&__counter {
|
||||
|
||||
p {
|
||||
font-family: 'font_medium';
|
||||
font-size: 16px;
|
||||
color: #AFB7C1;
|
||||
}
|
||||
}
|
||||
&__button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border: 1px solid #AFB7C1;
|
||||
border-radius: 6px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
&:hover {
|
||||
svg {
|
||||
path {
|
||||
fill: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&__items {
|
||||
margin: 0 20px;
|
||||
display: flex;
|
||||
.selected {
|
||||
color: #2379EC;
|
||||
font-family: 'font_bold';
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
background-color: #2379EC;
|
||||
}
|
||||
}
|
||||
span {
|
||||
font-family: 'font_medium';
|
||||
font-size: 16px;
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
position: relative;
|
||||
transition: all .2s ease;
|
||||
&:hover {
|
||||
color: #2379EC;
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #2379EC;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
114
web/satellite/src/components/account/billing/SortingHeader.vue
Normal file
114
web/satellite/src/components/account/billing/SortingHeader.vue
Normal file
@ -0,0 +1,114 @@
|
||||
// Copyright (C) 2019 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<tr class="sort-header-container">
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>ID</p>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Date</p>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Project Name</p>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Payment method</p>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Amount</p>
|
||||
<div class="sort-header-container__item__arrows">
|
||||
<span v-html="arrowUp"></span>
|
||||
<span v-html="arrowDown"></span>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item no-padding">
|
||||
<div class="row center">
|
||||
<p>Receipt</p>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import { EMPTY_STATE_IMAGES } from '@/utils/constants/emptyStatesImages';
|
||||
@Component({
|
||||
data: function() {
|
||||
return {
|
||||
arrowUp: EMPTY_STATE_IMAGES.ARROW_UP,
|
||||
arrowDown: EMPTY_STATE_IMAGES.ARROW_DOWN,
|
||||
};
|
||||
}
|
||||
})
|
||||
export default class SortAccountBillingHeader extends Vue {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.sort-header-container {
|
||||
height: 80px;
|
||||
|
||||
&__item {
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
padding-left: 30px;
|
||||
&__arrows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
padding-bottom: 12px;
|
||||
margin-left: 10px;
|
||||
span.selected {
|
||||
|
||||
svg {
|
||||
path {
|
||||
fill: #2683FF !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-family: 'font_medium';
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
color: #AFB7C1;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.no-padding {
|
||||
padding: 0;
|
||||
}
|
||||
.center {
|
||||
justify-content: center;
|
||||
}
|
||||
@media screen and (max-width: 1600px) {
|
||||
.sort-header-container {
|
||||
grid-template-columns: 25% 28% 19% 15% 14%;
|
||||
height: 65px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -59,7 +59,7 @@ import { APP_STATE_ACTIONS, PROJETS_ACTIONS, PM_ACTIONS, USER_ACTIONS, API_KEYS_
|
||||
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACCOUNT);
|
||||
},
|
||||
onAccountSettingsClick: function (): void {
|
||||
this.$router.push('/account-settings');
|
||||
this.$router.push(ROUTES.ACCOUNT_SETTINGS.path + '/' + ROUTES.PROFILE.path);
|
||||
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACCOUNT);
|
||||
},
|
||||
onLogoutClick: function () {
|
||||
|
||||
@ -37,6 +37,7 @@ export default class DashboardHeader extends Vue {
|
||||
.header-container {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
min-height: 100px;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div class="project-navigation-container">
|
||||
<router-link :to="navLink.path" class="project-navigation-container__item" v-for="navLink in navigation" :key="navLink.name">
|
||||
<div class="tab-navigation-container">
|
||||
<router-link :to="navLink.path" class="tab-navigation-container__item" v-for="navLink in navigation" :key="navLink.name">
|
||||
<p>{{navLink.name}}</p>
|
||||
</router-link>
|
||||
</div>
|
||||
@ -11,23 +11,23 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import { PROJECT_ROUTES } from '@/utils/constants/projectNavigation';
|
||||
|
||||
@Component(
|
||||
{
|
||||
data: function() {
|
||||
return {
|
||||
navigation: PROJECT_ROUTES,
|
||||
};
|
||||
props: {
|
||||
navigation: {
|
||||
type: Object,
|
||||
default: {},
|
||||
}
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
export default class ProjectNavigation extends Vue {}
|
||||
export default class TabNavigation extends Vue {}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.project-navigation-container {
|
||||
.tab-navigation-container {
|
||||
width: auto;
|
||||
display: flex;
|
||||
|
||||
@ -55,7 +55,6 @@
|
||||
import { PROJETS_ACTIONS, APP_STATE_ACTIONS, NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
|
||||
import ROUTES from '@/utils/constants/routerConstants';
|
||||
import DeleteProjectPopup from '@/components/project/DeleteProjectPopup.vue';
|
||||
import ProjectNavigation from '@/components/project/ProjectNavigation.vue';
|
||||
|
||||
@Component(
|
||||
{
|
||||
@ -117,7 +116,6 @@
|
||||
Checkbox,
|
||||
EmptyState,
|
||||
DeleteProjectPopup,
|
||||
ProjectNavigation,
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
@ -3,7 +3,10 @@
|
||||
|
||||
<template>
|
||||
<div class="project-overview">
|
||||
<ProjectNavigation class="project-overview__navigation" v-if="isProjectSelected"/>
|
||||
<TabNavigation
|
||||
v-if="isProjectSelected"
|
||||
class="project-overview__navigation"
|
||||
:navigation="navigation"/>
|
||||
<router-view v-if="isProjectSelected"/>
|
||||
<EmptyState
|
||||
v-if="!isProjectSelected"
|
||||
@ -16,14 +19,16 @@
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import EmptyState from '@/components/common/EmptyStateArea.vue';
|
||||
import ProjectNavigation from '@/components/project/ProjectNavigation.vue';
|
||||
import TabNavigation from '@/components/navigation/TabNavigation.vue';
|
||||
import { EMPTY_STATE_IMAGES } from '@/utils/constants/emptyStatesImages';
|
||||
import { PROJECT_ROUTES } from '@/utils/constants/tabNavigation';
|
||||
|
||||
@Component(
|
||||
{
|
||||
data: function () {
|
||||
return {
|
||||
emptyImage: EMPTY_STATE_IMAGES.PROJECT,
|
||||
navigation: PROJECT_ROUTES,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -31,9 +36,12 @@ import { EMPTY_STATE_IMAGES } from '@/utils/constants/emptyStatesImages';
|
||||
return this.$store.getters.selectedProject.id !== '';
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$router.push(PROJECT_ROUTES.DETAILS.path);
|
||||
},
|
||||
components: {
|
||||
EmptyState,
|
||||
ProjectNavigation,
|
||||
TabNavigation,
|
||||
}
|
||||
}
|
||||
)
|
||||
@ -53,7 +61,7 @@ export default class ProjectDetailsArea extends Vue {
|
||||
position: absolute;
|
||||
right: 55px;
|
||||
top: 44px;
|
||||
z-index: 1000;
|
||||
z-index: 99;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
Button,
|
||||
}
|
||||
})
|
||||
export default class PaymentMethods extends Vue {}
|
||||
export default class ProjectPaymentMethods extends Vue {}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -75,8 +75,6 @@ import { toUnixTimestamp } from '@/utils/time';
|
||||
components: {
|
||||
Datepicker,
|
||||
},
|
||||
beforeMount: function() {
|
||||
},
|
||||
beforeRouteLeave: function(to, from, next) {
|
||||
this.$store.dispatch(PROJECT_USAGE_ACTIONS.FETCH_CURRENT_ROLLUP, this.$data.dateRange);
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<div class="billing-container">
|
||||
<table class="billing-container__table">
|
||||
<SortingHeader />
|
||||
<BucketItem />
|
||||
<BillingItem />
|
||||
</table>
|
||||
<PaginationArea />
|
||||
</div>
|
||||
@ -21,7 +21,7 @@
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import EmptyState from '@/components/common/EmptyStateArea.vue';
|
||||
import BucketItem from '@/components/project/billing/BillingItem.vue';
|
||||
import BillingItem from '@/components/project/billing/BillingItem.vue';
|
||||
import PaginationArea from '@/components/project/billing/PaginationArea.vue';
|
||||
import SortingHeader from '@/components/project/billing/SortingHeader.vue';
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
components: {
|
||||
EmptyState,
|
||||
SortingHeader,
|
||||
BucketItem,
|
||||
BillingItem,
|
||||
PaginationArea,
|
||||
}
|
||||
})
|
||||
|
||||
@ -2,16 +2,14 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="pagination-container">
|
||||
<div class="pagination-container__pages">
|
||||
<div v-html="arrowLeft" class="pagination-container__button"></div>
|
||||
<div class="pagination-container__items">
|
||||
<span class="selected">1</span>
|
||||
<span>2</span>
|
||||
</div>
|
||||
<div v-html="arrowRight" class="pagination-container__button"></div>
|
||||
<div class="pagination-container">
|
||||
<div class="pagination-container__pages">
|
||||
<div v-html="arrowLeft" class="pagination-container__button"></div>
|
||||
<div class="pagination-container__items">
|
||||
<span class="selected">1</span>
|
||||
<span>2</span>
|
||||
</div>
|
||||
<div v-html="arrowRight" class="pagination-container__button"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
};
|
||||
}
|
||||
})
|
||||
export default class SortBucketsHeader extends Vue {
|
||||
export default class SortProjectBillingHeader extends Vue {
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -9,14 +9,17 @@ import Register from '@/views/register/Register.vue';
|
||||
import ForgotPassword from '@/views/forgotPassword/ForgotPassword.vue';
|
||||
import Dashboard from '@/views/Dashboard.vue';
|
||||
import AccountArea from '@/components/account/AccountArea.vue';
|
||||
import Profile from '@/components/account/Profile.vue';
|
||||
import AccountBillingHistory from '@/components/account/billing/BillingArea.vue';
|
||||
import AccountPaymentMethods from '@/components/account/AccountPaymentMethods.vue';
|
||||
import ProjectOverviewArea from '@/components/project/ProjectOverviewArea.vue';
|
||||
import TeamArea from '@/components/team/TeamArea.vue';
|
||||
import Page404 from '@/components/errors/Page404.vue';
|
||||
import ApiKeysArea from '@/components/apiKeys/ApiKeysArea.vue';
|
||||
import UsageReport from '@/components/project/UsageReport.vue';
|
||||
import ProjectDetails from '@/components/project/ProjectDetails.vue';
|
||||
import BillingHistory from '@/components/project/billing/BillingArea.vue';
|
||||
import PaymentMethods from '@/components/project/PaymentMethods.vue';
|
||||
import ProjectBillingHistory from '@/components/project/billing/BillingArea.vue';
|
||||
import ProjectPaymentMethods from '@/components/project/ProjectPaymentMethods.vue';
|
||||
import BucketArea from '@/components/buckets/BucketArea.vue';
|
||||
import { getToken } from '@/utils/tokenManager';
|
||||
import store from '@/store';
|
||||
@ -51,7 +54,24 @@ let router = new Router({
|
||||
{
|
||||
path: ROUTES.ACCOUNT_SETTINGS.path,
|
||||
name: ROUTES.ACCOUNT_SETTINGS.name,
|
||||
component: AccountArea
|
||||
component: AccountArea,
|
||||
children: [
|
||||
{
|
||||
path: ROUTES.PROFILE.path,
|
||||
name: ROUTES.PROFILE.name,
|
||||
component: Profile,
|
||||
},
|
||||
{
|
||||
path: ROUTES.PAYMENT_METHODS.path,
|
||||
name: ROUTES.PAYMENT_METHODS.name,
|
||||
component: AccountPaymentMethods,
|
||||
},
|
||||
{
|
||||
path: ROUTES.BILLING_HISTORY.path,
|
||||
name: ROUTES.BILLING_HISTORY.name,
|
||||
component: AccountBillingHistory,
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
path: ROUTES.PROJECT_OVERVIEW.path,
|
||||
@ -63,11 +83,6 @@ let router = new Router({
|
||||
name: ROUTES.USAGE_REPORT.name,
|
||||
component: UsageReport,
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
name: ROUTES.PROJECT_DETAILS.name,
|
||||
component: ProjectDetails
|
||||
},
|
||||
{
|
||||
path: ROUTES.PROJECT_DETAILS.path,
|
||||
name: ROUTES.PROJECT_DETAILS.name,
|
||||
@ -76,12 +91,12 @@ let router = new Router({
|
||||
{
|
||||
path: ROUTES.BILLING_HISTORY.path,
|
||||
name: ROUTES.BILLING_HISTORY.name,
|
||||
component: BillingHistory
|
||||
component: ProjectBillingHistory
|
||||
},
|
||||
{
|
||||
path: ROUTES.PAYMENT_METHODS.path,
|
||||
name: ROUTES.PAYMENT_METHODS.name,
|
||||
component: PaymentMethods
|
||||
component: ProjectPaymentMethods
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
@ -19,8 +19,8 @@ const ROUTES = {
|
||||
name: 'Dashboard'
|
||||
},
|
||||
ACCOUNT_SETTINGS: {
|
||||
path: '/account-settings',
|
||||
name: 'AccountSettings'
|
||||
path: '/account',
|
||||
name: 'Account'
|
||||
},
|
||||
PROJECT_OVERVIEW: {
|
||||
path: '/project-overview',
|
||||
@ -48,12 +48,16 @@ const ROUTES = {
|
||||
},
|
||||
PAYMENT_METHODS: {
|
||||
path: 'payment-methods',
|
||||
name: 'PaymentMethods'
|
||||
name: 'ProjectPaymentMethods.vue'
|
||||
},
|
||||
BUCKETS: {
|
||||
path: '/buckets',
|
||||
name: 'Buckets'
|
||||
},
|
||||
PROFILE: {
|
||||
path: 'profile',
|
||||
name: 'Profile'
|
||||
}
|
||||
};
|
||||
|
||||
export default ROUTES;
|
||||
|
||||
@ -19,3 +19,18 @@ export const PROJECT_ROUTES = {
|
||||
name: 'Report'
|
||||
},
|
||||
};
|
||||
|
||||
export const ACCOUNT_ROUTES = {
|
||||
PROFILE: {
|
||||
path: '/account/profile',
|
||||
name: 'Profile'
|
||||
},
|
||||
PAYMENT_METHODS: {
|
||||
path: '/account/payment-methods',
|
||||
name: 'Payment Methods'
|
||||
},
|
||||
BILLING_HISTORY: {
|
||||
path: '/account/billing-history',
|
||||
name: 'Billing History'
|
||||
},
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user