feat: dar feedback para o user (facebook)

apps/container/src/layouts/AppBar/AppBar.vue

@@ -1,46 +1,24 @@
 <template>
   <v-app>
-    <v-navigation-drawer
-      v-if="user?.confirmed"
-      v-model="drawer"
-      color="navigation"
-      width="240"
-    >
+    <v-navigation-drawer v-if="user?.confirmed" v-model="drawer" color="navigation" width="240">
       <v-list>
         <div class="py-4 d-flex justify-center align-center">
-          <img
-            class="logo-white"
-            src="@/assets/logo_white.svg"
-            height="44"
-            alt="logo do UFABC Next"
-          />
+          <img class="logo-white" src="@/assets/logo_white.svg" height="44" alt="logo do UFABC Next" />
         </div>
         <v-divider />
-        <v-list-item
-          v-for="item in internalNavigationItems"
-          :to="item.route"
-          :key="item.title"
-        >
+        <v-list-item v-for="item in internalNavigationItems" :to="item.route" :key="item.title">
           <v-layout class="d-flex">
             <v-icon :icon="item.icon" class="mr-3" />
             <p class="font-weight-medium text-caption">{{ item.title }}</p>
-            <span
-              v-if="item.releaseDate?.add(3, 'month').isAfter(dayjs())"
-              class="featured-chip font-weight-black"
-              >Novo</span
-            >
+            <span v-if="item.releaseDate?.add(3, 'month').isAfter(dayjs())"
+              class="featured-chip font-weight-black">Novo</span>
           </v-layout>
         </v-list-item>
       </v-list>
       <v-divider />
       <v-list>
-        <v-list-item
-          v-for="item in externalNavigationItems"
-          :href="item.url"
-          :target="item.url && '_blank'"
-          :rel="item.url && 'noopener noreferrer'"
-          :key="item.title"
-        >
+        <v-list-item v-for="item in externalNavigationItems" :href="item.url" :target="item.url && '_blank'"
+          :rel="item.url && 'noopener noreferrer'" :key="item.title">
           <v-layout>
             <v-icon :icon="item.icon" class="mr-3" />
             <p class="font-weight-medium text-caption">{{ item.title }}</p>
@@ -49,35 +27,16 @@
       </v-list>
     </v-navigation-drawer>
 
-    <v-app-bar
-      v-if="user?.confirmed"
-      app
-      height="min-content"
-      class="py-2 header"
-    >
-      <v-app-bar-nav-icon
-        app
-        variant="text"
-        color="primary"
-        @click.stop="drawer = !drawer"
-        class="d-lg-none"
-      ></v-app-bar-nav-icon>
+    <v-app-bar v-if="user?.confirmed" app height="min-content" class="py-2 header">
+      <v-app-bar-nav-icon app variant="text" color="primary" @click.stop="drawer = !drawer"
+        class="d-lg-none"></v-app-bar-nav-icon>
 
       <v-spacer></v-spacer>
 
-      <img
-        class="logo-white"
-        src="@/assets/logo.svg"
-        height="32"
-        alt="logo do UFABC Next"
-      />
+      <img class="logo-white" src="@/assets/logo.svg" height="32" alt="logo do UFABC Next" />
 
       <v-spacer></v-spacer>
-      <v-btn
-        color="primary"
-        icon="mdi-dots-vertical"
-        aria-label="Expandir menu de usuário"
-      >
+      <v-btn color="primary" icon="mdi-dots-vertical" aria-label="Expandir menu de usuário">
         <v-icon></v-icon>
         <v-menu activator="parent">
           <v-list class="px-2">
@@ -95,13 +54,8 @@
               </v-layout>
             </v-list-item>
             <v-list-item>
-              <v-btn
-                @click="handleLogout"
-                prepend-icon="mdi-exit-to-app"
-                variant="text"
-                class="text-capitalize text-body-2"
-                >Sair</v-btn
-              >
+              <v-btn @click="handleLogout" prepend-icon="mdi-exit-to-app" variant="text"
+                class="text-capitalize text-body-2">Sair</v-btn>
             </v-list-item>
           </v-list>
         </v-menu>

apps/container/src/views/Facebook/FacebookView.vue

@@ -1,9 +1,182 @@
-<template>
-  <h1>Teste {{ name }}</h1>
-</template>
-
 <script setup lang="ts">
+import { useMutation } from '@tanstack/vue-query';
 import { ref } from 'vue';
 
