Skip to content

Commit 1e72c8a

Browse files
supalarrysupalarry
committed
account card
1 parent fea481d commit 1e72c8a

File tree

3 files changed

+124
-9
lines changed

3 files changed

+124
-9
lines changed

‎frontend/src/components/app/settings/AccountInput.vue‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<template>
2+
<!-- eslint-disable max-len -->
3+
<div class="w-full my-2">
4+
<ValidationObserver v-slot="{ handleSubmit, invalid }" class="w-full">
5+
<form @submit.prevent="handleSubmit(onSubmit)" class="w-full">
6+
<div class="flex justify-between items-center w-full">
7+
<h1 class="text-md font-bold capitalize text-gray-matcha">{{ name }}</h1>
8+
<input v-if="edit" type="submit" :disabled="invalid" value="Save"
9+
v-bind:class="{'text-lg': true,'text-purple-matcha': true, 'bg-transparent': true, 'focus:outline-none': true, 'active:outline-none': true, 'opacity-50': invalid, 'cursor-pointer': !invalid}">
10+
<h1 v-if="!edit" v-on:click="startEditing()" class="cursor-pointer text-md text-purple-matcha">{{ buttonText }}</h1>
11+
</div>
12+
<div v-if="!edit && type !== 'password'"><h1 class="text-md opacity-50">{{ currentValue }}</h1></div>
13+
<div v-if="edit">
14+
<ValidationProvider v-if="type === 'firstName'" name="First Name" rules="required|alpha|max:20" v-slot="{errors}">
15+
<input type="text" placeholder="First Name" v-model="currentValue" class="matcha-input max-w-xs">
16+
<span class="matcha-input-error">{{ errors[0] }}</span>
17+
</ValidationProvider>
18+
<ValidationProvider v-if="type === 'lastName'" name="Last Name" rules="required|alpha|max:20" v-slot="{errors}">
19+
<input type="text" placeholder="Last Name" v-model="currentValue" class="matcha-input max-w-xs">
20+
<span class="matcha-input-error">{{ errors[0] }}</span>
21+
</ValidationProvider>
22+
<ValidationProvider v-if="type === 'email'" name="Email" rules="required|email|max:50" v-slot="{errors}">
23+
<input type="email" placeholder="Email" v-model="currentValue" class="matcha-input max-w-xs">
24+
<span class="matcha-input-error">{{ errors[0] }}</span>
25+
</ValidationProvider>
26+
<ValidationProvider v-if="type === 'username'" name="Username" rules="required|alpha_dash|max:20" v-slot="{errors}">
27+
<input type="text" placeholder="Username" v-model="currentValue" class="matcha-input max-w-xs">
28+
<span class="matcha-input-error">{{ errors[0] }}</span>
29+
</ValidationProvider>
30+
<ValidationProvider v-if="type === 'password'" name="Password" rules="required|min:6|validPassword" v-slot="{errors}">
31+
<input type="password" placeholder="Password" v-model="currentValue" class="matcha-input max-w-xs">
32+
<span class="matcha-input-error">{{ passwordErrorHandler(errors[0]) }}</span>
33+
</ValidationProvider>
34+
</div>
35+
</form>
36+
</ValidationObserver>
37+
</div>
38+
</template>
39+
40+
<script>
41+
export default {
42+
props: ['name', 'type', 'currentValuePassed'],
43+
data: () => ({
44+
edit: false,
45+
currentValue: '',
46+
}),
47+
methods: {
48+
startEditing() {
49+
this.edit = true;
50+
},
51+
onSubmit() {
52+
this.edit = false;
53+
},
54+
passwordErrorHandler(error) {
55+
if (!error || error === 'The Password field is required') {
56+
return error;
57+
}
58+
return 'This password is too easy to guess';
59+
},
60+
},
61+
computed: {
62+
buttonText() {
63+
if (this.edit) {
64+
return 'Save';
65+
}
66+
return 'Edit';
67+
},
68+
},
69+
beforeMount() {
70+
this.currentValue = this.currentValuePassed;
71+
},
72+
};
73+
</script>

‎frontend/src/components/app/settings/MenuButton.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<!-- eslint-disable max-len -->
33
<div class="flex w-full mx-auto cursor-pointer hover:bg-gray-300">
4-
<h1 class="text-gray-matcha py-4 text-xl w-full md:w-auto text-center md:text-left text-lg">{{text}}</h1>
4+
<h1 class="text-gray-matcha py-2 text-xl md:text-lg w-full md:w-auto text-center md:text-left">{{text}}</h1>
55
</div>
66
</template>
77

‎frontend/src/views/app/Settings.vue‎

