new selfhosted version

dashboard/pages/login.vue

@@ -1,347 +1,163 @@
 <script setup lang="ts">
-
-definePageMeta({ layout: 'none' });
-
-import { Lit } from 'litlyx-js';
-
-const config = useRuntimeConfig()
-const isNoAuth = ref<boolean>(config.public.AUTH_MODE == 'NO_AUTH');
-
-const useCodeClientWrapper = isNoAuth.value === false ?
-    useCodeClient :
-    (...args: any) => {
-        return { isReady: false, login: () => { } }
-    }
-
-const { isReady, login } = useCodeClientWrapper({ onSuccess: handleOnSuccess, onError: handleOnError, });
-
+const { fetch: refreshSession, user } = useUserSession()
 const router = useRouter();
 
-const { token, setToken } = useAccessToken();
 
-const { createErrorAlert } = useAlert();
+const loading = ref<boolean>(false);
+const { loadData } = useAppStart();
 
-async function handleOnSuccess(response: any) {
-
-    try {
-        const result = await $fetch('/api/auth/google_login', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ code: response.code })
-        })
-
-        Lit.event('google_login_signup');
-
-        if (result.error) return alert('Error during login, please try again');
-
-        setToken(result.access_token);
-
-        const user = await $fetch<any>('/api/user/me', { headers: { 'Authorization': 'Bearer ' + token.value } })
-        const loggedUser = useLoggedUser();
-        loggedUser.user = user;
-
-        console.log('LOGIN DONE - USER', loggedUser.user);
-
-        const isFirstTime = await $fetch<boolean>('/api/user/is_first_time', { headers: { 'Authorization': 'Bearer ' + token.value } })
-
-        if (isFirstTime === true) {
-            router.push('/project_creation?just_logged=true');
-        } else {
-            router.push('/?just_logged=true');
-        }
-
-
-    } catch (ex) {
-        alert('Google sta avendo problemi con il login, ci scusiamo per il problema ma non dipende da noi.');
-    }
-
-};
-
-function handleOnError(errorResponse: any) {
-    alert('Error' + errorResponse);
-};
-
-function getRandomHex(size: number) {
-    const bytes = new Uint8Array(size);
-    window.crypto.getRandomValues(bytes);
-    return Array.from(bytes)
-        .map((byte) => byte.toString(16).padStart(2, '0'))
-        .join('');
+async function login(event: { email: string, password: string }) {
+  loading.value = true;
+  await useCatch({
+    toast: true,
+    toastTitle: 'Error during login',
+    async action() {
+      await useAuthFetchSync('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: { email: event.email, password: event.password },
+      })
+    },
+    async onSuccess() {
+      await refreshSession();
+      const ok = await loadData()
+      if (ok) router.push('/');
+    },
+  })
+  loading.value = false;
 }
 
