Skip to content

Commit

Permalink
Merge pull request #29 from Crudzaso/develop
Browse files Browse the repository at this point in the history 
Develop
  • Loading branch information
@DiegoAndresRamirez
DiegoAndresRamirez authored Nov 4, 2024
2 parents 810445f + 56c8d24 commit 31ca388
Show file tree
Hide file tree
Showing 8 changed files with 118 additions and 41 deletions.
38 changes: 38 additions & 0 deletions public/assets/media/auth/Login-Page.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions public/assets/media/auth/Logo-Gananza1.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions public/assets/media/auth/Logo-Gananza2.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 15 additions & 15 deletions resources/js/Components/Sign-in/LoginComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
<div class="d-flex flex-column flex-lg-row flex-column-fluid">
<div class="d-flex flex-lg-row-fluid">
<div class="d-flex flex-column flex-center pb-0 pb-lg-10 p-10 w-100">
<img v-if="!isDarkMode" class="mx-auto mw-100 mb-10 mb-lg-20"
src="assets/media/auth/Login-image.svg" alt="" style="width: 400px; max-width: 800px;" />
<img v-else class="mx-auto mw-100 w-150px w-lg-300px mb-10 mb-lg-20"
src="assets/media/auth/agency-dark.png" alt="" />
<img v-if="!isDarkMode" class="mx-auto mw-100 mb-10 mb-lg-20" src="assets/media/auth/Login-Page.svg"
alt="" style="width: 500px; max-width: 800px;" />
<img v-else class="mx-auto mw-100 mb-10 mb-lg-20" src="assets/media/auth/Login-Page.svg" alt=""
style="width: 500px; max-width: 800px;" />
<h1 :style="{ color: theme.textPrimary }" class="fs-2qx fw-bold text-center mb-7">¡Más cerca de
ganar!</h1>
<div :style="{ color: theme.textSecondary }" class="fs-base text-center fw-semibold">
Expand All @@ -18,16 +18,13 @@
</div>
<div :style="{ background: theme.cardBackground }"
class="d-flex flex-column-fluid justify-content-center p-12">
<!-- Botón flotante para alternar tema -->
<button @click="toggleDarkMode"
class="theme-toggle-btn p-2 rounded-full transition-transform duration-200 hover:scale-105"
:style="{ background: theme.cardBackground }">
<component :is="isDarkMode ? 'Sun' : 'Moon'" :size="24"
:color="isDarkMode ? theme.emphasis : theme.primary" />
</button>


<!-- Contenedor del formulario con ajuste de ancho y centrado -->
<div class="form-container d-flex flex-column align-items-center"
style="max-width: 500px; margin: 0 auto;">
<form class="form w-100" id="kt_sign_in_form" @submit.prevent="submit"
Expand All @@ -45,8 +42,7 @@
<a href="#" @click.prevent="loginWithGoogle" class="btn btn-flex btn-outline w-100"
:style="{ background: theme.cardBackground, color: theme.textPrimary, borderColor: theme.border }">
<img alt="Google" src="assets/media/svg/brand-logos/google-icon.svg"
class="h-15px me-3" />
Google
class="h-15px me-3" />Google
</a>
</div>
<div class="col-md-6">
Expand All @@ -55,8 +51,7 @@
<img alt="GitHub" src="assets/media/svg/brand-logos/github-1.svg"
class="theme-light-show h-15px me-3" />
<img alt="GitHub Dark" src="assets/media/svg/brand-logos/github-icon.svg"
class="theme-dark-show h-15px me-3" />
GitHub
class="theme-dark-show h-15px me-3" />GitHub
</a>
</div>
</div>
Expand All @@ -66,16 +61,19 @@
<span>O con tu correo</span>
</div>

<!-- Campos de entrada -->
<!-- Campos de entrada con errores -->
<div class="fv-row mb-8">
<input type="email" placeholder="Correo Electrónico" name="email" v-model="form.email"
required class="form-control custom-input"
:style="{ background: theme.background, color: theme.textPrimary, borderColor: theme.border }" />
<InputError :message="form.errors.email" /> <!-- Error de correo electrónico -->
</div>

<div class="fv-row mb-3">
<input type="password" placeholder="Contraseña" name="password" v-model="form.password"
required class="form-control custom-input"
:style="{ background: theme.background, color: theme.textPrimary, borderColor: theme.border }" />
<InputError :message="form.errors.password" /> <!-- Error de contraseña -->
</div>

<!-- Recordatorio de contraseña -->
Expand All @@ -87,9 +85,7 @@
<!-- Botón de envío -->
<div class="d-grid mb-10">
<button type="button" class="btn btn-secondary" @click="cancel"
style="margin-bottom: 10px;">
Cancelar
</button>
style="margin-bottom: 10px;">Cancelar</button>
<button type="submit" id="kt_sign_in_submit" class="btn"
:style="{ background: theme.primary, color: '#fff' }" :disabled="form.processing">
<span v-if="!form.processing" class="indicator-label">Iniciar Sesión</span>
Expand All @@ -111,15 +107,19 @@
</div>
</template>


