jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

LoginWithGoogle feature now working.

Browse Source
This commit is contained in:
Jonathan Bourdon
2024-09-24 01:38:46 -04:00
parent e2660791b7
commit d70ff96d9d
2 changed files with 28 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/stores/authStore.js
View File

@@ -63,12 +63,12 @@ export const useAuthStore = defineStore(
} }
} }
async function loginGoogle(accessToken) { async function loginWithGoogle(accessToken) {
try { try {
const response = await clientApi.post( const response = await clientApi.post(
'api/google/sign-in', 'api/users/login-with-google',
{ {
accessToken: accessToken token: accessToken
}) })
updateTokens(response.data) updateTokens(response.data)
} catch (error) { } catch (error) {
@@ -95,6 +95,6 @@ export const useAuthStore = defineStore(
} }
} }
return {accessToken, refreshToken, isAuthenticated, userId, login, loginGoogle, logout} return {accessToken, refreshToken, isAuthenticated, userId, login, loginWithGoogle, logout}
}) })

32
src/views/main/LoginForm.vue
View File

@@ -16,11 +16,19 @@
Utilisateur Utilisateur
</v-btn> </v-btn>
<div v-if="showEmailForm" class="w-full mt-2"> <div v-if="showEmailForm" class="w-full mt-2">
<v-text-field v-model="email" label="Courriel" variant="outlined" dense prepend-inner-icon="mdi-email" color="transparent" class="text-black"></v-text-field> <v-text-field v-model="email" label="Courriel" variant="outlined" dense prepend-inner-icon="mdi-email"
<v-text-field v-model="password" label="Mot de passe" :type="showPassword ? 'text' : 'password'" variant="outlined" dense prepend-inner-icon="mdi-lock" append-inner-icon="mdi-eye" @click:append-inner="showPassword = !showPassword" color="transparent" class="text-black"></v-text-field> color="transparent" class="text-black"></v-text-field>
<v-btn class="w-full text-center text-white" :style="{ backgroundColor: '#A30E79' }" @click="login">Connecter</v-btn> <v-text-field v-model="password" label="Mot de passe" :type="showPassword ? 'text' : 'password'"
<p class="mt-4 text-sm text-center">Si vous n'avez pas de compte, <a href="/register" class="text-blue-500">cliquez ici</a> pour en créer un.</p> variant="outlined" dense prepend-inner-icon="mdi-lock" append-inner-icon="mdi-eye"
<div v-if="errorSnackBar" class="mb-4 text-red-600">Nom d'utilisateur ou mot de passe invalide. <button class="text-red-600 ml-4" @click="errorSnackBar = false">Fermer</button></div> @click:append-inner="showPassword = !showPassword" color="transparent"
class="text-black"></v-text-field>
<v-btn class="w-full text-center text-white" :style="{ backgroundColor: '#A30E79' }" @click="login">Connecter
</v-btn>
<p class="mt-4 text-sm text-center">Si vous n'avez pas de compte, <a href="/register" class="text-blue-500">cliquez
ici</a> pour en créer un.</p>
<div v-if="errorSnackBar" class="mb-4 text-red-600">Nom d'utilisateur ou mot de passe invalide.
<button class="text-red-600 ml-4" @click="errorSnackBar = false">Fermer</button>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -40,7 +48,6 @@ const password = ref("");
const errorSnackBar = ref(false); const errorSnackBar = ref(false);
const showEmailForm = ref(false); const showEmailForm = ref(false);
const showPassword = ref(false); const showPassword = ref(false);
const googleCallback = ref('');
const props = defineProps({ const props = defineProps({
onSuccess: { onSuccess: {
@@ -53,9 +60,18 @@ const props = defineProps({
} }
}); });
async function googleCallback(token) {
const response = await authStore.loginWithGoogle(JSON.stringify(token));
handleResponse(response)
}
async function login() { async function login() {
const result = await authStore.login(email.value, password.value); const response = await authStore.login(email.value, password.value);
if (result === true) { handleResponse(response)
}
function handleResponse(response) {
if (response === true) {
props.onSuccess(); props.onSuccess();
} else { } else {
if (props.onFailure) { if (props.onFailure) {