Merge pull request #57 from NunnaTech/revert-56-develop

Revert "Develop"

.devcontainer/devcontainer.json

@@ -36,7 +36,9 @@
 					"sonarsource.sonarlint-vscode",
 					"eamodio.gitlens",
 					"kisstkondoros.vscode-gutter-preview",
+
 					"vue.volar",
+					"vue.vscode-typescript-vue-plugin",
 					"mgmcdermott.vscode-language-babel"
 				]
 		}

.github/workflows/deploy.yml

@@ -14,13 +14,6 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: "20"
-      # Create .env file before build project 
-      - name: 'Create env file'
-        run: |
-          touch .env
-          echo RECAPTCHA_SITE_KEY=${{ secrets.RECAPTCHA_SITE_KEY }} >> .env
-          echo DEVTOOLS=${{ vars.DEVTOOLS }} >> .env
-          echo API_FORM_URL=${{ vars.API_FORM_URL }} >> .env
       # Pick your own package manager and build script
       - run: npm install
       - run: npx nuxt build --preset github_pages

.gitignore

@@ -248,7 +248,4 @@ $RECYCLE.BIN/
 # Windows shortcuts
 *.lnk
 
-# Environment variables
-.env
-
 # End of https://www.toptal.com/developers/gitignore/api/windows,linux,webstorm,intellij,nuxtjs

app.vue

