Skip to content

Commit

Permalink
Header change
Browse files Browse the repository at this point in the history
  • Loading branch information
kbagot committed Jan 2, 2025
1 parent f089a55 commit 459045c
Show file tree
Hide file tree
Showing 6 changed files with 69 additions and 135 deletions.
28 changes: 12 additions & 16 deletions components/Header.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,31 +4,27 @@
<div v-if="showAnimation" class="w-70 h-70">
<!-- Adjust size if necessary -->
<LottieAnimation :animationData="animationData" :loop="true" :autoplay="true" />
<button v-if="completed_profil === true" @click="Search"
class="btn btn-outline btn-accent text-gray-900 hover:bg-yellow-600 transition-all duration-300 flex items-center gap-2">
<span class="w-5 h-5 i-carbon-search"> </span>
{{ $t("boutton.Search") }}
</button>
</div>

<div class="flex-grow"></div>
<div class="space-x-4 flex flex-wrap">
<div v-if="completed_profil === true" class="flex flex-wrap space-x-4">
<button
@click="userProfiles"
<button @click="userProfiles"
class="btn btn-warning text-gray-900 hover:bg-yellow-600 transition-all duration-300">
{{ $t("boutton.UserProfiles") }}
</button>

<button
@click="Dashboard"
class="btn btn-warning text-gray-900 hover:bg-yellow-600 transition-all duration-300">
Dashboard
</button>

<button
@click="modifyProfile"
<button @click="modifyProfile"
class="btn btn-info text-gray-900 hover:bg-blue-600 transition-all duration-300">
{{ $t("boutton.ModifyProfiles") }}
</button>
</div>
<button
@click="handleSignOut"
<button @click="handleSignOut" \
class="btn btn-error text-gray-200 hover:bg-red-600 transition-all duration-300">

Check failure on line 28 in components/Header.vue

View workflow job for this annotation

GitHub Actions / Typecheck and Build Nuxt App 

':' expected.

Check failure on line 28 in components/Header.vue

View workflow job for this annotation

GitHub Actions / Typecheck and Build Nuxt App 

',' expected.

Check failure on line 28 in components/Header.vue

View workflow job for this annotation

GitHub Actions / Typecheck and Build Nuxt App 

',' expected.

Check failure on line 28 in components/Header.vue

View workflow job for this annotation

GitHub Actions / Typecheck and Build Nuxt App 

',' expected.

Check failure on line 28 in components/Header.vue

View workflow job for this annotation

GitHub Actions / Typecheck and Build Nuxt App 

',' expected.

Check failure on line 28 in components/Header.vue

View workflow job for this annotation

GitHub Actions / Typecheck and Build Nuxt App 

',' expected.

Check failure on line 28 in components/Header.vue

View workflow job for this annotation

GitHub Actions / Typecheck and Build Nuxt App 

',' expected.

Check failure on line 28 in components/Header.vue

View workflow job for this annotation

GitHub Actions / Typecheck and Build Nuxt App 