-const name = ref('joabe');
+import { Users } from 'services';
+import { z } from 'zod';
+
+import { toTypedSchema } from '@vee-validate/zod';
+import { useForm, useField } from 'vee-validate';
+import { useRouter } from 'vue-router';
+import { useAuth } from '@/stores/useAuth';
+import { ElMessage } from 'element-plus';
+const redirectToHome = () => (windowLocation.pathname = '/');
+
+const { authenticate } = useAuth();
+const router = useRouter();
+const windowLocation = window.location;
+
+const validationSchema = toTypedSchema(
+  z.object({
+    email: z
+      .string({
+        required_error: 'Este campo é obrigatório',
+        invalid_type_error: 'Digite um email válido',
+      })
+      .email({
+        message: 'Por favor, digite um email válido',
+      }),
+    ra: z.string({ required_error: 'Este campo é obrigatório' }),
+  }),
+);
+
+const { handleSubmit } = useForm({
+  validationSchema,
+});
+const { value: emailField, errorMessage: emailErrorMessage } =
+  useField('email');
+const { value: raField, errorMessage: raErrorMessage } = useField('ra');
+
+const facebookNotFound = ref(false);
+const { mutate: mutateFacebook, isPending: isPendingSubmit } = useMutation({
+  mutationFn: Users.facebookAuth,
+  onSuccess({ data }) {
+    ElMessage({
+      message: 'Realizando seu login',
+      type: 'success',
+      showClose: true,
+      duration: 5_000,
+    });
+    authenticate.value(data.token);
+    router.push('/reviews');
+  },
+  onError() {
+    window.Toaster.error('Login com Facebook não encontrado');
+    facebookNotFound.value = true;
+  },
+});
+
+const onSubmit = handleSubmit(({ email, ra }) => mutateFacebook({ email, ra }));
 </script>
+
+<template>
+  <v-container class="container">
+    <v-row class="d-flex mb-5 flex-grow-0">
+      <v-col xs="12" class="d-flex align-center justify-space-between">
+        <img height="32" src="@/assets/logo.svg" alt="logo do UFABC Next" />
+      </v-col>
+    </v-row>
+    <v-row class="w-100 h-100 justify-center justify-md-start">
+      <v-col cols="12" md="6" class="d-flex align-center justify-center">
+        <img
+          src="@/assets/signup.svg"
+          class="w-100"
+          style="max-width: 400px"
+          alt="Pessoa meditando na frente do computador"
+        />
+      </v-col>
+
+      <v-col
+        cols="12"
+        md="6"
+        class="mt-6 d-flex flex-column ga-4"
+        v-if="!facebookNotFound"
+      >
+        <div class="d-flex align-center w-100 flex-column">
+          <img
+            style="width: 50px; height: 50px"
+            src="https://upload.wikimedia.org/wikipedia/en/0/04/Facebook_f_logo_%282021%29.svg"
+            alt="Logo do Facebook"
+          />
+          <h1 class="text-center">
+            Houve um problema com seu login através do Facebook
+          </h1>
+          <p class="step-subtitle text-center">
+            Mas não se preocupe, estamos aqui para te ajudar a recuperar o
+            acesso à sua conta.
+          </p>
+        </div>
+
+        <v-form @submit.prevent="onSubmit">
+          <v-text-field
+            v-model="emailField"
+            label="Insira seu email do Facebook"
+            variant="solo"
+            class="w-100"
+            prepend-inner-icon="mdi-email"
+            :error-messages="emailErrorMessage"
+          >
+          </v-text-field>
+
+          <v-text-field
+            v-model="raField"
+            label="Insira seu RA"
+            variant="solo"
+            class="w-100"
+            placeholder="11201911111"
+            prepend-inner-icon="mdi-school"
+            :error-messages="raErrorMessage"
+          />
+          <v-col md="6" class="d-flex justify-center px-0 px-md-2">
+            <v-btn
+              color="primary"
+              type="submit"
+              style="text-transform: unset !important"
+              class="flex-grow-1"
+              size="x-large"
+              :loading="isPendingSubmit"
+              >Enviar</v-btn
+            >
+          </v-col>
+        </v-form>
+      </v-col>
+
+      <v-col v-else cols="12" md="6" class="mt-6 d-flex flex-column ga-4">
+        <div class="d-flex align-center w-100 flex-column">
+          <img
+            style="width: 50px; height: 50px"
+            src="https://upload.wikimedia.org/wikipedia/en/0/04/Facebook_f_logo_%282021%29.svg"
+            alt="Logo do Facebook"
+          />
+          <h1 class="text-center mb-4">
+            Sua conta do UFABC Next não foi encontrada
+          </h1>
+          <p class="step-subtitle text-center mb-5">
+            Identificamos que você não tem um cadastro no UFABC Next através do
+            Facebook. <br />
+            Para continuar, volte para a home e
+            <strong>crie uma conta</strong> utilizando o
+            <strong>Google</strong>.
+          </p>
+          <div>
+            <v-btn
+              color="white"
+              @click="facebookNotFound = false"
+              style="text-transform: unset !important"
+              class="flex-grow-1 mr-4"
+              size="x-large"
+              >Tentar novamente</v-btn
+            >
+            <v-btn
+              color="primary"
+              @click="redirectToHome()"
+              style="text-transform: unset !important"
+              class="flex-grow-1"
+              size="x-large"
+              >Voltar para a home</v-btn
+            >
+          </div>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<style scoped lang="css">
+.container {
+  min-height: calc(100vh - 64px);
+  min-height: calc(100svh - 64px);
+  display: flex;
+  flex-direction: column;
+}
+</style>

