Ajusta layout
This commit is contained in:
LeoMortari
@@ -1,95 +1,147 @@
|
||||
<template>
|
||||
<q-layout view="hHh LpR fFf">
|
||||
<q-drawer
|
||||
v-model="leftDrawerOpen"
|
||||
show-if-above
|
||||
:width="400"
|
||||
:breakpoint="700"
|
||||
bordered
|
||||
side="right"
|
||||
class="bg-primary text-white"
|
||||
>
|
||||
<q-scroll-area class="fit">
|
||||
<div class="q-pa-md">
|
||||
<q-form @submit.prevent="handleLogin" class="q-mt-lg">
|
||||
<q-input
|
||||
v-model="username"
|
||||
type="text"
|
||||
label="Username"
|
||||
lazy-rules
|
||||
:rules="[(val) => !!val || 'Campo obrigatório']"
|
||||
class="q-mb-md"
|
||||
dark
|
||||
filled
|
||||
<q-page class="login-page">
|
||||
<div class="login-page__container">
|
||||
<section class="login-page__hero">
|
||||
<div class="login-page__hero-content">
|
||||
<div class="login-page__brand">
|
||||
<q-avatar size="48px" color="white" text-color="primary"
|
||||
>CI</q-avatar
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="person" />
|
||||
</template>
|
||||
</q-input>
|
||||
<div>
|
||||
<div class="login-page__brand-title">Clipper IA</div>
|
||||
<div class="login-page__brand-subtitle">
|
||||
Cortes automáticos com inteligência
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
<h2>Produza cortes envolventes sem perder tempo na edição.</h2>
|
||||
<p>
|
||||
Envie a url do vídeo no Youtube e receba os melhores momentos
|
||||
prontos para divulgar em minutos. Nossa IA identifica picos de
|
||||
retenção, fala e emoção para gerar clipes certeiros.
|
||||
</p>
|
||||
|
||||
<div class="login-page__stats">
|
||||
<div>
|
||||
<span class="login-page__stat-value">+3x</span>
|
||||
<span class="login-page__stat-label">mais alcance</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="login-page__stat-value">24/7</span>
|
||||
<span class="login-page__stat-label">operando</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="login-card__wrapper">
|
||||
<q-card flat bordered class="login-card">
|
||||
<div class="login-card__header">
|
||||
<div class="login-card__badge">
|
||||
<q-icon name="sym_o_bolt" size="20px" />
|
||||
<span>Beta exclusivo</span>
|
||||
</div>
|
||||
<h1>Bem-vindo de volta</h1>
|
||||
<p>
|
||||
Entre para continuar gerando clipes automaticamente com o Clipper
|
||||
IA.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<q-form class="login-card__form">
|
||||
<TextField
|
||||
v-model="username"
|
||||
label="Email ou usuário"
|
||||
placeholder="seuemail@clipper.ai"
|
||||
required
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon name="sym_o_person" color="primary" />
|
||||
</template>
|
||||
</TextField>
|
||||
|
||||
<TextField
|
||||
v-model="password"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
label="Senha"
|
||||
lazy-rules
|
||||
:rules="[(val) => !!val || 'Campo obrigatório']"
|
||||
class="q-mb-lg"
|
||||
dark
|
||||
filled
|
||||
required
|
||||
placeholder="••••••••"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="lock" />
|
||||
<template #prepend>
|
||||
<q-icon name="sym_o_lock" color="primary" />
|
||||
</template>
|
||||
|
||||
<template v-slot:append>
|
||||
<template #append>
|
||||
<q-icon
|
||||
:name="showPassword ? 'visibility_off' : 'visibility'"
|
||||
:name="
|
||||
showPassword ? 'sym_o_visibility_off' : 'sym_o_visibility'
|
||||
"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
@click="showPassword = !showPassword"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</TextField>
|
||||
|
||||
<div class="login-card__links">
|
||||
<Button
|
||||
variant="link"
|
||||
color="primary"
|
||||
text-color="primary"
|
||||
label="Esqueci minha senha"
|
||||
@click.prevent="handleForgotPassword"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
label="Entrar"
|
||||
color="white"
|
||||
textColor="primary"
|
||||
full-width
|
||||
:loading="loading"
|
||||
@click="handleLogin"
|
||||
full-width
|
||||
/>
|
||||
</q-form>
|
||||
|
||||
<p v-if="error" class="text-negative q-mt-md">{{ error }}</p>
|
||||
</div>
|
||||
</q-scroll-area>
|
||||
</q-drawer>
|
||||
<p v-if="error" class="login-card__error">{{ error }}</p>
|
||||
|
||||
<q-page-container>
|
||||
<q-page class="flex flex-center bg-black-1">
|
||||
<div class="text-center q-pa-md">
|
||||
<div class="text-h4 q-mb-md">Clipper IA</div>
|
||||
|
||||
<p class="text-grey-8">Cortes automaticos de vídeos</p>
|
||||
</div>
|
||||
</q-page>
|
||||
</q-page-container>
|
||||
</q-layout>
|
||||
<div class="login-card__footer">
|
||||
<span>Precisa de ajuda?</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
color="secondary"
|
||||
text-color="primary"
|
||||
icon="sym_o_chat"
|
||||
label="Falar com suporte"
|
||||
full-width
|
||||
@click.prevent="handleSupport"
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
</section>
|
||||
</div>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Cookies from "js-cookie";
|
||||
|
||||
import Button from "@components/Button";
|
||||
import TextField from "@components/TextField";
|
||||
|
||||
import { API } from "@config/axios";
|
||||
import {
|
||||
buildUserProfileFromToken,
|
||||
extractRolesFromToken,
|
||||
} from "@utils/keycloak";
|
||||
|
||||
export default {
|
||||
name: "LoginView",
|
||||
components: {
|
||||
Button,
|
||||
TextField,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
leftDrawerOpen: true,
|
||||
username: "",
|
||||
password: "",
|
||||
showPassword: false,
|
||||
@@ -104,12 +156,13 @@ export default {
|
||||
return;
|
||||
}
|
||||
|
||||
this.error = "";
|
||||
|
||||
try {
|
||||
this.loading = true;
|
||||
|
||||
const params = new URLSearchParams();
|
||||
|
||||
params.append("username", this.username);
|
||||
params.append("username", this.username.trim());
|
||||
params.append("password", this.password);
|
||||
|
||||
const { data } = await API.post("/auth/login", params.toString(), {
|
||||
@@ -118,63 +171,285 @@ export default {
|
||||
},
|
||||
});
|
||||
|
||||
const accessTokenDays = data.expires_in
|
||||
? data.expires_in / (60 * 60 * 24)
|
||||
: undefined;
|
||||
const refreshTokenDays = data.refresh_expires_in
|
||||
? data.refresh_expires_in / (60 * 60 * 24)
|
||||
: undefined;
|
||||
|
||||
const cookieOptions = {
|
||||
sameSite: "lax",
|
||||
secure: window.location.protocol === "https:",
|
||||
path: "/",
|
||||
};
|
||||
|
||||
Cookies.set("token", data.access_token, {
|
||||
expires: data.expires_in,
|
||||
...cookieOptions,
|
||||
expires: accessTokenDays,
|
||||
});
|
||||
|
||||
Cookies.set("refresh_token", data.refresh_token, {
|
||||
expires: data.refresh_expires_in,
|
||||
...cookieOptions,
|
||||
expires: refreshTokenDays,
|
||||
});
|
||||
|
||||
await this.$router.push("/");
|
||||
const profile = buildUserProfileFromToken(data.access_token);
|
||||
const roles = profile?.roles?.length
|
||||
? profile.roles
|
||||
: extractRolesFromToken(data.access_token);
|
||||
|
||||
if (roles?.length) {
|
||||
Cookies.set("user_roles", JSON.stringify(roles), {
|
||||
...cookieOptions,
|
||||
expires: accessTokenDays,
|
||||
});
|
||||
}
|
||||
|
||||
if (profile) {
|
||||
Cookies.set("user_profile", JSON.stringify(profile), {
|
||||
...cookieOptions,
|
||||
expires: accessTokenDays,
|
||||
});
|
||||
}
|
||||
|
||||
await this.$router.push("/videos");
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
console.log("ok");
|
||||
|
||||
this.$q.notify({
|
||||
type: "negative",
|
||||
message: "Não foi possível entrar. Verifique as credenciais.",
|
||||
});
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (window.innerWidth < 700) {
|
||||
this.leftDrawerOpen = false;
|
||||
}
|
||||
handleForgotPassword() {
|
||||
this.$q.notify({
|
||||
type: "info",
|
||||
message: "Entre em contato com o suporte para redefinir sua senha.",
|
||||
});
|
||||
},
|
||||
handleSupport() {
|
||||
this.$q.notify({
|
||||
type: "info",
|
||||
message:
|
||||
"Envie um email para suporte@clipper.ai e responderemos rapidamente.",
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Estilos personalizados para o formulário de login */
|
||||
.q-drawer {
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
|
||||
<style scoped lang="scss">
|
||||
.login-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
background: radial-gradient(
|
||||
circle at top left,
|
||||
rgba(127, 86, 217, 0.18),
|
||||
transparent 55%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at bottom right,
|
||||
rgba(83, 56, 158, 0.22),
|
||||
transparent 45%
|
||||
),
|
||||
#f5f6fa;
|
||||
}
|
||||
|
||||
/* Ajustes para responsividade */
|
||||
@media (max-width: 700px) {
|
||||
.q-drawer {
|
||||
width: 100% !important;
|
||||
.login-page__container {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
|
||||
width: min(1100px, 92vw);
|
||||
gap: clamp(32px, 6vw, 56px);
|
||||
align-items: center;
|
||||
padding: clamp(32px, 5vw, 64px) 0;
|
||||
}
|
||||
|
||||
.login-page__hero {
|
||||
color: #f8f9ff;
|
||||
background: linear-gradient(160deg, #53389e 0%, #7f56d9 60%, #b692f6 100%);
|
||||
border-radius: 32px;
|
||||
padding: clamp(32px, 5vw, 56px);
|
||||
box-shadow: 0 24px 64px rgba(83, 56, 158, 0.35);
|
||||
}
|
||||
|
||||
.login-page__hero h2 {
|
||||
font-size: clamp(28px, 3vw, 36px);
|
||||
font-weight: 700;
|
||||
margin: 32px 0 16px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.login-page__hero p {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: rgba(255, 255, 255, 0.82);
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.login-page__brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.login-page__brand-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.login-page__brand-subtitle {
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.72);
|
||||
}
|
||||
|
||||
.login-page__stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.login-page__stat-value {
|
||||
display: block;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.login-page__stat-label {
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255, 255, 255, 0.72);
|
||||
}
|
||||
|
||||
.login-card__wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: 100%;
|
||||
border-radius: 24px;
|
||||
padding: clamp(28px, 4vw, 40px);
|
||||
box-shadow: 0 22px 40px rgba(16, 24, 40, 0.12);
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
}
|
||||
|
||||
.login-card__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.login-card__badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(127, 86, 217, 0.12);
|
||||
color: #53389e;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.login-card__header h1 {
|
||||
font-size: clamp(24px, 3vw, 30px);
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: #101828;
|
||||
}
|
||||
|
||||
.login-card__header p {
|
||||
margin: 0;
|
||||
color: #475467;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.login-card__form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.login-card__links {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.login-card__error {
|
||||
margin-top: 18px;
|
||||
color: #f97066;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.login-card__footer {
|
||||
margin-top: 28px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
color: #475467;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
body.body--dark .login-page {
|
||||
background: radial-gradient(
|
||||
circle at top left,
|
||||
rgba(83, 56, 158, 0.5),
|
||||
transparent 55%
|
||||
),
|
||||
#0b1120;
|
||||
}
|
||||
|
||||
body.body--dark .login-card {
|
||||
background: rgba(16, 24, 40, 0.94);
|
||||
box-shadow: 0 22px 44px rgba(12, 18, 32, 0.65);
|
||||
}
|
||||
|
||||
body.body--dark .login-card__header h1 {
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
}
|
||||
|
||||
body.body--dark .login-card__header p,
|
||||
body.body--dark .login-card__footer {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.login-page__container {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.q-page-container {
|
||||
padding-right: 0 !important;
|
||||
.login-card {
|
||||
max-width: 460px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Estilo para o botão de login */
|
||||
.q-btn--actionable {
|
||||
transition: transform 0.2s, opacity 0.2s;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.login-page {
|
||||
background: #f5f6fa;
|
||||
}
|
||||
|
||||
.q-btn--actionable:active:not(.disabled) {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
.login-page__container {
|
||||
width: 100%;
|
||||
padding: 24px 16px 64px;
|
||||
}
|
||||
|
||||
/* Melhorias na acessibilidade */
|
||||
.q-field--filled .q-field__control {
|
||||
border-radius: 8px;
|
||||
}
|
||||
.login-page__hero {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Efeito de hover nos inputs */
|
||||
.q-field--filled:not(.q-field--readonly):hover .q-field__control:before {
|
||||
border-color: rgba(255, 255, 255, 0.7) !important;
|
||||
.login-card {
|
||||
border-radius: 20px;
|
||||
padding: 28px 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user