Skip to content

Commit f96c16e

Browse files
supalarrysupalarry
committed
profile settings update
1 parent 7724d00 commit f96c16e

File tree

6 files changed

+74
-27
lines changed

6 files changed

+74
-27
lines changed

‎frontend/src/assets/dots.png‎

3.18 KB
Loading

‎frontend/src/assets/onboarding/cloudPurple.png‎

11.4 KB
Loading

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

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
22
<!-- eslint-disable max-len -->
3-
<div class="w-full my-2">
3+
<div class="w-full my-4">
44
<ValidationObserver v-slot="{ handleSubmit, invalid }" class="w-full">
55
<form @submit.prevent="handleSubmit(onSubmit)" class="w-full">
66
<div class="flex justify-between items-center w-full">
77
<h1 class="text-md font-bold capitalize text-gray-matcha">{{ name }}</h1>
88
<input v-if="edit" type="submit" :disabled="invalid" value="Save"
9-
v-bind:class="{'text-base': 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-base text-purple-matcha">{{ buttonText }}</h1>
9+
v-bind:class="{'text-sm': 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-sm text-purple-matcha">{{ buttonText }}</h1>
1111
</div>
1212
<div class="break-words" v-if="!edit && type !== 'password'"><h1 class="text-md opacity-50 max-w-xs">{{ currentValue }}</h1></div>
1313
<div v-if="edit">
@@ -32,7 +32,11 @@
3232
<span class="matcha-input-error">{{ errors[0] }}</span>
3333
</ValidationProvider>
3434
<ValidationProvider v-if="type === 'password'" name="Password" rules="required|min:6|validPassword" v-slot="{errors}">
35-
<input type="password" placeholder="Password" v-model="currentValue" class="matcha-input max-w-xs">
35+
<input type="password" placeholder="New Password" v-model="currentValue" class="matcha-input max-w-xs">
36+
<span class="matcha-input-error">{{ passwordErrorHandler(errors[0]) }}</span>
37+
</ValidationProvider>
38+
<ValidationProvider v-if="type === 'password'" name="Repeat Password" rules="required|confirmed:Password" v-slot="{errors}">
39+
<input type="password" placeholder="Repeat Password" v-model="passwordRepeat" class="matcha-input mt-4">
3640
<span class="matcha-input-error">{{ passwordErrorHandler(errors[0]) }}</span>
3741
</ValidationProvider>
3842
</div>
@@ -47,18 +51,26 @@ export default {
4751
data: () => ({
4852
edit: false,
4953
currentValue: '',
54+
passwordRepeat: '',
5055
}),
5156
methods: {
5257
startEditing() {
5358
this.edit = true;
5459
},
5560
onSubmit() {
61+
if (this.type === 'password') {
62+
this.currentValue = '';
63+
this.passwordRepeat = '';
64+
}
5665
this.edit = false;
5766
},
5867
passwordErrorHandler(error) {
59-
if (!error || error === 'The Password field is required') {
68+
if (!error || error === 'The Password field is required' || error === 'The Repeat Password field is required') {
6069
return error;
6170
}
71+
if (error === 'The Repeat Password field confirmation does not match') {
72+
return 'Passwords do not match';
73+
}
6274
return 'This password is too easy to guess';
6375
},
6476
},

‎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-2 text-xl md:text-lg w-full md:w-auto text-center md:text-left">{{text}}</h1>
4+
<h1 class="text-gray-matcha py-4 md:py-2 text-xl md:text-base w-full md:w-auto text-center md:text-left">{{text}}</h1>
55
</div>
66
</template>
77

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<!-- eslint-disable max-len-->
3+
<div class="my-4">
4+
<div class="relative overflow-hidden bg-transparent rounded-md w-full" style="padding-bottom: 70%">
5+
<img v-bind:src="image.link" class="absolute object-cover w-full h-full rounded-md">
6+
<div class="absolute top-0 left-0 z-20 m-5">
7+
<img src="../../../assets/dots.png" tabindex="2" @focusout="showImageSettings = false" v-on:click="showImageSettings = !showImageSettings " class="outline-none cursor-pointer h-3">
8+
<div v-if="showImageSettings" class="z-30 mt-4">
9+
<h1 class="text-white-matcha font-bold text-center bg-red-500 px-4 py-2 cursor-pointer rounded-md" v-on:click="deleteImage(image.id)">Delete</h1>
10+
<h1 class="text-white-matcha font-bold text-center bg-green-500 px-4 py-2 mt-2 cursor-pointer rounded-md" v-if="!image.is_primary" v-on:click="makePrimaryImage(image.id)">Make primary</h1>
11+
</div>
12+
</div>
13+
</div>
14+
</div>
15+
</template>
16+
17+
<script>
18+
export default {
19+
props: ['image'],
20+
data: () => ({
21+
showImageSettings: false,
22+
}),
23+
methods: {
24+
async deleteImage(imageId) {
25+
this.showImageSettings = false;
26+
this.$emit('deleteImage', imageId);
27+
},
28+
async makePrimaryImage(imageId) {
29+
this.showImageSettings = false;
30+
this.$emit('makePrimaryImage', imageId);
31+
},
32+
},
33+
};
34+
</script>

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

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<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">
77
<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-t-md"
8+
<div class="text-wrap bg-white-matcha recommendation-card w-full md:rounded-t-md"
99
v-bind:style="{
1010
'background-repeat': 'no-repeat',
1111
'background-position': 'center center',
@@ -14,8 +14,8 @@
1414
<!-- <h1 class="absolute bottom-0 w-full text-center pb-8 text-4xl text-white-matcha capitalize">-->
1515
<!-- {{this.$store.getters.getLoggedInUser.first_name}} {{this.$store.getters.getLoggedInUser.last_name}}</h1>-->
1616
</div>
17-
<div class="px-8 pb-2 md:pt-2 md:py-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>
17+
<div class="px-8 py-2 md:py-4 md:px-0 w-full">
18+
<h1 class="md:leading-none text-4xl md:text-2xl md:font-bold text-gray-matcha text-center md:text-left md:px-8 font-bold md:font-normal mb-2">Settings</h1>
1919
<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>
2020
<hr class="bg-gray-300 w-full md:hidden">
2121
<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>
@@ -48,7 +48,7 @@
4848
<SectionHeader v-bind:name="'profile'" v-on:click.native="closeSetting()"></SectionHeader>
4949
<div class="pb-4">
5050
<div class="px-8">
51-
<h1 class="inline-block mr-4 font-bold text-gray-matcha">I am</h1>
51+
<h1 class="inline-block mr-4 text-gray-matcha">I am</h1>
5252
<DropdownDisplayChoice
5353
class="inline-block"
5454
v-on:saveSingleChoice="saveSingleChoice"
@@ -57,7 +57,7 @@
5757
v-bind:options="['male', 'female', 'other']"></DropdownDisplayChoice>
5858
</div>
5959
<div class="px-8 mt-4">
60-
<h1 class="inline-block mr-4 font-bold text-gray-matcha">Sexuality</h1>
60+
<h1 class="inline-block mr-4 text-gray-matcha">Sexuality</h1>
6161
<DropdownDisplayChoice
6262
class="inline-block"
6363
v-on:saveSingleChoice="saveSingleChoice"
@@ -66,7 +66,7 @@
6666
v-bind:options="['heterosexual', 'homosexual', 'bisexual', 'other']"></DropdownDisplayChoice>
6767
</div>
6868
<div class="px-8 mt-4">
69-
<h1 class="inline-block mr-3 font-bold text-gray-matcha">Interests</h1>
69+
<h1 class="inline-block mr-3 text-gray-matcha">Interests</h1>
7070
<DropdownDisplayChoices
7171
class="inline-block"
7272
v-bind:options="[
@@ -87,34 +87,31 @@
8787
v-on:saveMultipleChoice="saveMultipleChoice"></DropdownDisplayChoices>
8888
</div>
8989
</div>
90-
<div class="py-4 px-8 border-t border-gray-300 w-full">
90+
<div class="px-8 border-t border-gray-300 w-full">
9191
<AccountInput
9292
v-bind:name="'Bio'"
9393
v-bind:type="'bio'"
9494
v-bind:currentValuePassed="this.$store.getters.getLoggedInUser.bio"></AccountInput>
9595
</div>
9696
<div class="py-4 px-8 border-t border-gray-300 w-full">
9797
<h1 class="inline-block mr-3 font-bold text-gray-matcha">Location</h1>
98-
<h1 class="onboarding-sub-container-content-button-outline mt-2 px-2 cursor-pointer" v-on:click="updateLocation()">Update current location</h1>
98+
<h1 class="onboarding-sub-container-content-button-outline border font-normal mt-2 px-2 cursor-pointer" v-on:click="updateLocation()">Update current location</h1>
9999
</div>
100100
<div class="py-4 w-full px-8 border-t border-gray-300">
101101
<h1 class="font-bold text-gray-matcha">Images<span class="text-md font-normal ml-2 opacity-50 text-gray-matcha">{{this.$store.getters.getLoggedInUser.images.length}} / 5</span></h1>
102102
<div class="auth-sub-container-error mt-8" v-if="image.error">
103103
<h1 class="auth-sub-container-error-message">{{image.error}}</h1>
104104
</div>
105-
<button v-if="this.$store.getters.getLoggedInUser.images.length < 6" class="cursor-pointer relative onboarding-sub-container-upload-button w-32 my-2">
105+
<button v-if="this.$store.getters.getLoggedInUser.images.length < 6" class="cursor-pointer relative onboarding-sub-container-content-button-outline border w-full max-w-xs mt-2">
106106
<input class="cursor-pointer opacity-0 absolute top-0 left-0 w-full h-full rounded-md" type="file" v-on:change="selectFile()" ref="file">
107-
<img src="../../assets/onboarding/cloud.png" class="w-8 mx-auto">
107+
<img src="../../assets/onboarding/cloudPurple.png" class="w-8 mx-auto">
108108
</button>
109-
<div v-for="image in this.$store.getters.getLoggedInUser.images" :key="image.id">
110-
<div class="relative overflow-hidden bg-transparent rounded-md w-full" style="padding-bottom: 70%">
111-
<img v-bind:src="image.link" class="absolute object-cover w-full h-full rounded-md">
112-
</div>
113-
<div class="flex justify-between mb-4">
114-
<h1 class="text-red-500 cursor-pointer" v-on:click="deleteImage(image.id)">Delete</h1>
115-
<h1 class="text-purple-matcha cursor-pointer" v-if="!image.is_primary" v-on:click="makePrimaryImage(image.id)">Make primary</h1>
116-
</div>
117-
</div>
109+
<ProfileImage
110+
v-for="image in this.$store.getters.getLoggedInUser.images"
111+
:key="image.id"
112+
v-bind:image="image"
113+
v-on:makePrimaryImage="makePrimaryImage"
114+
v-on:deleteImage="deleteImage"></ProfileImage>
118115
</div>
119116
</section>
120117
</div>
@@ -129,6 +126,7 @@ import SectionHeader from '@/components/app/settings/SectionHeader.vue';
129126
import AccountInput from '@/components/app/settings/AccountInput.vue';
130127
import DropdownDisplayChoice from '@/components/shared/DropdownDisplayChoice.vue';
131128
import DropdownDisplayChoices from '@/components/shared/DropdownDisplayChoices.vue';
129+
import ProfileImage from '@/components/app/settings/ProfileImage.vue';
132130
import imageMan from '../../assets/recommendations/avatars/man1.png';
133131
import imageWoman from '../../assets/recommendations/avatars/woman1.png';
134132
import imageOther from '../../assets/recommendations/avatars/other.png';
@@ -141,6 +139,7 @@ export default {
141139
SectionHeader,
142140
DropdownDisplayChoice,
143141
DropdownDisplayChoices,
142+
ProfileImage,
144143
},
145144
data: () => ({
146145
userInterests: [],
@@ -198,12 +197,14 @@ export default {
198197
const user = await this.$http.get(`/users/${this.$store.getters.getLoggedInUser.id}`);
199198
await this.$store.dispatch('login', user.data);
200199
},
201-
async deleteImage(imageId) {
200+
async deleteImage(...args) {
201+
const [imageId] = args;
202202
await this.$http.delete(`/profile/images/${imageId}`);
203203
const user = await this.$http.get(`/users/${this.$store.getters.getLoggedInUser.id}`);
204204
await this.$store.dispatch('login', user.data);
205205
},
206-
async makePrimaryImage(imageId) {
206+
async makePrimaryImage(...args) {
207+
const [imageId] = args;
207208
console.log(await this.$http.put(`/profile/images/${imageId}`));
208209
const user = await this.$http.get(`/users/${this.$store.getters.getLoggedInUser.id}`);
209210
await this.$store.dispatch('login', user.data);

0 commit comments

Comments
 (0)