Skip to content
Snippets Groups Projects
Commit 94fc86cb authored by Ina Martini's avatar Ina Martini
Browse files

style(prettier): run format check

parent 5be43ceb
No related branches found
No related tags found
3 merge requests!66Final merge,!18Update login page and implement forgot password feature,!4Pipeline fix
Pipeline #277215 failed
Stage: install
Stage: lint_and_format
Stage: build
Stage: test
Stage: security_scan
Hide whitespace changes
Inline Side-by-side
src/components/FormLogin.vue
+ 7
− 5
View file @ 94fc86cb
......@@ -17,7 +17,6 @@ const router = useRouter()
const isEmailValid = computed(() => emailRegex.test(resetEmail.value))
const submitForm = () => {
userStore.login(username.value, password.value)
router.push('/hjem')
......@@ -33,8 +32,8 @@ const openForgotPasswordModal = (event: MouseEvent) => {
}
const submitReset = () => {
resetEmail.value = '';
isModalOpen.value = false;
resetEmail.value = ''
isModalOpen.value = false
// TODO: Implement logic for sending reset email
}
......@@ -70,7 +69,11 @@ watch(
<button class="absolute right-0 top-1 bg-transparent" @click="toggleShowPassword">
{{ showPassword ? '🔓' : '🔒' }}
</button>
<a @click="openForgotPasswordModal" class=" absolute right-3 top-10 hover:underline hover:bg-transparent cursor-pointer">Glemt passord?</a>
<a
@click="openForgotPasswordModal"
class="absolute right-3 top-10 hover:underline hover:bg-transparent cursor-pointer"
>Glemt passord?</a
>
</div>
</div>
<div class="flex flex-row gap-5">
......@@ -100,7 +103,6 @@ watch(
@update:isModalOpen="isModalOpen = $event"
@update:inputValue="resetEmail = $event"
/>
</template>
<style scoped></style>
src/components/ModalComponent.vue
+ 31
− 23
View file @ 94fc86cb
<template>
<div v-if="isModalOpen" class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center">
<div
v-if="isModalOpen"
class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center"
>
<div class="bg-white p-6 rounded-lg shadow-lg max-w-sm w-full">
<h2 class="font-bold mb-4">{{ title }}</h2>
<p class="mb-4">{{ message }}</p>
<input v-if="showInput"
:type="typeValue"
v-model="inputValue"
@input="$emit('update:inputValue', inputValue)"
class="border border-gray-300 p-2 w-full"
:placeholder="inputPlaceholder"
<input
v-if="showInput"
:type="typeValue"
v-model="inputValue"
@input="$emit('update:inputValue', inputValue)"
class="border border-gray-300 p-2 w-full"
:placeholder="inputPlaceholder"
/>
<div class="flex flex-col justify-center items-center gap-3 mt-3 w-full">
<button v-if="showButton"
:disabled="!isInputValid"
@click="buttonAction && buttonAction!()"
class="active-button font-bold py-2 px-4 w-1/2 hover:bg-[#f7da7c] border-2 border-[#f7da7c] disabled:border-transparent">
{{ button1 }}
<button
v-if="showButton"
:disabled="!isInputValid"
@click="buttonAction && buttonAction!()"
class="active-button font-bold py-2 px-4 w-1/2 hover:bg-[#f7da7c] border-2 border-[#f7da7c] disabled:border-transparent"
>
{{ button1 }}
</button>
<button @click="closeModal"
class="font-bold py-2 px-4 w-1/2 bg-white border-2 border-[#f7da7c] hover:bg-[#f7da7c]"
aria-label="close">
Lukk
<button
@click="closeModal"
class="font-bold py-2 px-4 w-1/2 bg-white border-2 border-[#f7da7c] hover:bg-[#f7da7c]"
aria-label="close"
>
Lukk
</button>
</div>
</div>
......@@ -28,7 +36,7 @@
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ref } from 'vue'
defineProps({
title: String,
......@@ -44,13 +52,13 @@ defineProps({
typeValue: String,
inputPlaceholder: String,
isInputValid: Boolean
});
})
const emits = defineEmits(['update:isModalOpen', 'update:inputValue']);
const inputValue = ref('');
const emits = defineEmits(['update:isModalOpen', 'update:inputValue'])
const inputValue = ref('')
function closeModal() {
inputValue.value = '';
emits('update:isModalOpen', false);
inputValue.value = ''
emits('update:isModalOpen', false)
}
</script>
\ No newline at end of file
</script>
src/components/__tests__/ModalTest.spec.ts
+ 26
− 26
View file @ 94fc86cb
......@@ -16,53 +16,53 @@ describe('ModalComponent', () => {
showInput: false,
typeValue: 'text',
inputPlaceholder: 'Placeholder',
isInputValid: true,
isInputValid: true
}
})
})
it('opens modal when button is clicked', async () => {
expect(wrapper.props().isModalOpen).toBe(true);
expect(wrapper.props().isModalOpen).toBe(true)
})
it('closes modal when close button is clicked', async () => {
await wrapper.setProps({ isModalOpen: true });
await wrapper.vm.$nextTick();
await wrapper.setProps({ isModalOpen: true })
await wrapper.vm.$nextTick()
const closeButton = wrapper.find('button[aria-label="close"]');
const closeButton = wrapper.find('button[aria-label="close"]')
if (closeButton.exists()) {
await closeButton.trigger('click');
await closeButton.trigger('click')
expect(wrapper.emitted()['update:isModalOpen']).toBeTruthy();
expect(wrapper.emitted()['update:isModalOpen'][0]).toEqual([false]);
expect(wrapper.emitted()['update:isModalOpen']).toBeTruthy()
expect(wrapper.emitted()['update:isModalOpen'][0]).toEqual([false])
} else {
throw new Error('Close button not found');
throw new Error('Close button not found')
}
});
})
it('button is shown when showButton is true', async () => {
expect(wrapper.props().showButton).toBe(true);
expect(wrapper.find('.active-button').exists()).toBe(true);
});
expect(wrapper.props().showButton).toBe(true)
expect(wrapper.find('.active-button').exists()).toBe(true)
})
it('button is not shown when showButton is false', async () => {
await wrapper.setProps({ showButton: false });
await wrapper.vm.$nextTick();
await wrapper.setProps({ showButton: false })
await wrapper.vm.$nextTick()
expect(wrapper.props().showButton).toBe(false);
expect(wrapper.find('.active-button').exists()).toBe(false);
});
expect(wrapper.props().showButton).toBe(false)
expect(wrapper.find('.active-button').exists()).toBe(false)
})
it('input is shown when showInput is true', async () => {
await wrapper.setProps({ showInput: true });
await wrapper.vm.$nextTick();
await wrapper.setProps({ showInput: true })
await wrapper.vm.$nextTick()
expect(wrapper.props().showInput).toBe(true);
expect(wrapper.find('input').exists()).toBe(true);
});
expect(wrapper.props().showInput).toBe(true)
expect(wrapper.find('input').exists()).toBe(true)
})
it('input is not shown when showInput is false', async () => {
expect(wrapper.props().showInput).toBe(false);
expect(wrapper.find('input').exists()).toBe(false);
});
expect(wrapper.props().showInput).toBe(false)
expect(wrapper.find('input').exists()).toBe(false)
})
})
src/views/RegisterLoginView.vue
+ 7
− 5
View file @ 94fc86cb
......@@ -9,16 +9,18 @@ const router = useRouter()
const isLogin = ref<boolean>(true)
onMounted(() => {
isLogin.value = router.currentRoute.value.path === '/logginn';
isLogin.value = router.currentRoute.value.path === '/logginn'
})
</script>
<template>
<div class="flex flex-col items-center gap-5 justify-center md:flex-row h-screen">
<div class="flex items-center justify-center md:w-2/3">
<img src="@/assets/spare_og_sti.png" alt="Spare og sti logo" class="w-5/6 ml-10 md:mb-64"/>
<img
src="@/assets/spare_og_sti.png"
alt="Spare og sti logo"
class="w-5/6 ml-10 md:mb-64"
/>
</div>
<div class="flex flex-col md:mr-10 md:mt-20 md:w-1/3 h-screen justify-start">
<div class="flex flex-row gap-5 justify-center">
......@@ -51,4 +53,4 @@ onMounted(() => {
.selected {
border-bottom: 2px solid black;
}
</style>
\ No newline at end of file
</style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment