dda39532d6
All checks were successful
Deploy to Production, build images and push to Gitea Registry / build_and_push (pull_request) Successful in 1m16s
- Changed the Google and Apple redirect URIs in the configuration to include the API version in the path. - Reorganized the inclusion of OAuth routes in the main application to ensure they are properly prefixed and accessible. These updates aim to enhance the API structure and ensure consistency in the authentication flow.
112 lines
3.2 KiB
Vue
112 lines
3.2 KiB
Vue
<template>
|
|
<div class="social-login-container">
|
|
<div class="divider">
|
|
<span>or continue with</span>
|
|
</div>
|
|
<div class="social-buttons">
|
|
<button @click="handleGoogleLogin" class="btn btn-social btn-google">
|
|
<svg class="icon" viewBox="0 0 24 24">
|
|
<path
|
|
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
|
|
fill="#4285F4" />
|
|
<path
|
|
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
|
|
fill="#34A853" />
|
|
<path
|
|
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
|
|
fill="#FBBC05" />
|
|
<path
|
|
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
|
|
fill="#EA4335" />
|
|
</svg>
|
|
Continue with Google
|
|
</button>
|
|
<!-- <button @click="handleAppleLogin" class="btn btn-social btn-apple">
|
|
<svg class="icon" viewBox="0 0 24 24">
|
|
<path
|
|
d="M17.05 20.28c-.98.95-2.05.88-3.08.41-1.09-.47-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.41C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.19 2.31-.89 3.51-.84 1.54.07 2.7.61 3.44 1.57-3.14 1.88-2.29 5.13.22 6.41-.65 1.29-1.51 2.58-2.25 4.03zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"
|
|
fill="#000" />
|
|
</svg>
|
|
Continue with Apple
|
|
</button> -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useRouter } from 'vue-router';
|
|
|
|
const router = useRouter();
|
|
|
|
const handleGoogleLogin = () => {
|
|
window.location.href = '/auth/google/login';
|
|
};
|
|
|
|
const handleAppleLogin = () => {
|
|
window.location.href = '/auth/apple/login';
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.social-login-container {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.divider {
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.divider::before,
|
|
.divider::after {
|
|
content: '';
|
|
flex: 1;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.divider span {
|
|
padding: 0 1rem;
|
|
color: var(--text-muted);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.social-buttons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.btn-social {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.75rem;
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
background: var(--bg-color);
|
|
color: var(--text-color);
|
|
font-weight: 500;
|
|
transition: all var(--transition-speed) var(--transition-ease-out);
|
|
}
|
|
|
|
.btn-social:hover {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
.btn-google {
|
|
border-color: #4285F4;
|
|
}
|
|
|
|
.btn-apple {
|
|
border-color: #000;
|
|
}
|
|
|
|
.icon {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
}
|
|
</style> |