@@ -42,7 +42,6 @@ export default {
   },
   mounted() {
     let lang = localStorage.getItem('lang');
-
     if(!lang){
       let lang = 'mx'
       localStorage.setItem('lang', lang);

components/ContactBlock.vue

@@ -46,12 +46,12 @@
 
       <div v-if="showSuccessMessage" role="alert" class="alert alert-success">
         <MdiIcon icon="mdiCheckCircle" />
-        <span class="w-100 text-center md:text-end" v-t="'Contact.form.success'" />
+        <span class="w-100 text-end" v-t="'Contact.form.success'" />
       </div>
 
       <div v-if="showErrorMessage" role="alert" class="alert alert-error">
         <MdiIcon icon="mdiAlphaXCircle" />
-        <span class="w-100 text-center md:text-end" v-t="'Contact.form.error'" />
+        <span class="w-100 text-end" v-t="'Contact.form.error'" />
       </div>
     </div>
   </div>
@@ -66,29 +66,9 @@
 <script>
 import {MixinContactBlock} from "../mixins/MixinContactBlock";
 import {ContactBlockData} from "../data-components/ContactBlockData";
-import { useReCaptcha } from "vue-recaptcha-v3";
 
 export default {
   name: "ContactBlock",
-  setup() {
-    // initialize a instance
-    const recaptchaInstance = useReCaptcha();
-
-    const recaptcha = async () => {
-        // optional you can await for the reCaptcha load
-        await recaptchaInstance?.recaptchaLoaded();
-
-        // get the token, a custom action could be added as argument to the method
-        const token = await recaptchaInstance?.executeRecaptcha('yourActionHere');
-
-        return token;
-    };
-
-    return {
-        config: useRuntimeConfig(),
-        recaptcha 
-    }
-  },
   data() {
     return ContactBlockData;
   },

components/ProjectsBlock.vue

@@ -1,16 +1,12 @@
 <script>
+import {API_FORM_URL} from "../constants";
 import ProjectCard from "./commons/ProjectCard.vue";
 
 export default {
   name: "ProjectsBlock",
   components: {
     ProjectCard
   },
-  setup() {
-    return {
-      config: useRuntimeConfig(),
-    }
-  }, 
   data() {
     return {
       projects: []
@@ -31,7 +27,7 @@ export default {
   },
   methods: {
     getProjects() {
-      fetch(`${this.config.public.API_FORM_URL}/projects?lang=${this.lang}`)
+      fetch(`${API_FORM_URL}/projects?lang=${this.lang}`)
           .then(response => response.json())
           .then(data => {
             this.projects = data.data;

components/ServicesBlock.vue

@@ -6,7 +6,7 @@
         <div :key="i" v-for="({icon, title, description, color}, i) in $tm($options.name)" :class="`my-7 grid md:grid-flow-row-dense md:grid-rows-1 md:grid-cols-6 text-justify ${setPositionClasses('alignment-text', i)}`">
           <div :class="`my-7 w-full flex justify-center ${setPositionClasses('alignment-div-and-icon', i)}`">
             <div
-                :class="`flex items-center justify-center w-16 h-16 rounded-full ${BG_COLORS[$rt(color)]} ${TXT_COLOR[$rt(color)]}`">
+                :class="`flex items-center justify-center w-16 h-16 rounded-full ${BG_COLORS[this.$rt(color)]} ${TXT_COLOR[this.$rt(color)]}`">
               <MdiIcon :icon="$rt(icon)" class="max-w-8 max-h-7"/>
             </div>
           </div>

constants.js

@@ -1,3 +1,6 @@
+export const API_FORM_URL = 'https://contacts-nunna.up.railway.app/api/v1';
+// export const API_FORM_URL = 'http://localhost:3000/api/v1';
+
 export const BG_COLORS = {
     'teal': 'bg-teal-500 dark:bg-opacity-50',
     'violet': 'bg-violet-500 dark:bg-opacity-50',

data-components/ContactBlockData.js

@@ -1,4 +1,4 @@
-export const ContactBlockData = {    
+export const ContactBlockData = {
     formData: {
         name: "",
         email: "",

mixins/MixinContactBlock.js

@@ -1,3 +1,5 @@
+import {API_FORM_URL} from "../constants";
+
 export const MixinContactBlock = {
     mounted() {
         this.userAgent = window.navigator.userAgent;
@@ -25,22 +27,17 @@ export const MixinContactBlock = {
             return emailRegex.test(email);
         },
 
-        async handleSubmit(event) {
+        handleSubmit(event) {
             event.preventDefault();
-            this.validateForm();          
-
+            this.validateForm();
             if (!Object.values(this.errors).some((error) => error !== "")) {
                 this.sendFormData();
             }
         },
-
-        async sendFormData() {
+        sendFormData() {
             this.isSubmitting = true;
 
-            // get the token on your method
-            const token = await this.recaptcha();
-
-            fetch(`${this.config.public.API_FORM_URL}/contacts`, {
+            fetch(`${API_FORM_URL}/contacts`, {
                 method: "POST",
                 headers: {
                     "Content-Type": "application/json",
@@ -49,8 +46,7 @@ export const MixinContactBlock = {
                     fullname: this.formData.name,
                     email: this.formData.email,
                     message: this.formData.message,
-                    userAgent: this.userAgent,
-                    'g-recaptcha-response': token
+                    userAgent: this.userAgent
                 }),
             })
                 .then((response) => {

nuxt.config.js

@@ -1,25 +1,10 @@
 export default defineNuxtConfig({
-    devtools: { enabled: process.env.DEVTOOLS ?? false },
     buildModules: ['nuxt-compress'],
-    plugins: ['~/plugins/google-recaptcha.js'],
-    modules: [
-        '@nuxtjs/tailwindcss', 
-        '@nuxtjs/color-mode', 
-        '@nuxtjs/robots', 
-        '@nuxtjs/i18n',
-        'nuxt-mdi',
-    ],
+    modules: ['@nuxtjs/tailwindcss', '@nuxtjs/color-mode', '@nuxtjs/robots', '@nuxtjs/i18n', 'nuxt-mdi'],
     colorMode: {
         dataValue: 'theme', // activate data-theme in <html> tag
         preference: 'nunnadark' // default theme
     },
-    runtimeConfig: {
-        RECAPTCHA_SITE_KEY: process.env.RECAPTCHA_SITE_KEY,
-
-        public: {
-            API_FORM_URL: process.env.API_FORM_URL
-        }
-    },
     i18n: {
         locales: [
             { code: 'mx', iso: 'es-MX', file: 'mx.json' },

package.json

@@ -14,8 +14,7 @@
     "moment": "^2.30.1",
     "nuxt": "^3.0.0",
     "theme-change": "^2.5.0",
-    "vue": "^3.4.15",
-    "vue-recaptcha-v3": "^2.0.1"
+    "vue": "^3.4.15"
   },
   "devDependencies": {
     "@nuxtjs/color-mode": "^3.3.0",