',' expected.
{{ $t("boutton.SignOut") }}
</button>
Expand Down Expand Up @@ -63,14 +59,14 @@ function userProfiles() {
function modifyProfile() {
navigateTo("/modify_profile");
}
function Dashboard() {
navigateTo("/Dashboard");
function Search() {
navigateTo("/search");
}

onMounted(() => {
console.log("completed_profil:", completed_profil.value);
//console.log("completed_profil:", completed_profil.value);
//Show the nav bar only if the profile is completed
const { $emitter } = useNuxtApp();
checkCompletedProfile();

$eventBus.on("CompleteProfil", (payload: any) => {
checkCompletedProfile();
Expand Down
66 changes: 17 additions & 49 deletions components/auth/authCompletion.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,22 +14,13 @@
</label>

<label class="input input-bordered flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
class="h-4 w-4 opacity-70">
<path
d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z" />
</svg>
<input
id="username"
v-model="username"
name="username"
type="text"
placeholder="Simo_42"
required
class="grow" />
<input id="username" v-model="username" name="username" type="text" placeholder="Simo_42"
required class="grow" />
</label>
</div>

Expand All @@ -38,58 +29,37 @@
{{ $t("userProfiles.lastname") }}
</label>
<label class="input input-bordered flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
class="h-4 w-4 opacity-70">
<path
d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z" />
</svg>
<input
id="lastname"
v-model="lastname"
name="lastname"
type="lastname"
placeholder="Johnson"
required
class="grow" />
<input id="lastname" v-model="lastname" name="lastname" type="lastname" placeholder="Johnson"
required class="grow" />
</label>
</div>
<div>
<label for="lastname" class="block text-sm font-medium leading-6 text-gray-900">
{{ $t("userProfiles.firstname") }}
</label>
<label class="input input-bordered flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
class="h-4 w-4 opacity-70">
<path
d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z" />
</svg>
<input
id="firstname"
v-model="firstname"
name="firstname"
type="firstname"
placeholder="Jeff"
required
class="grow" />
<input id="firstname" v-model="firstname" name="firstname" type="firstname" placeholder="Jeff"
required class="grow" />
</label>
</div>

<div>
<button
type="submit"
:disabled="!username || !lastname || !firstname"
:class="[
'btn w-full',
!username || !lastname || !firstname
? 'bg-red-500 text-white cursor-not-allowed'
: 'btn-primary',
]">
<button type="submit" :disabled="!username || !lastname || !firstname" :class="[
'btn w-full',
!username || !lastname || !firstname
? 'bg-red-500 text-white cursor-not-allowed'
: 'btn-primary',
]">
{{ $t("modifyProfiles.Register") }}
</button>
</div>
Expand All @@ -101,9 +71,7 @@
</div>
</div>

<div
v-if="showAnimation"
class="fixed inset-0 flex items-center justify-center z-50 bg-white bg-opacity-60">
<div v-if="showAnimation" class="fixed inset-0 flex items-center justify-center z-50 bg-white bg-opacity-60">
<LottieAnimation :animationData="animationData" :loop="false" :autoplay="true" />
</div>
</template>
Expand Down Expand Up @@ -134,7 +102,7 @@ async function register() {
showAnimation.value = true;
setTimeout(() => {
$eventBus.emit("CompleteProfil", true);
navigateTo("/dashboard");
navigateTo("/search");
}, 2000);
} catch (error) {
console.log(error);
Expand Down
96 changes: 31 additions & 65 deletions components/auth/authSignIn.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<div v-else> -->
<div class="flex min-h-screen flex-col justify-center items-center px-6 py-12 lg:px-8">
<div class="sm:mx-auto sm:w-full sm:max-w-sm">
<h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
<h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-white">
Sign in to your account
</h2>
</div>
Expand All @@ -24,82 +24,48 @@
<div class="form-control">
<label for="username" class="label">Username</label>
<div class="mt-2">
<input
id="username"
v-model="username"
name="username"
type="text"
required
class="input input-bordered w-full focus:ring focus:ring-indigo-300 focus:border-indigo-500"
/>
<input id="username" v-model="username" name="username" type="text" required
class="input input-bordered w-full focus:ring focus:ring-indigo-300 focus:border-indigo-500" />
</div>
</div>

<div class="form-control">
<div class="flex items-center justify-between">
<label for="password" class="label">Password</label>
<div class="text-sm font-medium">
<nuxt-link to="/forgot_password" class="link link-primary"
>Forgot password?</nuxt-link
>
<nuxt-link to="/forgot_password" class="link link-primary">Forgot password?</nuxt-link>
</div>
</div>
<div class="mt-2">
<input
id="password"
v-model="password"
name="password"
type="password"
required
class="input input-bordered w-full focus:ring focus:ring-indigo-300 focus:border-indigo-500"
/>
<input id="password" v-model="password" name="password" type="password" required
class="input input-bordered w-full focus:ring focus:ring-indigo-300 focus:border-indigo-500" />
</div>
</div>
<div class="flex items-center justify-center">
<p>{{ message }}</p>
</div>

<div class="flex items-center justify-center">
<button
type="submit"
class="btn btn-primary w-full hover:bg-indigo-600 transition duration-200 ease-in-out"
>
<button type="submit"
class="btn btn-primary w-full hover:bg-indigo-600 transition duration-200 ease-in-out">
Sign in
</button>
</div>
</form>
<p class="text-center mt-2 text-sm text-gray-500">Or sign in with</p>
<div class="flex justify-center space-x-4">
<Icon
@click="login('github')"
name="uil:github"
style="color: black; font-size: 36px; cursor: pointer"
/>
<Icon
@click="login('google')"
name="uil:google"
style="color: red; font-size: 36px; cursor: pointer"
/>
<img
src="/42.png"
alt="Image"
@click="login('42-school')"
style="width: 36px; height: 36px; cursor: pointer"
/>
<img
src="/discord-icon.png"
alt="Image"
@click="login('discord')"
style="width: 36px; height: 36px; cursor: pointer"
/>
<Icon @click="login('github')" name="uil:github"
style="color: black; font-size: 36px; cursor: pointer" />
<Icon @click="login('google')" name="uil:google" style="color: red; font-size: 36px; cursor: pointer" />
<img src="/42.png" alt="Image" @click="login('42-school')"
style="width: 36px; height: 36px; cursor: pointer" />
<img src="/discord-icon.png" alt="Image" @click="login('discord')"
style="width: 36px; height: 36px; cursor: pointer" />
</div>
<p class="mt-4 text-center text-sm text-gray-500">
Not a member?
<nuxt-link
to="/register"
class="font-semibold leading-6 text-indigo-600 hover:text-indigo-500"
>You can register here</nuxt-link
>
<nuxt-link to="/register" class="font-semibold leading-6 text-indigo-600 hover:text-indigo-500">You can
register here</nuxt-link>
</p>
</div>
</div>
Expand Down Expand Up @@ -147,7 +113,7 @@ async function HandleSignIn(provider: string) {
response === "User got completed profil with his provider" ||
response === "User got completed profil with another provider"
) {
navigateTo("/dashboard");
navigateTo("/search");
} else if (response === "User need to complete his profil") {
navigateTo("/profile_completion");
} else if (response === "Missing require fields") {
Expand All @@ -167,7 +133,7 @@ async function authentification() {
});
if (result?.ok) {
navigateTo("/dashboard");
navigateTo("/search");
} else {
message.value = "Username or password incorrect";
}
Expand All @@ -180,18 +146,18 @@ async function authentification() {
onMounted(async () => {
//prettier-ignore
if (token.value && status.value === "authenticated" &&
token.value.provider === "credentials") {
// case credentials
navigateTo("/dashboard");
} else if (status.value === "authenticated" || token.value) {
// case github, 42 or google
if (token.value !== null && token.value.provider)
await HandleSignIn(token.value.provider);
token.value.provider === "credentials") {
// case credentials
navigateTo("/search");
} else if (status.value === "authenticated" || token.value) {
// case github, 42 or google
if (token.value !== null && token.value.provider)
await HandleSignIn(token.value.provider);
showAnimation.value = true;
setTimeout(() => {
isLoading.value = false;
}, 1000);
}
showAnimation.value = true;
setTimeout(() => {
isLoading.value = false;
}, 1000);
}
});
</script>
5 changes: 3 additions & 2 deletions i18n/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@
"boutton": {
"UserProfiles": "User Profiles",
"ModifyProfiles": "Modify Profiles",
"SignOut": "Sign Out"
"SignOut": "Sign Out",
"Search": "Search Movies"
},
"movies": {
"AddAComment": "add a comment...",
Expand All @@ -46,7 +47,7 @@
},

"searchMovies": {
"searchInput": "Search movies...",
"searchInput": "Enter movie Title...",
"SectionFilters": "Filters",
"filtersAscending": "Ascending",
"filtersDescending": "Descending",
Expand Down
5 changes: 3 additions & 2 deletions i18n/locales/fr.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@
"boutton": {
"UserProfiles": "Profils d'utilisateurs",
"ModifyProfiles": "Modifier ton profil",
"SignOut": "Deconnexion"
"SignOut": "Deconnexion",
"Search": "Recherche films"
},
"movies": {
"AddAComment": "ajouter un commentaire...",
Expand All @@ -46,7 +47,7 @@
},

"searchMovies": {
"searchInput": "Recherche un Film...",
"searchInput": "Taper un titre de film...",
"SectionFilters": "Filtres",
"filtersAscending": "Croissant",
"filtersDescending": "Décroissant",
Expand Down
4 changes: 3 additions & 1 deletion pages/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
<template>
<div class="container mx-auto p-4">

<authSignIn />

<div class="flex w-full flex-col">
<div class="divider divider-start text-xl">{{ $t("IndexMovies.SectionPopular") }}</div>
</div>
Expand Down Expand Up @@ -27,7 +30,6 @@
</div>
<div v-else class="text-center py-8">{{ $t("searchMovies.stateNoMovies") }}</div>
</div>
<authSignIn />
</template>

<script setup lang="ts">
Expand Down

0 comments on commit 459045c

Please sign in to comment.