<script>
import { ref, computed, onMounted } from 'vue'; // Importar onMounted
import { Sun, Moon } from 'lucide-vue-next';
import { useForm } from '@inertiajs/vue3';
import InputError from '@/Components/InputError.vue'; // Importar InputError
export default {
components: {
Sun,
Moon,
InputError,
},
setup() {
const form = useForm({
Expand Down
7 changes: 0 additions & 7 deletions resources/js/Pages/Auth/Login.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,6 @@ const submit = () => {
});
};
const loginWithGithub = () => {
window.location.href = route('github.login');
};
const loginWithGoogle = () => {
window.location.href = route('google.login');
};
</script>

<template>
Expand Down
49 changes: 38 additions & 11 deletions resources/js/Pages/Auth/Register.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,17 +56,23 @@
<input type="text" placeholder="Nombre" name="name" v-model="form.name" required
class="form-control custom-input"
:style="{ background: theme.background, color: theme.textPrimary, borderColor: theme.border }" />
<InputError :message="form.errors.name" /> <!-- Error de Nombre -->
</div>

<div class="col-md-6 mb-4">
<input type="text" placeholder="Apellido" name="lastname" v-model="form.lastname"
required class="form-control custom-input"
:style="{ background: theme.background, color: theme.textPrimary, borderColor: theme.border }" />
<InputError :message="form.errors.lastname" /> <!-- Error de Apellido -->
</div>

<div class="col-md-6 mb-4">
<input type="text" placeholder="Documento" name="document" v-model="form.document"
required class="form-control custom-input"
:style="{ background: theme.background, color: theme.textPrimary, borderColor: theme.border }" />
<InputError :message="form.errors.document" /> <!-- Error de Documento -->
</div>

<div class="col-md-6 mb-4">
<select name="document_type" v-model="form.document_type" required
class="form-control custom-input"
Expand All @@ -76,47 +82,59 @@
<option value="Passport">Pasaporte</option>
<option value="Other">Otro</option>
</select>
<InputError :message="form.errors.document_type" /> <!-- Error de Tipo de Documento -->
</div>

<div class="col-md-6 mb-4">
<input type="text" placeholder="Teléfono" name="phone_number"
v-model="form.phone_number" required class="form-control custom-input"
:style="{ background: theme.background, color: theme.textPrimary, borderColor: theme.border }" />
<InputError :message="form.errors.phone_number" /> <!-- Error de Teléfono -->
</div>

<div class="col-md-6 mb-4">
<input type="email" placeholder="Correo Electrónico" name="email" v-model="form.email"
required class="form-control custom-input"
:style="{ background: theme.background, color: theme.textPrimary, borderColor: theme.border }" />
<InputError :message="form.errors.email" /> <!-- Error de Correo Electrónico -->
</div>

<div class="col-md-6 mb-4">
<input type="password" placeholder="Contraseña" name="password" v-model="form.password"
required class="form-control custom-input"
:style="{ background: theme.background, color: theme.textPrimary, borderColor: theme.border }" />
<InputError :message="form.errors.password" /> <!-- Error de Contraseña -->
</div>

<div class="col-md-6 mb-4">
<input type="password" placeholder="Confirmar Contraseña" name="confirmPassword"
v-model="form.confirmPassword" required class="form-control custom-input"
<input type="password" placeholder="Confirmar Contraseña" name="password_confirmation"
v-model="form.password_confirmation" required class="form-control custom-input"
:style="{ background: theme.background, color: theme.textPrimary, borderColor: theme.border }" />
<InputError :message="form.errors.password_confirmation" />
<!-- Error de Confirmar Contraseña -->
</div>
</div>

<!-- Aceptación de Términos -->
<div class="fv-row mb-5">
<label class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" v-model="form.termsAccepted" />
<input class="form-check-input" type="checkbox" v-model="form.terms" />
<span class="form-check-label fw-semibold" :style="{ color: theme.textSecondary }">
Acepto los <a href="#" :style="{ color: theme.primary }">Términos y Condiciones</a>
</span>
</label>
<InputError :message="form.errors.terms" /> <!-- Error de Términos y Condiciones -->
</div>


<!-- Botón de Envío -->
<div class="d-grid mb-5">
<button type="button" class="btn btn-secondary" @click="cancel"
style="margin-bottom: 10px;">
Cancelar
</button>
<button type="submit" class="btn" :style="{ background: theme.primary, color: '#fff' }"
:disabled="!form.termsAccepted || form.processing">
:disabled="!form.terms || form.processing">
<span v-if="!form.processing" class="indicator-label">Registrarse</span>
<span v-else class="indicator-progress">Por favor espera...
<span class="spinner-border spinner-border-sm align-middle ms-2"></span>
Expand All @@ -134,10 +152,10 @@
</div>

<div class="d-none d-lg-flex flex-column flex-center p-10 w-50">
<img v-if="!isDarkMode" class="mx-auto mw-100 mb-5" src="assets/media/auth/agency.png"
alt="Gananza Logo" style="width: 300px; max-width: 500px;" />
<img v-else class="mx-auto mw-100 mb-5" src="assets/media/auth/agency-dark.png" alt="Gananza Logo"
style="width: 300px; max-width: 500px;" />
<img v-if="!isDarkMode" class="mx-auto mw-100 mb-5" src="assets/media/auth/Login-Page.svg"
alt="Gananza Logo" style="width: 500px; max-width: 500px;" />
<img v-else class="mx-auto mw-100 mb-5" src="assets/media/auth/Login-Page.svg" alt="Gananza Logo"
style="width: 500px; max-width: 500px;" />
<h1 :style="{ color: theme.textPrimary }" class="fs-2qx fw-bold text-center mb-5">¡Descubre Gananza!
</h1>
<div :style="{ color: theme.textSecondary }" class="fs-base text-center fw-semibold">
Expand All @@ -154,11 +172,14 @@
import { ref, computed, onMounted } from 'vue'; // Importar onMounted
import { Sun, Moon } from 'lucide-vue-next';
import { useForm } from '@inertiajs/vue3';
import InputError from '@/Components/InputError.vue'; // Importar InputError
export default {
components: {
Sun,
Moon,
InputError,
},
setup() {
const form = useForm({
Expand All @@ -169,10 +190,11 @@ export default {
phone_number: '',
email: '',
password: '',
confirmPassword: '',
termsAccepted: false,
password_confirmation: '',
terms: false, // Cambia termsAccepted a terms
});
const isDarkMode = ref(false);
// Cargar el valor de localStorage al iniciar el componente
Expand All @@ -199,7 +221,7 @@ export default {
const submit = () => {
form.post(route('register'), {
onFinish: () => form.reset('password', 'confirmPassword'),
onFinish: () => form.reset('password', 'password_confirmation'),
});
};
Expand Down Expand Up @@ -231,7 +253,12 @@ export default {

<style scoped>
.form-container {
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.form {
padding: 1.70rem;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
Expand Down
8 changes: 4 additions & 4 deletions resources/js/Pages/Auth/ResetPassword.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
<div class="d-flex flex-lg-row-fluid">
<div class="d-flex flex-column flex-center pb-0 pb-lg-10 p-10 w-100">
<img v-if="!isDarkMode" class="mx-auto mw-100 mb-10 mb-lg-20" :src="agencyImage"
alt="Reset Password" style="width: 400px; max-width: 800px;" />
alt="Reset Password" style="width: 500px; max-width: 800px;" />
<img v-else class="mx-auto mw-100 mb-10 mb-lg-20" :src="agencyDarkImage" alt="Reset Password"
style="width: 400px; max-width: 800px;" />
style="width: 500px; max-width: 800px;" />
<h1 :style="{ color: theme.textPrimary }" class="fs-2qx fw-bold text-center mb-7">Restablecer
Contraseña</h1>
<div :style="{ color: theme.textSecondary }" class="fs-base text-center fw-semibold mb-5">
Expand Down Expand Up @@ -80,8 +80,8 @@ import { Sun, Moon } from 'lucide-vue-next';
import { useForm } from '@inertiajs/vue3';
// Importa las imágenes
import agencyImage from '../../../../public/assets/media/auth/agency.png';
import agencyDarkImage from '../../../../public/assets/media/auth/agency-dark.png';
import agencyImage from '../../../../public/assets/media/auth/Login-Page.svg';
import agencyDarkImage from '../../../../public/assets/media/auth/Login-Page.svg';
export default {
components: {
Expand Down
7 changes: 3 additions & 4 deletions resources/js/Pages/Welcome.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,12 +103,11 @@ onBeforeUnmount(() => {
<header :style="{ background: theme.gradient }" class="p-6 border-b">
<div class="max-w-6xl mx-auto flex justify-between items-center">
<div class="flex items-center gap-2">
<Trophy :size="32" :style="{ color: theme.emphasis }" />
<h1 :style="{ color: theme.textPrimary }" class="text-2xl font-bold">
Gananza
</h1>
<img :src="isDarkMode ? '/assets/media/auth/Logo-Gananza1.svg' : '/assets/media/auth/Logo-Gananza2.svg'"
alt="Gananza Logo" class="h-10" />
</div>


<div class="flex items-center gap-4">
<Link v-if="canLogin && !$page.props.auth.user" :href="route('login')"
class="px-4 py-2 rounded-lg hover:bg-opacity-90 transition-transform duration-200 hover:scale-105"
Expand Down

0 comments on commit 31ca388

Please sign in to comment.