-function githubLogin() {
-    const client_id = config.public.GITHUB_CLIENT_ID;
-    const redirect_uri = window.location.origin + '/api';
-    console.log({ redirect_uri })
-    const state = getRandomHex(16);
-    localStorage.setItem("latestCSRFToken", state);
-    const link = `https://github.com/login/oauth/authorize?client_id=${client_id}&response_type=code&scope=repo&redirect_uri=${redirect_uri}/integrations/github/oauth2/callback&state=${state}`;
-    window.location.assign(link);
+async function oauth(provider: 'google') {
+  location.href = `/api/auth/${provider}/authenticate`;
 }
 
-const route = useRoute();
+const bgRef = ref<HTMLElement | null>(null)
 
 onMounted(() => {
-    if (route.query.github_access_token) {
-        //TODO: Something
+  const bg = bgRef.value
+  if (!bg || window.innerWidth < 768) return
+
+  let mouseX = 0
+  let mouseY = 0
+  let currentX = 0
+  let currentY = 0
+
+  const lerp = (start: number, end: number, amt: number) => start + (end - start) * amt
+
+  const handleMouseMove = (e: MouseEvent) => {
+    const x = (e.clientX / window.innerWidth - 0.5) * 2 // range: -1 to 1
+    const y = (e.clientY / window.innerHeight - 0.5) * 2
+    mouseX = x * 20 // max 20px offset
+    mouseY = y * 20
+  }
+
+  const animate = () => {
+    currentX = lerp(currentX, mouseX, 0.1)
+    currentY = lerp(currentY, mouseY, 0.1)
+
+    if (bg) {
+      bg.style.transform = `translate(${currentX}px, ${currentY}px) scale(1.1)`
     }
+
+    requestAnimationFrame(animate)
+  }
+
+  document.addEventListener('mousemove', handleMouseMove)
+  animate()
+
+  onUnmounted(() => {
+    document.removeEventListener('mousemove', handleMouseMove)
+  })
 })
 
-const isEmailLogin = ref<boolean>(false);
-const email = ref<string>("");
-const password = ref<string>("");
-
-function goBackToEmailLogin() {
-    isEmailLogin.value = false;
-    email.value = '';
-    password.value = '';
+function getRandomPercent(min: number, max: number): string {
+  return `${Math.random() * (max - min) + min}%`;
 }
 
-async function signInSelfhosted() {
-    try {
-        const result: any = await $fetch(`/api/auth/no_auth`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ email: email.value, password: password.value })
-        });
-        if (result.error) {
-            if (result.errorMessage) return alert(result.errorMessage);
-            return alert('Error during login, please try again');
-        }
-
-        setToken(result.access_token);
-
-        const user = await $fetch<any>('/api/user/me', { headers: { 'Authorization': 'Bearer ' + token.value } })
-        const loggedUser = useLoggedUser();
-        loggedUser.user = user;
-
-        console.log('LOGIN DONE - USER', loggedUser.user);
-
-        const isFirstTime = await $fetch<boolean>('/api/user/is_first_time', { headers: { 'Authorization': 'Bearer ' + token.value } })
-
-        if (isFirstTime === true) {
-            router.push('/project_creation?just_logged=true');
-        } else {
-            router.push('/?just_logged=true');
-        }
-
-    } catch (ex: any) {
-        createErrorAlert('Error', 'Error during login.' + ex.message);
-    }
-}
-
-async function signInWithCredentials() {
-
-    try {
-        const result = await $fetch<{ error: true, message: string } | { error: false, access_token: string }>('/api/auth/login', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ email: email.value, password: password.value })
-        })
-
-        if (result.error) return createErrorAlert('Error', result.message);
-
-        setToken(result.access_token);
-
-        const user = await $fetch<any>('/api/user/me', { headers: { 'Authorization': 'Bearer ' + token.value } })
-        const loggedUser = useLoggedUser();
-        loggedUser.user = user;
-
-        console.log('LOGIN DONE - USER', loggedUser.user);
-
-        const isFirstTime = await $fetch<boolean>('/api/user/is_first_time', { headers: { 'Authorization': 'Bearer ' + token.value } })
-
-        if (isFirstTime === true) {
-            router.push('/project_creation?just_logged=true');
-        } else {
-            router.push('/?just_logged=true');
-        }
-
-
-    } catch (ex: any) {
-        createErrorAlert('Error', 'Something went wrong.' + ex.message);
-    }
+function getRandomSeconds(min: number, max: number): string {
+  return `${Math.random() * (max - min) + min}s`;
 }
 
+const totalStars = 6;
 
+const stars = ref(
+  Array.from({ length: totalStars }).map(() => ({
+    top: getRandomPercent(20, 70),     // da 20% a 70% in verticale
+    left: getRandomPercent(65, 90),    // solo nella zona destra
+    delay: getRandomSeconds(0, 8),
+    duration: getRandomSeconds(8, 12)
+  }))
+);
 </script>
 
-
 <template>
+  <div class="relative flex overflow-hidden min-h-svh flex-col items-center justify-center">
+    <!-- Sfondo dinamico ingrandito -->
+    <div ref="bgRef" class="absolute inset-0 -z-10 w-full h-full overflow-hidden">
+      <img src="/planet.png" alt="bg" class="w-full h-full object-cover object-bottom scale-120 pointer-events-none" />
 
