Client - use <script setup> in components
This commit is contained in:
Sam
@ -15,25 +15,18 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
<script setup lang="ts">
|
||||
import { toRefs } from 'vue'
|
||||
|
||||
import EmailSent from '@/components/Common/Images/EmailSent.vue'
|
||||
import Password from '@/components/Common/Images/Password.vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'PasswordActionDone',
|
||||
components: {
|
||||
EmailSent,
|
||||
Password,
|
||||
},
|
||||
props: {
|
||||
action: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
})
|
||||
interface Props {
|
||||
action: string
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const { action } = toRefs(props)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -9,27 +9,20 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
<script setup lang="ts">
|
||||
import { toRefs, withDefaults } from 'vue'
|
||||
|
||||
import UserAuthForm from '@/components/User/UserAuthForm.vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'PasswordResetForm',
|
||||
components: {
|
||||
UserAuthForm,
|
||||
},
|
||||
props: {
|
||||
action: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
token: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
interface Props {
|
||||
action: string
|
||||
token?: string
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
token: '',
|
||||
})
|
||||
|
||||
const { action, token } = toRefs(props)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -27,24 +27,18 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { PropType, defineComponent } from 'vue'
|
||||
<script setup lang="ts">
|
||||
import { toRefs } from 'vue'
|
||||
|
||||
import UserPicture from '@/components/User/UserPicture.vue'
|
||||
import { IUserProfile } from '@/types/user'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ProfileDisplay',
|
||||
components: {
|
||||
UserPicture,
|
||||
},
|
||||
props: {
|
||||
user: {
|
||||
type: Object as PropType<IUserProfile>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
})
|
||||
interface Props {
|
||||
user: IUserProfile
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const { user } = toRefs(props)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -43,67 +43,46 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { format } from 'date-fns'
|
||||
import {
|
||||
ComputedRef,
|
||||
PropType,
|
||||
Ref,
|
||||
computed,
|
||||
defineComponent,
|
||||
ref,
|
||||
} from 'vue'
|
||||
import { ComputedRef, Ref, computed, ref, toRefs, withDefaults } from 'vue'
|
||||
|
||||
import { AUTH_USER_STORE } from '@/store/constants'
|
||||
import { IUserProfile } from '@/types/user'
|
||||
import { useStore } from '@/use/useStore'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'UserInfos',
|
||||
props: {
|
||||
user: {
|
||||
type: Object as PropType<IUserProfile>,
|
||||
required: true,
|
||||
},
|
||||
fromAdmin: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const store = useStore()
|
||||
const authUser: ComputedRef<IUserProfile> = computed(
|
||||
() => store.getters[AUTH_USER_STORE.GETTERS.AUTH_USER_PROFILE]
|
||||
)
|
||||
const registrationDate = computed(() =>
|
||||
props.user.created_at
|
||||
? format(new Date(props.user.created_at), 'dd/MM/yyyy HH:mm')
|
||||
: ''
|
||||
)
|
||||
const birthDate = computed(() =>
|
||||
props.user.birth_date
|
||||
? format(new Date(props.user.birth_date), 'dd/MM/yyyy')
|
||||
: ''
|
||||
)
|
||||
let displayModal: Ref<boolean> = ref(false)
|
||||
|
||||
function updateDisplayModal(value: boolean) {
|
||||
displayModal.value = value
|
||||
}
|
||||
function deleteUserAccount(username: string) {
|
||||
store.dispatch(AUTH_USER_STORE.ACTIONS.DELETE_ACCOUNT, { username })
|
||||
}
|
||||
|
||||
return {
|
||||
authUser,
|
||||
birthDate,
|
||||
displayModal,
|
||||
registrationDate,
|
||||
deleteUserAccount,
|
||||
updateDisplayModal,
|
||||
}
|
||||
},
|
||||
interface Props {
|
||||
user: IUserProfile
|
||||
fromAdmin?: boolean
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
fromAdmin: false,
|
||||
})
|
||||
|
||||
const store = useStore()
|
||||
|
||||
const { user, fromAdmin } = toRefs(props)
|
||||
const authUser: ComputedRef<IUserProfile> = computed(
|
||||
() => store.getters[AUTH_USER_STORE.GETTERS.AUTH_USER_PROFILE]
|
||||
)
|
||||
const registrationDate = computed(() =>
|
||||
props.user.created_at
|
||||
? format(new Date(props.user.created_at), 'dd/MM/yyyy HH:mm')
|
||||
: ''
|
||||
)
|
||||
const birthDate = computed(() =>
|
||||
props.user.birth_date
|
||||
? format(new Date(props.user.birth_date), 'dd/MM/yyyy')
|
||||
: ''
|
||||
)
|
||||
let displayModal: Ref<boolean> = ref(false)
|
||||
|
||||
function updateDisplayModal(value: boolean) {
|
||||
displayModal.value = value
|
||||
}
|
||||
function deleteUserAccount(username: string) {
|
||||
store.dispatch(AUTH_USER_STORE.ACTIONS.DELETE_ACCOUNT, { username })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -17,35 +17,26 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { PropType, computed, defineComponent } from 'vue'
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
import { IUserProfile } from '@/types/user'
|
||||
import { languageLabels } from '@/utils/locales'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'UserPreferences',
|
||||
props: {
|
||||
user: {
|
||||
type: Object as PropType<IUserProfile>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const language = computed(() =>
|
||||
props.user.language
|
||||
? languageLabels[props.user.language]
|
||||
: languageLabels['en']
|
||||
)
|
||||
const fistDayOfWeek = computed(() =>
|
||||
props.user.weekm ? 'MONDAY' : 'SUNDAY'
|
||||
)
|
||||
const timezone = computed(() =>
|
||||
props.user.timezone ? props.user.timezone : 'Europe/Paris'
|
||||
)
|
||||
return { fistDayOfWeek, language, timezone }
|
||||
},
|
||||
})
|
||||
interface Props {
|
||||
user: IUserProfile
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const language = computed(() =>
|
||||
props.user.language
|
||||
? languageLabels[props.user.language]
|
||||
: languageLabels['en']
|
||||
)
|
||||
const fistDayOfWeek = computed(() => (props.user.weekm ? 'MONDAY' : 'SUNDAY'))
|
||||
const timezone = computed(() =>
|
||||
props.user.timezone ? props.user.timezone : 'Europe/Paris'
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -8,35 +8,21 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { PropType, defineComponent } from 'vue'
|
||||
<script setup lang="ts">
|
||||
import { toRefs } from 'vue'
|
||||
|
||||
import UserHeader from '@/components/User/ProfileDisplay/UserHeader.vue'
|
||||
import UserProfileTabs from '@/components/User/UserProfileTabs.vue'
|
||||
import { IUserProfile } from '@/types/user'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ProfileDisplay',
|
||||
components: {
|
||||
UserHeader,
|
||||
UserProfileTabs,
|
||||
},
|
||||
props: {
|
||||
user: {
|
||||
type: Object as PropType<IUserProfile>,
|
||||
required: true,
|
||||
},
|
||||
tab: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
tabs: ['PROFILE', 'PREFERENCES'],
|
||||
}
|
||||
},
|
||||
})
|
||||
interface Props {
|
||||
user: IUserProfile
|
||||
tab: string
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const { user, tab } = toRefs(props)
|
||||
const tabs = ['PROFILE', 'PREFERENCES']
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -27,74 +27,56 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Ref, defineComponent, ref, watch } from 'vue'
|
||||
<script setup lang="ts">
|
||||
import { Ref, ref, toRefs, watch, withDefaults } from 'vue'
|
||||
|
||||
import { timeZones } from '@/utils/timezone'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'TimezoneDropdown',
|
||||
props: {
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
input: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: ['updateTimezone'],
|
||||
setup(props, { emit }) {
|
||||
const timezone: Ref<string> = ref(props.input)
|
||||
const isOpen: Ref<boolean> = ref(false)
|
||||
const tzList: Ref<HTMLInputElement | null> = ref(null)
|
||||
const focusItemIndex: Ref<number> = ref(0)
|
||||
|
||||
function matchTimezone(t: string): RegExpMatchArray | null {
|
||||
return t.toLowerCase().match(timezone.value.toLowerCase())
|
||||
}
|
||||
function onMouseOver(index: number) {
|
||||
focusItemIndex.value = index
|
||||
}
|
||||
function onUpdateTimezone(value: string) {
|
||||
timezone.value = value
|
||||
isOpen.value = false
|
||||
emit('updateTimezone', value)
|
||||
}
|
||||
function onEnter(event: Event & { target: HTMLInputElement }) {
|
||||
event.preventDefault()
|
||||
if (tzList.value?.firstElementChild?.innerHTML) {
|
||||
onUpdateTimezone(tzList.value?.firstElementChild?.innerHTML)
|
||||
}
|
||||
}
|
||||
function openDropdown(event: Event & { target: HTMLInputElement }) {
|
||||
event.preventDefault()
|
||||
isOpen.value = true
|
||||
timezone.value = event.target.value.trim()
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.input,
|
||||
(value) => {
|
||||
timezone.value = value
|
||||
}
|
||||
)
|
||||
|
||||
return {
|
||||
focusItemIndex,
|
||||
isOpen,
|
||||
timezone,
|
||||
timeZones,
|
||||
tzList,
|
||||
matchTimezone,
|
||||
onEnter,
|
||||
onMouseOver,
|
||||
onUpdateTimezone,
|
||||
openDropdown,
|
||||
}
|
||||
},
|
||||
interface Props {
|
||||
input: string
|
||||
disabled?: boolean
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
disabled: false,
|
||||
})
|
||||
|
||||
const emit = defineEmits(['updateTimezone'])
|
||||
|
||||
const { input, disabled } = toRefs(props)
|
||||
const timezone: Ref<string> = ref(props.input)
|
||||
const isOpen: Ref<boolean> = ref(false)
|
||||
const tzList: Ref<HTMLInputElement | null> = ref(null)
|
||||
const focusItemIndex: Ref<number> = ref(0)
|
||||
|
||||
function matchTimezone(t: string): RegExpMatchArray | null {
|
||||
return t.toLowerCase().match(timezone.value.toLowerCase())
|
||||
}
|
||||
function onMouseOver(index: number) {
|
||||
focusItemIndex.value = index
|
||||
}
|
||||
function onUpdateTimezone(value: string) {
|
||||
timezone.value = value
|
||||
isOpen.value = false
|
||||
emit('updateTimezone', value)
|
||||
}
|
||||
function onEnter(event: Event & { target: HTMLInputElement }) {
|
||||
event.preventDefault()
|
||||
if (tzList.value?.firstElementChild?.innerHTML) {
|
||||
onUpdateTimezone(tzList.value?.firstElementChild?.innerHTML)
|
||||
}
|
||||
}
|
||||
function openDropdown(event: Event & { target: HTMLInputElement }) {
|
||||
event.preventDefault()
|
||||
isOpen.value = true
|
||||
timezone.value = event.target.value.trim()
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.input,
|
||||
(value) => {
|
||||
timezone.value = value
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -93,16 +93,15 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { format } from 'date-fns'
|
||||
import {
|
||||
ComputedRef,
|
||||
PropType,
|
||||
Ref,
|
||||
computed,
|
||||
defineComponent,
|
||||
reactive,
|
||||
ref,
|
||||
toRefs,
|
||||
onMounted,
|
||||
} from 'vue'
|
||||
|
||||
@ -110,79 +109,63 @@
|
||||
import { IUserProfile, IUserPayload } from '@/types/user'
|
||||
import { useStore } from '@/use/useStore'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'UserInfosEdition',
|
||||
props: {
|
||||
user: {
|
||||
type: Object as PropType<IUserProfile>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const store = useStore()
|
||||
const userForm: IUserPayload = reactive({
|
||||
password: '',
|
||||
password_conf: '',
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
birth_date: '',
|
||||
location: '',
|
||||
bio: '',
|
||||
})
|
||||
const registrationDate = computed(() =>
|
||||
props.user.created_at
|
||||
? format(new Date(props.user.created_at), 'dd/MM/yyyy HH:mm')
|
||||
: ''
|
||||
)
|
||||
const loading = computed(
|
||||
() => store.getters[AUTH_USER_STORE.GETTERS.USER_LOADING]
|
||||
)
|
||||
const errorMessages: ComputedRef<string | string[] | null> = computed(
|
||||
() => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
|
||||
)
|
||||
let displayModal: Ref<boolean> = ref(false)
|
||||
interface Props {
|
||||
user: IUserProfile
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
onMounted(() => {
|
||||
if (props.user) {
|
||||
updateUserForm(props.user)
|
||||
}
|
||||
})
|
||||
const store = useStore()
|
||||
|
||||
function updateUserForm(user: IUserProfile) {
|
||||
userForm.first_name = user.first_name ? user.first_name : ''
|
||||
userForm.last_name = user.last_name ? user.last_name : ''
|
||||
userForm.birth_date = user.birth_date
|
||||
? format(new Date(user.birth_date), 'yyyy-MM-dd')
|
||||
: ''
|
||||
userForm.location = user.location ? user.location : ''
|
||||
userForm.bio = user.bio ? user.bio : ''
|
||||
}
|
||||
function updateBio(value: string) {
|
||||
userForm.bio = value
|
||||
}
|
||||
function updateProfile() {
|
||||
store.dispatch(AUTH_USER_STORE.ACTIONS.UPDATE_USER_PROFILE, userForm)
|
||||
}
|
||||
function updateDisplayModal(value: boolean) {
|
||||
displayModal.value = value
|
||||
}
|
||||
function deleteAccount(username: string) {
|
||||
store.dispatch(AUTH_USER_STORE.ACTIONS.DELETE_ACCOUNT, { username })
|
||||
}
|
||||
|
||||
return {
|
||||
displayModal,
|
||||
errorMessages,
|
||||
loading,
|
||||
registrationDate,
|
||||
userForm,
|
||||
deleteAccount,
|
||||
updateBio,
|
||||
updateDisplayModal,
|
||||
updateProfile,
|
||||
}
|
||||
},
|
||||
const { user } = toRefs(props)
|
||||
const userForm: IUserPayload = reactive({
|
||||
password: '',
|
||||
password_conf: '',
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
birth_date: '',
|
||||
location: '',
|
||||
bio: '',
|
||||
})
|
||||
const registrationDate = computed(() =>
|
||||
props.user.created_at
|
||||
? format(new Date(props.user.created_at), 'dd/MM/yyyy HH:mm')
|
||||
: ''
|
||||
)
|
||||
const loading = computed(
|
||||
() => store.getters[AUTH_USER_STORE.GETTERS.USER_LOADING]
|
||||
)
|
||||
const errorMessages: ComputedRef<string | string[] | null> = computed(
|
||||
() => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
|
||||
)
|
||||
let displayModal: Ref<boolean> = ref(false)
|
||||
|
||||
onMounted(() => {
|
||||
if (props.user) {
|
||||
updateUserForm(props.user)
|
||||
}
|
||||
})
|
||||
|
||||
function updateUserForm(user: IUserProfile) {
|
||||
userForm.first_name = user.first_name ? user.first_name : ''
|
||||
userForm.last_name = user.last_name ? user.last_name : ''
|
||||
userForm.birth_date = user.birth_date
|
||||
? format(new Date(user.birth_date), 'yyyy-MM-dd')
|
||||
: ''
|
||||
userForm.location = user.location ? user.location : ''
|
||||
userForm.bio = user.bio ? user.bio : ''
|
||||
}
|
||||
function updateBio(value: string) {
|
||||
userForm.bio = value
|
||||
}
|
||||
function updateProfile() {
|
||||
store.dispatch(AUTH_USER_STORE.ACTIONS.UPDATE_USER_PROFILE, userForm)
|
||||
}
|
||||
function updateDisplayModal(value: boolean) {
|
||||
displayModal.value = value
|
||||
}
|
||||
function deleteAccount(username: string) {
|
||||
store.dispatch(AUTH_USER_STORE.ACTIONS.DELETE_ACCOUNT, { username })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@ -32,15 +32,8 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
ComputedRef,
|
||||
PropType,
|
||||
Ref,
|
||||
defineComponent,
|
||||
computed,
|
||||
ref,
|
||||
} from 'vue'
|
||||
<script setup lang="ts">
|
||||
import { ComputedRef, Ref, computed, ref, toRefs } from 'vue'
|
||||
|
||||
import UserPicture from '@/components/User/UserPicture.vue'
|
||||
import { AUTH_USER_STORE, ROOT_STORE } from '@/store/constants'
|
||||
@ -49,56 +42,40 @@
|
||||
import { useStore } from '@/use/useStore'
|
||||
import { getReadableFileSize } from '@/utils/files'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'UserPictureEdition',
|
||||
components: {
|
||||
UserPicture,
|
||||
},
|
||||
props: {
|
||||
user: {
|
||||
type: Object as PropType<IUserProfile>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const store = useStore()
|
||||
const errorMessages: ComputedRef<string | string[] | null> = computed(
|
||||
() => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
|
||||
)
|
||||
const appConfig: ComputedRef<TAppConfig> = computed(
|
||||
() => store.getters[ROOT_STORE.GETTERS.APP_CONFIG]
|
||||
)
|
||||
const fileSizeLimit = appConfig.value.max_single_file_size
|
||||
? getReadableFileSize(appConfig.value.max_single_file_size)
|
||||
: ''
|
||||
let pictureFile: Ref<File | null> = ref(null)
|
||||
interface Props {
|
||||
user: IUserProfile
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
function deleteUserPicture() {
|
||||
store.dispatch(AUTH_USER_STORE.ACTIONS.DELETE_PICTURE)
|
||||
}
|
||||
function updatePictureFile(event: Event & { target: HTMLInputElement }) {
|
||||
if (event.target.files) {
|
||||
pictureFile.value = event.target.files[0]
|
||||
}
|
||||
}
|
||||
function updateUserPicture() {
|
||||
if (pictureFile.value) {
|
||||
store.dispatch(AUTH_USER_STORE.ACTIONS.UPDATE_USER_PICTURE, {
|
||||
picture: pictureFile.value,
|
||||
})
|
||||
}
|
||||
}
|
||||
const store = useStore()
|
||||
|
||||
return {
|
||||
errorMessages,
|
||||
fileSizeLimit,
|
||||
pictureFile,
|
||||
deleteUserPicture,
|
||||
updateUserPicture,
|
||||
updatePictureFile,
|
||||
}
|
||||
},
|
||||
})
|
||||
const { user } = toRefs(props)
|
||||
const errorMessages: ComputedRef<string | string[] | null> = computed(
|
||||
() => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
|
||||
)
|
||||
const appConfig: ComputedRef<TAppConfig> = computed(
|
||||
() => store.getters[ROOT_STORE.GETTERS.APP_CONFIG]
|
||||
)
|
||||
const fileSizeLimit = appConfig.value.max_single_file_size
|
||||
? getReadableFileSize(appConfig.value.max_single_file_size)
|
||||
: ''
|
||||
let pictureFile: Ref<File | null> = ref(null)
|
||||
|
||||
function deleteUserPicture() {
|
||||
store.dispatch(AUTH_USER_STORE.ACTIONS.DELETE_PICTURE)
|
||||
}
|
||||
function updatePictureFile(event: Event & { target: HTMLInputElement }) {
|
||||
if (event.target.files) {
|
||||
pictureFile.value = event.target.files[0]
|
||||
}
|
||||
}
|
||||
function updateUserPicture() {
|
||||
if (pictureFile.value) {
|
||||
store.dispatch(AUTH_USER_STORE.ACTIONS.UPDATE_USER_PICTURE, {
|
||||
picture: pictureFile.value,
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -51,15 +51,8 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
ComputedRef,
|
||||
PropType,
|
||||
computed,
|
||||
defineComponent,
|
||||
reactive,
|
||||
onMounted,
|
||||
} from 'vue'
|
||||
<script setup lang="ts">
|
||||
import { ComputedRef, computed, reactive, onMounted } from 'vue'
|
||||
|
||||
import TimezoneDropdown from '@/components/User/ProfileEdition/TimezoneDropdown.vue'
|
||||
import { AUTH_USER_STORE, ROOT_STORE } from '@/store/constants'
|
||||
@ -67,71 +60,50 @@
|
||||
import { useStore } from '@/use/useStore'
|
||||
import { availableLanguages } from '@/utils/locales'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'UserPreferencesEdition',
|
||||
components: {
|
||||
TimezoneDropdown,
|
||||
},
|
||||
props: {
|
||||
user: {
|
||||
type: Object as PropType<IUserProfile>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const store = useStore()
|
||||
const userForm: IUserPreferencesPayload = reactive({
|
||||
language: '',
|
||||
timezone: 'Europe/Paris',
|
||||
weekm: false,
|
||||
})
|
||||
const weekStart = [
|
||||
{
|
||||
label: 'MONDAY',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
label: 'SUNDAY',
|
||||
value: false,
|
||||
},
|
||||
]
|
||||
const loading = computed(
|
||||
() => store.getters[AUTH_USER_STORE.GETTERS.USER_LOADING]
|
||||
)
|
||||
const errorMessages: ComputedRef<string | string[] | null> = computed(
|
||||
() => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
|
||||
)
|
||||
interface Props {
|
||||
user: IUserProfile
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
onMounted(() => {
|
||||
if (props.user) {
|
||||
updateUserForm(props.user)
|
||||
}
|
||||
})
|
||||
const store = useStore()
|
||||
|
||||
function updateUserForm(user: IUserProfile) {
|
||||
userForm.language = user.language ? user.language : 'en'
|
||||
userForm.timezone = user.timezone ? user.timezone : 'Europe/Paris'
|
||||
userForm.weekm = user.weekm ? user.weekm : false
|
||||
}
|
||||
function updateProfile() {
|
||||
store.dispatch(
|
||||
AUTH_USER_STORE.ACTIONS.UPDATE_USER_PREFERENCES,
|
||||
userForm
|
||||
)
|
||||
}
|
||||
function updateTZ(value: string) {
|
||||
userForm.timezone = value
|
||||
}
|
||||
|
||||
return {
|
||||
availableLanguages,
|
||||
errorMessages,
|
||||
loading,
|
||||
userForm,
|
||||
weekStart,
|
||||
updateProfile,
|
||||
updateTZ,
|
||||
}
|
||||
},
|
||||
const userForm: IUserPreferencesPayload = reactive({
|
||||
language: '',
|
||||
timezone: 'Europe/Paris',
|
||||
weekm: false,
|
||||
})
|
||||
const weekStart = [
|
||||
{
|
||||
label: 'MONDAY',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
label: 'SUNDAY',
|
||||
value: false,
|
||||
},
|
||||
]
|
||||
const loading = computed(
|
||||
() => store.getters[AUTH_USER_STORE.GETTERS.USER_LOADING]
|
||||
)
|
||||
const errorMessages: ComputedRef<string | string[] | null> = computed(
|
||||
() => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
if (props.user) {
|
||||
updateUserForm(props.user)
|
||||
}
|
||||
})
|
||||
|
||||
function updateUserForm(user: IUserProfile) {
|
||||
userForm.language = user.language ? user.language : 'en'
|
||||
userForm.timezone = user.timezone ? user.timezone : 'Europe/Paris'
|
||||
userForm.weekm = user.weekm ? user.weekm : false
|
||||
}
|
||||
function updateProfile() {
|
||||
store.dispatch(AUTH_USER_STORE.ACTIONS.UPDATE_USER_PREFERENCES, userForm)
|
||||
}
|
||||
function updateTZ(value: string) {
|
||||
userForm.timezone = value
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -17,37 +17,25 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, PropType } from 'vue'
|
||||
<script setup lang="ts">
|
||||
import { computed, toRefs } from 'vue'
|
||||
|
||||
import UserProfileTabs from '@/components/User/UserProfileTabs.vue'
|
||||
import { AUTH_USER_STORE } from '@/store/constants'
|
||||
import { IUserProfile } from '@/types/user'
|
||||
import { useStore } from '@/use/useStore'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ProfileEdition',
|
||||
components: {
|
||||
UserProfileTabs,
|
||||
},
|
||||
props: {
|
||||
user: {
|
||||
type: Object as PropType<IUserProfile>,
|
||||
required: true,
|
||||
},
|
||||
tab: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const store = useStore()
|
||||
return {
|
||||
loading: computed(
|
||||
() => store.getters[AUTH_USER_STORE.GETTERS.USER_LOADING]
|
||||
),
|
||||
tabs: ['PROFILE', 'PICTURE', 'PREFERENCES'],
|
||||
}
|
||||
},
|
||||
})
|
||||
interface Props {
|
||||
user: IUserProfile
|
||||
tab: string
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const store = useStore()
|
||||
|
||||
const { user, tab } = toRefs(props)
|
||||
const tabs = ['PROFILE', 'PICTURE', 'PREFERENCES']
|
||||
const loading = computed(
|
||||
() => store.getters[AUTH_USER_STORE.GETTERS.USER_LOADING]
|
||||
)
|
||||
</script>
|
||||
|
||||
@ -86,8 +86,15 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { ComputedRef, computed, defineComponent, reactive, watch } from 'vue'
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ComputedRef,
|
||||
computed,
|
||||
reactive,
|
||||
toRefs,
|
||||
watch,
|
||||
withDefaults,
|
||||
} from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
import { AUTH_USER_STORE, ROOT_STORE } from '@/store/constants'
|
||||
@ -95,104 +102,90 @@
|
||||
import { ILoginRegisterFormData } from '@/types/user'
|
||||
import { useStore } from '@/use/useStore'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'UserAuthForm',
|
||||
props: {
|
||||
action: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
token: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const formData: ILoginRegisterFormData = reactive({
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
password_conf: '',
|
||||
})
|
||||
const route = useRoute()
|
||||
const store = useStore()
|
||||
|
||||
const buttonText: ComputedRef<string> = computed(() =>
|
||||
getButtonText(props.action)
|
||||
)
|
||||
const errorMessages: ComputedRef<string | string[] | null> = computed(
|
||||
() => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
|
||||
)
|
||||
const appConfig: ComputedRef<TAppConfig> = computed(
|
||||
() => store.getters[ROOT_STORE.GETTERS.APP_CONFIG]
|
||||
)
|
||||
const registration_disabled: ComputedRef<boolean> = computed(
|
||||
() =>
|
||||
props.action === 'register' &&
|
||||
!appConfig.value.is_registration_enabled
|
||||
)
|
||||
|
||||
function getButtonText(action: string): string {
|
||||
switch (action) {
|
||||
case 'reset-request':
|
||||
case 'reset':
|
||||
return 'buttons.SUBMIT'
|
||||
default:
|
||||
return `buttons.${props.action.toUpperCase()}`
|
||||
}
|
||||
}
|
||||
function onSubmit(actionType: string) {
|
||||
switch (actionType) {
|
||||
case 'reset':
|
||||
if (!props.token) {
|
||||
return store.commit(
|
||||
ROOT_STORE.MUTATIONS.SET_ERROR_MESSAGES,
|
||||
'user.INVALID_TOKEN'
|
||||
)
|
||||
}
|
||||
return store.dispatch(AUTH_USER_STORE.ACTIONS.RESET_USER_PASSWORD, {
|
||||
password: formData.password,
|
||||
password_conf: formData.password_conf,
|
||||
token: props.token,
|
||||
})
|
||||
case 'reset-request':
|
||||
return store.dispatch(
|
||||
AUTH_USER_STORE.ACTIONS.SEND_PASSWORD_RESET_REQUEST,
|
||||
{
|
||||
email: formData.email,
|
||||
}
|
||||
)
|
||||
default:
|
||||
store.dispatch(AUTH_USER_STORE.ACTIONS.LOGIN_OR_REGISTER, {
|
||||
actionType,
|
||||
formData,
|
||||
redirectUrl: route.query.from,
|
||||
})
|
||||
}
|
||||
}
|
||||
function resetFormData() {
|
||||
formData.username = ''
|
||||
formData.email = ''
|
||||
formData.password = ''
|
||||
formData.password_conf = ''
|
||||
}
|
||||
watch(
|
||||
() => route.path,
|
||||
async () => {
|
||||
store.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
|
||||
resetFormData()
|
||||
}
|
||||
)
|
||||
return {
|
||||
appConfig,
|
||||
buttonText,
|
||||
errorMessages,
|
||||
formData,
|
||||
registration_disabled,
|
||||
onSubmit,
|
||||
}
|
||||
},
|
||||
interface Props {
|
||||
action: string
|
||||
token?: string
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
token: '',
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const store = useStore()
|
||||
|
||||
const { action } = toRefs(props)
|
||||
const formData: ILoginRegisterFormData = reactive({
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
password_conf: '',
|
||||
})
|
||||
const buttonText: ComputedRef<string> = computed(() =>
|
||||
getButtonText(props.action)
|
||||
)
|
||||
const errorMessages: ComputedRef<string | string[] | null> = computed(
|
||||
() => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
|
||||
)
|
||||
const appConfig: ComputedRef<TAppConfig> = computed(
|
||||
() => store.getters[ROOT_STORE.GETTERS.APP_CONFIG]
|
||||
)
|
||||
const registration_disabled: ComputedRef<boolean> = computed(
|
||||
() =>
|
||||
props.action === 'register' && !appConfig.value.is_registration_enabled
|
||||
)
|
||||
|
||||
function getButtonText(action: string): string {
|
||||
switch (action) {
|
||||
case 'reset-request':
|
||||
case 'reset':
|
||||
return 'buttons.SUBMIT'
|
||||
default:
|
||||
return `buttons.${props.action.toUpperCase()}`
|
||||
}
|
||||
}
|
||||
function onSubmit(actionType: string) {
|
||||
switch (actionType) {
|
||||
case 'reset':
|
||||
if (!props.token) {
|
||||
return store.commit(
|
||||
ROOT_STORE.MUTATIONS.SET_ERROR_MESSAGES,
|
||||
'user.INVALID_TOKEN'
|
||||
)
|
||||
}
|
||||
return store.dispatch(AUTH_USER_STORE.ACTIONS.RESET_USER_PASSWORD, {
|
||||
password: formData.password,
|
||||
password_conf: formData.password_conf,
|
||||
token: props.token,
|
||||
})
|
||||
case 'reset-request':
|
||||
return store.dispatch(
|
||||
AUTH_USER_STORE.ACTIONS.SEND_PASSWORD_RESET_REQUEST,
|
||||
{
|
||||
email: formData.email,
|
||||
}
|
||||
)
|
||||
default:
|
||||
store.dispatch(AUTH_USER_STORE.ACTIONS.LOGIN_OR_REGISTER, {
|
||||
actionType,
|
||||
formData,
|
||||
redirectUrl: route.query.from,
|
||||
})
|
||||
}
|
||||
}
|
||||
function resetFormData() {
|
||||
formData.username = ''
|
||||
formData.email = ''
|
||||
formData.password = ''
|
||||
formData.password_conf = ''
|
||||
}
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
async () => {
|
||||
store.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
|
||||
resetFormData()
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -12,30 +12,22 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { PropType, computed, defineComponent } from 'vue'
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
import { IUserProfile } from '@/types/user'
|
||||
import { getApiUrl } from '@/utils'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'UserPicture',
|
||||
props: {
|
||||
user: {
|
||||
type: Object as PropType<IUserProfile>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
return {
|
||||
authUserPictureUrl: computed(() =>
|
||||
props.user.picture
|
||||
? `${getApiUrl()}users/${props.user.username}/picture`
|
||||
: ''
|
||||
),
|
||||
}
|
||||
},
|
||||
})
|
||||
interface Props {
|
||||
user: IUserProfile
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const authUserPictureUrl = computed(() =>
|
||||
props.user.picture
|
||||
? `${getApiUrl()}users/${props.user.username}/picture`
|
||||
: ''
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@ -18,44 +18,32 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { PropType, defineComponent } from 'vue'
|
||||
<script setup lang="ts">
|
||||
import { toRefs, withDefaults } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'UserProfileTabs',
|
||||
props: {
|
||||
tabs: {
|
||||
type: Object as PropType<string[]>,
|
||||
required: true,
|
||||
},
|
||||
selectedTab: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
edition: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
function getPath(tab: string) {
|
||||
switch (tab) {
|
||||
case 'PICTURE':
|
||||
return '/profile/edit/picture'
|
||||
case 'PREFERENCES':
|
||||
return `/profile${props.edition ? '/edit' : ''}/preferences`
|
||||
default:
|
||||
case 'PROFILE':
|
||||
return `/profile${props.edition ? '/edit' : ''}`
|
||||
}
|
||||
}
|
||||
return { getPath }
|
||||
},
|
||||
interface Props {
|
||||
tabs: string[]
|
||||
selectedTab: string
|
||||
edition: boolean
|
||||
disabled?: boolean
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
disabled: false,
|
||||
})
|
||||
|
||||
const { tabs, selectedTab, disabled } = toRefs(props)
|
||||
|
||||
function getPath(tab: string) {
|
||||
switch (tab) {
|
||||
case 'PICTURE':
|
||||
return '/profile/edit/picture'
|
||||
case 'PREFERENCES':
|
||||
return `/profile${props.edition ? '/edit' : ''}/preferences`
|
||||
default:
|
||||
case 'PROFILE':
|
||||
return `/profile${props.edition ? '/edit' : ''}`
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
Reference in New Issue
Block a user