Skip to content

Commit

Permalink
feat: implement account settings view
Browse files Browse the repository at this point in the history
  • Loading branch information
@valeriansaliou
valeriansaliou committed Oct 16, 2024
1 parent e6f8eaa commit 0f00858
Show file tree
Hide file tree
Showing 4 changed files with 221 additions and 26 deletions.
1 change: 1 addition & 0 deletions ...ges/components/section/cloud/SectionCloudAccountSettingsForm/navigate-arrow.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 5 additions & 19 deletions src/components/partial/cloud/PartialCloudSignupFormFieldsetActivate.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,12 +88,11 @@
autofocus
submittable
)
span.c-partial-cloud-signup-form-fieldset-activate__input-preview
base-payment-icon(
:provider="cardBrand"
height="21px"
class="c-partial-cloud-signup-form-fieldset-activate__input-preview-brand"
)
base-payment-preview(
:provider="cardBrand"
class="c-partial-cloud-signup-form-fieldset-activate__input-preview"
animated
)

.c-partial-cloud-signup-form-fieldset-activate__nest.c-partial-cloud-signup-form-fieldset-activate__nest--name-and-cvv
form-labelled-field(
Expand Down Expand Up @@ -373,23 +372,10 @@ $c: ".c-partial-cloud-signup-form-fieldset-activate";
}
#{$c}__input-preview {
background: $color-white;
border: 1px solid $color-border-secondary;
width: 40px;
height: 30px;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 14px;
transform: translateY(-50%);
border-radius: 7px;
#{$c}__input-preview-brand {
flex: 0 0 auto;
}
}
}
}
Expand Down
218 changes: 215 additions & 3 deletions src/components/section/cloud/SectionCloudAccountSettingsForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,122 @@
<template lang="pug">
.c-section-cloud-account-settings-form
page-wrapper
| TODO: settings form
.c-section-cloud-account-settings-form__inner
.c-section-cloud-account-settings-form__navigate
nuxt-link(
to="/cloud/account/workspaces/"
class="c-section-cloud-account-settings-form__navigate-link u-medium"
)
image-navigate-arrow(
class="c-section-cloud-account-settings-form__navigate-icon"
)

| Back to my workspaces

.c-section-cloud-account-settings-form__fields
form-labelled-field(
name="account_email"
label="Your email address"
class="c-section-cloud-account-settings-form__field"
)
.c-section-cloud-account-settings-form__field-sider
form-field(
v-model="form.email"
name="account_email"
type="email"
align="left"
tint="light"
size="mid-large"
placeholder="Enter an email…"
)

base-button(
tint="link"
)
| Edit Email

form-labelled-field(
name="account_password"
label="Change your password"
class="c-section-cloud-account-settings-form__field"
)
.c-section-cloud-account-settings-form__field-sider
form-field(
v-model="form.password"
name="account_password"
type="password"
align="left"
tint="light"
size="mid-large"
placeholder="Enter a new password…"
)

base-button(
tint="link"
)
| Edit Password

form-labelled-field(
name="billing_card"
label="Edit your payment method"
class="c-section-cloud-account-settings-form__field"
)
.c-section-cloud-account-settings-form__field-card
.c-section-cloud-account-settings-form__field-card-badge
base-payment-preview(
:provider="card.brand"
class="c-section-cloud-account-settings-form__field-card-badge-preview"
)

.c-section-cloud-account-settings-form__field-card-preview
p.c-section-cloud-account-settings-form__field-card-number.u-ellipsis.u-medium
| {{ card.numberPreview }}

p.c-section-cloud-account-settings-form__field-card-identity
span.u-ellipsis
| {{ card.nameOnCard }}

span.u-ellipsis
| Exp. {{ card.expireMonthYear }}

.c-section-cloud-account-settings-form__field-card-action
base-button(
tint="link"
)
| Edit Card
</template>

<!-- **********************************************************************
SCRIPT
********************************************************************** -->

<script>
// PROJECT: IMAGES
import ImageNavigateArrow from "@/assets/images/components/section/cloud/SectionCloudAccountSettingsForm/navigate-arrow.svg?component";
export default {
name: "SectionCloudAccountSettingsForm"
name: "SectionCloudAccountSettingsForm",
components: { ImageNavigateArrow },
data() {
return {
// --> STATE <----
// TODO: those are fixtures
card: {
brand: "mastercard",
numberPreview: "5355 XXXX XXXX XXXX",
nameOnCard: "Valerian Saliou",
expireMonthYear: "05/28"
},
form: {
email: "",
password: ""
}
};
}
};
</script>

Expand All @@ -32,6 +138,112 @@ export default {
$c: ".c-section-cloud-account-settings-form";
#{$c} {
/* TODO */
#{$c}__inner {
max-width: 540px;
margin: 0 auto;
}
#{$c}__navigate {
margin-top: -20px;
#{$c}__navigate-link {
color: $color-base-black-mid;
font-size: 15px;
letter-spacing: 0.1px;
line-height: 22px;
display: inline-flex;
align-items: center;
#{$c}__navigate-icon {
height: 11px;
margin-right: 7px;
margin-bottom: -1px;
flex: 0 0 auto;
transition: transform 100ms linear;
}
&:hover {
#{$c}__navigate-icon {
transform: translateX(-2px);
}
}
&:active {
#{$c}__navigate-icon {
transform: translateX(1px);
}
}
}
}
#{$c}__fields {
margin-top: 50px;
> * {
margin-bottom: 34px;
&:last-child {
margin-bottom: 0;
}
}
#{$c}__field {
#{$c}__field-sider,
#{$c}__field-card {
display: flex;
align-items: center;
}
#{$c}__field-sider {
column-gap: 14px;
> * {
&:nth-child(1) {
flex: 1;
}
&:nth-child(2) {
min-width: 136px;
flex: 0 1 auto;
}
}
}
#{$c}__field-card {
border: 1px solid $color-border-secondary;
padding: 18px 16px;
border-radius: $form-field-border-radius;
#{$c}__field-card-badge {
margin-right: 22px;
flex: 0 0 auto;
}
#{$c}__field-card-preview {
flex: 1;
overflow: hidden;
}
#{$c}__field-card-number {
color: $color-base-black-mid;
font-size: 18px;
}
#{$c}__field-card-identity {
color: $color-base-grey-dark;
font-size: 15.5px;
margin-top: 10px;
display: flex;
align-items: center;
column-gap: 14px;
}
#{$c}__field-card-action {
margin-left: 14px;
flex: 0 1 auto;
}
}
}
}
}
</style>
4 changes: 0 additions & 4 deletions src/pages/cloud/account/workspaces.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,10 +71,6 @@ $c: ".p-cloud-account-workspaces";
flex: 1;
}
#{$c}__picker {
/* TODO */
}
#{$c}__navigator {
position: absolute;
left: 0;
Expand Down

0 comments on commit 0f00858

Please sign in to comment.