init repo

src/routes/auth/Login.vue

@@ -0,0 +1,166 @@
+<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="email"
+              type="email"
+              label="E-mail"
+              lazy-rules
+              :rules="[(val) => !!val || 'Campo obrigatório']"
+              class="q-mb-md"
+              dark
+              filled
+            >
+              <template v-slot:prepend>
+                <q-icon name="mail" />
+              </template>
+            </q-input>
+
+            <q-input
+              v-model="password"
+              :type="showPassword ? 'text' : 'password'"
+              label="Senha"
+              lazy-rules
+              :rules="[(val) => !!val || 'Campo obrigatório']"
+              class="q-mb-lg"
+              dark
+              filled
+            >
+              <template v-slot:prepend>
+                <q-icon name="lock" />
+              </template>
+
+              <template v-slot:append>
+                <q-icon
+                  :name="showPassword ? 'visibility_off' : 'visibility'"
+                  class="cursor-pointer"
+                  @click="showPassword = !showPassword"
+                />
+              </template>
+            </q-input>
+
+            <Button
+              type="submit"
+              label="Entrar"
+              color="white"
+              textColor="primary"
+              full-width
+              :loading="loading"
+            />
+          </q-form>
+
+          <p v-if="error" class="text-negative q-mt-md">{{ error }}</p>
+        </div>
+      </q-scroll-area>
+    </q-drawer>
+
+    <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>
+</template>
+
+<script>
+import Button from "@components/Button";
+
+export default {
+  name: "LoginView",
+  components: {
+    Button,
+  },
+  data() {
+    return {
+      leftDrawerOpen: true,
+      email: "",
+      password: "",
+      showPassword: false,
+      error: "",
+      loading: false,
+    };
+  },
+  methods: {
+    handleLogin() {
+      this.error = "";
+
+      if (!this.email || !this.password) {
+        this.error = "Por favor, preencha todos os campos";
+        return;
+      }
+
+      this.loading = true;
+
+      // setTimeout(() => {
+      //   try {
+      //     localStorage.setItem("auth_token", "dummy_token");
+
+      //     const redirectPath = this.$route.query.redirect || "/";
+      //     this.$router.push(redirectPath);
+      //   } catch (err) {
+      //     this.error = err.message || "Erro ao fazer login. Tente novamente.";
+      //   } finally {
+      //     this.loading = false;
+      //   }
+      // }, 1000);
+    },
+  },
+  mounted() {
+    if (window.innerWidth < 700) {
+      this.leftDrawerOpen = false;
+    }
+  },
+};
+</script>
+
+<style>
+/* Estilos personalizados para o formulário de login */
+.q-drawer {
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+}
+
+/* Ajustes para responsividade */
+@media (max-width: 700px) {
+  .q-drawer {
+    width: 100% !important;
+  }
+
+  .q-page-container {
+    padding-right: 0 !important;
+  }
+}
+
+/* Estilo para o botão de login */
+.q-btn--actionable {
+  transition: transform 0.2s, opacity 0.2s;
+}
+
+.q-btn--actionable:active:not(.disabled) {
+  transform: scale(0.98);
+}
+
+/* Melhorias na acessibilidade */
+.q-field--filled .q-field__control {
+  border-radius: 8px;
+}
+
+/* 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;
+}
+</style>