Lines changed: 50 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@
22
<!-- eslint-disable max-len -->
33
<div>
44
<NavBar class="px-4 sm:px-16 lg:px-32" v-bind:currentRoute="'Settings'"></NavBar>
5-
<div class="w-full md:mx-16 lg:mx-32">
5+
<div class="w-full md:w-auto md:mx-16 lg:mx-32 relative md:flex items-start h-auto md:mb-16 lg:mb-32">
66
<section class="w-full md:max-w-xs md:shadow-md md:rounded-md">
7-
<div class="relative text-wrap shadow-inner recommendation-card w-full sm:rounded-md"
7+
<div class="w-full md:hidden h-1 bg-white-matcha"></div>
8+
<div class="text-wrap bg-white-matcha recommendation-card w-full sm:rounded-md"
89
v-bind:style="{
910
'background-repeat': 'no-repeat',
1011
'background-position': 'center center',
@@ -13,20 +14,49 @@
1314
<!-- <h1 class="absolute bottom-0 w-full text-center pb-8 text-4xl text-white-matcha capitalize">-->
1415
<!-- {{this.$store.getters.getLoggedInUser.first_name}} {{this.$store.getters.getLoggedInUser.last_name}}</h1>-->
1516
</div>
16-
<div class="px-8 py-2 md:pt-4 md:py-0 md:px-0 w-full">
17-
<h1 class="text-4xl text-gray-matcha text-center md:text-left md:px-8 font-bold md:font-normal my-4 md:mb-1 md:mt-0">Settings</h1>
18-
<MenuButton v-bind:class="{'md:px-8':true, 'md:bg-gray-200': show === 'account'}" v-bind:text="'Account'"></MenuButton>
17+
<div class="px-8 pb-2 md:pt-2 md:pt-4 md:py-0 md:px-0 w-full">
18+
<h1 class="text-4xl md:text-2xl md:font-bold text-gray-matcha text-center md:text-left md:px-8 font-bold md:font-normal mt-4 md:mb-1 md:mt-0">Settings</h1>
19+
<MenuButton v-on:click.native="showSetting('account')" v-bind:class="{'md:px-8':true, 'md:bg-gray-200': getShow === 'account'}" v-bind:text="'Account'"></MenuButton>
1920
<hr class="bg-gray-300 w-full md:hidden">
20-
<MenuButton v-bind:class="{'md:px-8':true, 'md:bg-gray-200': show === 'profile'}" v-bind:text="'Profile'"></MenuButton>
21+
<MenuButton v-on:click.native="showSetting('profile')" v-bind:class="{'md:px-8':true, 'md:bg-gray-200': getShow === 'profile'}" v-bind:text="'Profile'"></MenuButton>
2122
</div>
2223
</section>
24+
<section v-if="getShow === 'account'" class="flex flex-col items-start z-10 absolute bg-white-matcha px-8 pb-4 w-full top-0 left-0 h-screen md:h-auto md:ml-4 md:relative md:shadow-md md:rounded-md">
25+
<div class="flex justify-between items-center w-full my-4 lg:mb-0">
26+
<h1 class="text-3xl md:hidden text-gray-matcha">Account</h1>
27+
<div class="md:hidden sort-button rounded-md text-lg w-12" v-on:click="closeSetting()">
28+
<h1 class="noSelect">←</h1>
29+
</div>
30+
</div>
31+
<AccountInput
32+
v-bind:name="'First Name'"
33+
v-bind:type="'firstName'"
34+
v-bind:currentValuePassed="this.$store.getters.getLoggedInUser.first_name"></AccountInput>
35+
<AccountInput
36+
v-bind:name="'Last Name'"
37+
v-bind:type="'lastName'"
38+
v-bind:currentValuePassed="this.$store.getters.getLoggedInUser.last_name"></AccountInput>
39+
<AccountInput
40+
v-bind:name="'Email'"
41+
v-bind:type="'email'"
42+
v-bind:currentValuePassed="this.$store.getters.getLoggedInUser.email"></AccountInput>
43+
<AccountInput
44+
v-bind:name="'Username'"
45+
v-bind:type="'username'"
46+
v-bind:currentValuePassed="this.$store.getters.getLoggedInUser.username"></AccountInput>
47+
<AccountInput
48+
v-bind:name="'Password'"
49+
v-bind:type="'password'"
50+
v-bind:currentValuePassed="''"></AccountInput>
51+
</section>
2352
</div>
2453
</div>
2554
</template>
2655

2756
<script>
2857
import NavBar from '@/components/shared/NavBar.vue';
2958
import MenuButton from '@/components/app/settings/MenuButton.vue';
59+
import AccountInput from '@/components/app/settings/AccountInput.vue';
3060
import imageMan from '../../assets/recommendations/avatars/man1.png';
3161
import imageWoman from '../../assets/recommendations/avatars/woman1.png';
3262
import imageOther from '../../assets/recommendations/avatars/other.png';
@@ -35,12 +65,24 @@ export default {
3565
components: {
3666
NavBar,
3767
MenuButton,
68+
AccountInput,
3869
},
3970
data: () => ({
4071
userInfo: {},
41-
show: 'account',
72+
show: '',
4273
}),
74+
computed: {
75+
getShow() {
76+
return this.show;
77+
},
78+
},
4379
methods: {
80+
showSetting(setting) {
81+
this.show = setting;
82+
},
83+
closeSetting() {
84+
this.show = '';
85+
},
4486
getImage() {
4587
if (this.$store.getters.getLoggedInUser.images.length === 0) {
4688
if (this.$store.getters.getLoggedInUser.gender === 'male') {
@@ -64,7 +106,7 @@ export default {
64106
<style scoped>
65107
.recommendation-card {
66108
/*width: 24rem;*/
67-
height: 24rem;
109+
height: 20rem;
68110
/*box-shadow: inset 0 -8rem 1rem rgba(0, 0, 0, 0.3);*/
69111
}
70112
</style>

0 commit comments

Comments
 (0)