-    <div class="home w-full h-full">
-
-        <div class="flex h-full bg-lyx-lightmode-background dark:bg-lyx-background">
-
-            <div class="flex-1 flex flex-col items-center pt-20 xl:pt-[22vh]">
-
-                <!-- <div class="rotating-thing absolute top-0"></div> -->
-
-                <div class="mb-8 bg-black rounded-xl">
-                    <img class="w-[5rem]" :src="'logo.png'">
-                </div>
-
-                <div class="text-lyx-lightmode-text dark:text-lyx-text text-[2.2rem] font-bold poppins">
-                    Sign in
-                </div>
-
-                <div
-                    class="text-lyx-lightmode-text/80 dark:text-lyx-text/80 text-[1.2rem] font-light text-center w-[70%] poppins mt-2">
-                    Track web analytics and custom events
-                    with extreme simplicity in under 30 sec.
-                    <br>
-                    <!-- <div class="font-bold poppins mt-4">
-                        Start for Free now! Up to 3k visits/events monthly.
-                    </div> -->
-                </div>
-
-                <div class="mt-12">
-
-                    <div v-if="!isNoAuth && isEmailLogin" class="flex flex-col gap-2">
-
-
-                        <div class="flex flex-col gap-4 z-[100] w-[20vw] min-w-[20rem]">
-                            <LyxUiInput class="px-3 py-2" placeholder="Email" v-model="email"></LyxUiInput>
-                            <LyxUiInput class="px-3 py-2" placeholder="Password" v-model="password" type="password">
-                            </LyxUiInput>
-                        </div>
-
-                        <div class="flex justify-end">
-                            <RouterLink tag="div" to="/forgot_password"
-                                class="text-center text-lyx-lightmode-text dark:text-lyx-text-dark underline cursor-pointer z-[110]">
-                                Forgot password?
-                            </RouterLink>
-                        </div>
-
-                        <div class="flex justify-center mt-4 z-[100]">
-                            <LyxUiButton @click="signInWithCredentials()" class="text-center" type="primary">
-                                Sign in
-                            </LyxUiButton>
-                        </div>
-
-                        <div @click="goBackToEmailLogin()"
-                            class="mt-4 text-center text-lyx-lightmode-text dark:text-lyx-text-dark underline cursor-pointer z-[100]">
-                            Go back
-                        </div>
-
-
-                    </div>
-
-                    <div v-if="!isNoAuth && !isEmailLogin"
-                        class="flex flex-col text-lyx-lightmode-text dark:text-lyx-text gap-2">
-
-                        <div @click="login"
-                            class="hover:bg-lyx-primary bg-white dark:bg-transparent cursor-pointer flex text-[1.3rem] gap-4 items-center border-[1px] border-gray-400 rounded-lg px-8 py-3 relative z-[2]">
-                            <div class="flex items-center">
-                                <i class="fab fa-google"></i>
-                            </div>
-                            Continue with Google
-                        </div>
-
-                        <div @click="isEmailLogin = true"
-                            class="hover:bg-[#d3d3d3] dark:hover:bg-[#262626] bg-white dark:bg-transparent cursor-pointer flex text-[1.3rem] gap-4 items-center border-[1px] border-gray-400 rounded-lg px-8 py-3 relative z-[2]">
-                            <div class="flex items-center">
-                                <i class="far fa-envelope"></i>
-                            </div>
-                            Sign in with Email
-                        </div>
-
-
-                        <div class="flex flex-col gap-2 mt-4">
-
-                            <RouterLink tag="div" to="/register"
-                                class="text-center text-lyx-lightmode-text-dark dark:text-lyx-text-dark underline cursor-pointer z-[100]">
-                                You don't have an account ? Sign up
-                            </RouterLink>
-
-                        </div>
-
-                    </div>
-
-
-
-                    <div v-if="isNoAuth"
-                        class="flex text-[1.3rem] flex-col gap-4 items-center px-8 py-3 relative z-[2]">
-                        <div class="flex flex-col gap-4 z-[100] w-[20vw] min-w-[20rem]">
-                            <LyxUiInput class="px-3 py-2" placeholder="Email" v-model="email"></LyxUiInput>
-                            <LyxUiInput class="px-3 py-2" placeholder="Password" v-model="password" type="password">
-                            </LyxUiInput>
-                        </div>
-                        <div class="flex justify-center mt-4 z-[100]">
-                            <LyxUiButton @click="signInSelfhosted()" class="text-center" type="primary">
-                                Sign in
-                            </LyxUiButton>
-                        </div>
-                    </div>
-
-
-
-
-
-                </div>
-
-                <div
-                    class="text-[.9rem] poppins mt-20 text-lyx-lightmode-text-dark dark:text-lyx-text-dark text-center relative z-[2]">
-                    By continuing you are accepting
-                    <br>
-                    our
-                    <a class="underline" href="https://litlyx.com/terms" target="_blank">Terms of Service</a> and
-                    <a class="underline" href="https://litlyx.com/privacy" target="_blank">Privacy Policy</a>.
-                </div>
-
-
-            </div>
-
-            <div class="grow flex-1 items-center justify-center hidden lg:flex">
-
-                <!-- <GlobeSvg></GlobeSvg> -->
-
-                <img :src="'image-bg.png'" class="h-full py-6">
-
-            </div>
-        </div>
-
-
-        <!-- <div class="flex flex-col items-center justify-center mt-40 gap-20">
-            <div class="google-login text-gray-700" :class="{ disabled: !isReady }" @click="login">
-                <div class="icon">
-                    <i class="fab fa-google"></i>
-                </div>
-                <div> Continua con Google </div>
-            </div>
-        </div> -->
-
+      <!-- Stelle generate dinamicamente -->
+      <div v-for="(star, index) in stars" :key="index" class="twinkle-star" :style="{
+        top: star.top,
+        left: star.left,
+        animationDelay: star.delay,
+        animationDuration: star.duration
+      }"></div>
     </div>
 