apps/react/src/components/Calengrade/utils/calendar.ts

@@ -37,13 +37,14 @@ const dayOfWeekReturnMappings = {
 type DayOfWeekReturnMappings = typeof dayOfWeekReturnMappings;
 
 const getDayInfo = (day: string | null) => {
+  let value;
   Object.keys(dayOfWeekReturnMappings).forEach((dayOfWeek) => {
     if (day?.indexOf(dayOfWeek) !== -1) {
-      return dayOfWeekReturnMappings[
-        dayOfWeek as keyof DayOfWeekReturnMappings
-      ];
+      value =
+        dayOfWeekReturnMappings[dayOfWeek as keyof DayOfWeekReturnMappings];
     }
   });
+  if (value) return value;
   return dayOfWeekReturnMappings.Domingo;
 };
 
@@ -58,28 +59,28 @@ export const handleCalendar = ({ classes, startDate, endDate }: Calendar) => {
 
   classes.forEach((subject) => {
     subject.times.forEach((time) => {
-      const startOfPeriod = dayjs(`${startDate}T00:00:00.000`);
+      let startOfPeriod = dayjs(`${startDate}T00:00:00.000`);
 
       const day = getDayInfo(time.day).number;
 
-      if (startOfPeriod.day() <= day)
-        startOfPeriod.add(day - startOfPeriod.day(), 'days');
-      else {
-        startOfPeriod.add(startOfPeriod.day() + day, 'days');
+      if (startOfPeriod.day() <= day) {
+        startOfPeriod = startOfPeriod.add(day - startOfPeriod.day(), 'days');
+      } else {
+        startOfPeriod = startOfPeriod.add(startOfPeriod.day() + day, 'days');
       }
 
       if (time.repeat?.indexOf('quinzenal (II)') !== -1) {
-        startOfPeriod.add(7, 'days');
+        startOfPeriod = startOfPeriod.add(7, 'days');
       }
 
-      const start = startOfPeriod.clone();
-      const end = startOfPeriod.clone();
+      let start = startOfPeriod.clone();
+      let end = startOfPeriod.clone();
 
-      start.add(Number(time.start?.split(':')[0]), 'hours');
-      start.add(Number(time.start?.split(':')[1]), 'minutes');
+      start = start.add(Number(time.start?.split(':')[0]), 'hours');
+      start = start.add(Number(time.start?.split(':')[1]), 'minutes');
 
-      end.add(Number(time.end?.split(':')[0]), 'hours');
-      end.add(Number(time.end?.split(':')[1]), 'minutes');
+      end = end.add(Number(time.end?.split(':')[0]), 'hours');
+      end = end.add(Number(time.end?.split(':')[1]), 'minutes');
 
       let recurrenceRule = `FREQ=WEEKLY;`;
       recurrenceRule += `BYDAY=${getDayInfo(time.day).short};`;

apps/react/src/components/Calengrade/utils/summary.ts

@@ -13,13 +13,16 @@ const DATE_REGEX = /([01]?[0-9]|2[0-3]):[0-5][0-9](:[0-5][0-9])?/gi;
 const REPEAT_REGEX = /(?!\s-\s)(semanal|quinzenal\s\(i\)|quinzenal\s\(ii\))/gi;
 
 const matchOrFallback =
-  (string: string) => (regex: RegExp, fallback: string | null) => {
+  (string: string) =>
+  (regex: RegExp, fallback: string | null, index = 0) => {
     const match = string.match(regex);
-    return match ? match[0] : fallback;
+    return match ? match[index] : fallback;
   };
 
-const matchOrNull = (string: string) => (regex: RegExp) =>
-  matchOrFallback(string)(regex, null);
+const matchOrNull =
+  (string: string) =>
+  (regex: RegExp, index = 0) =>
+    matchOrFallback(string)(regex, null, index);
 
 export const handleSummary = (summary: string): Classes => {
   // Get all classes codes
@@ -95,7 +98,7 @@ export const handleSummary = (summary: string): Classes => {
         .map((t) => ({
           day: matchOrNull(t)(DAY_REGEX),
           start: matchOrNull(t)(DATE_REGEX),
-          end: matchOrNull(t)(DATE_REGEX),
+          end: matchOrNull(t)(DATE_REGEX, 1),
           repeat: matchOrNull(t)(REPEAT_REGEX),
         }))
         .filter((time) => time.day && time.start && time.end && time.repeat),