+    <!-- Contenuto sopra -->
+    <div class="flex flex-col items-center justify-center gap-6 p-6 md:p-10 relative z-10">
+      <div
+        class="w-full max-w-sm px-4 py-4 bg-violet-400/20 backdrop-blur-xl rounded-xl border border-violet-400/40 shadow-xl shadow-violet-400/10">
+        <AuthLoginForm :loading="loading" @submit="login($event)" @oauth="oauth($event)" />
+      </div>
+
+      <div
+        class="!text-violet-100/80 *:[a]:hover:text-primary text-center text-xs text-balance *:[a]:underline *:[a]:underline-offset-4 w-100">
+        <span v-if="!isSelfhosted()">
+          By clicking continue, you agree to our
+          <a href="https://litlyx.com/terms-of-service" target="_blank">Terms of Service</a>
+          and
+          <a href="https://litlyx.com/privacy-policy" target="_blank">Privacy Policy</a>.
+        </span>
+      </div>
+    </div>
+  </div>
 </template>
 
-
-
-<style scoped lang="scss">
-.rotating-thing {
-    height: 100%;
-    aspect-ratio: 1 / 1;
-    opacity: 0.15;
-    background: radial-gradient(51.24% 31.29% at 50% 50%, rgb(51, 58, 232) 0%, rgba(51, 58, 232, 0) 100%);
-    animation: 12s linear 0s infinite normal none running spin;
+<style scoped>
+.twinkle-star {
+  position: absolute;
+  width: 3px;
+  height: 3px;
+  background-color: white;
+  border-radius: 50%;
+  box-shadow: 0 0 6px 1px white;
+  opacity: 0;
+  animation-name: twinkle;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
 }
 
-.google-login {
-    cursor: pointer;
-    font-weight: bold;
-    background-color: #fcefed;
-    padding: 1rem 2rem;
-    border-radius: 1rem;
-    display: flex;
-    gap: 1rem;
-    align-items: center;
+@keyframes twinkle {
+  0% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
 
-    &.disabled {
-        filter: brightness(50%);
-    }
+  5% {
+    opacity: 1;
+    transform: scale(1.4);
+  }
 
-    i {
-        font-size: 1.5rem;
-    }
+  10% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
 }
 </style>