Merge branch 'main' of https://github.com/codersforcauses/elucidate into i139_password_reset_app

Author: jsun1590

.github/workflows/backend.yml

@@ -57,7 +57,7 @@ jobs:
 
       - name: Cache .venv 📦
         id: cached-poetry-dependencies
-        uses: actions/cache@v3.0.5
+        uses: actions/cache@v3.0.6
         with:
           path: server/.venv
           key: venv-${{ runner.os }}-${{ hashFiles('**/poetry.lock') }}

.github/workflows/e2e.yml

@@ -46,7 +46,7 @@ jobs:
         working-directory: client
 
       - name: Cache node_modules 📦
-        uses: actions/cache@v3.0.5
+        uses: actions/cache@v3.0.6
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -73,7 +73,7 @@ jobs:
 
       - name: Cache .venv 📦
         id: cached-poetry-dependencies
-        uses: actions/cache@v3.0.5
+        uses: actions/cache@v3.0.6
         with:
           path: server/.venv
           key: venv-${{ runner.os }}-${{ hashFiles('**/poetry.lock') }}

.github/workflows/frontend.yml

@@ -42,7 +42,7 @@ jobs:
         run: echo "::set-output name=dir::$(yarn cache dir)"
 
       - name: Cache node_modules 📦
-        uses: actions/cache@v3.0.5
+        uses: actions/cache@v3.0.6
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}

client/.eslintrc.js

@@ -10,4 +10,7 @@ module.exports = {
     sourceType: 'module',
   },
   plugins: ['vue', 'cypress'],
+  rules: {
+    'vue/attribute-hyphenation': ['never'],
+  },
 };

client/.yarnrc.yml

@@ -0,0 +1,37 @@
+<template>
+  <ul class="bg-red p-3 my-6 text-neutral-100 font-bold rounded-md list-disc">
+    <h1>
+      <font-awesome-icon :icon="['fas', 'circle-exclamation']" />
+      <slot> Please fix the following errors: </slot>
+    </h1>
+    <li
+      v-for="(messages, error) in errors"
+      :key="error.toString()"
+      class="ml-8 mt-2"
+    >
+      <h2 class="">
+        {{ (error.charAt(0).toUpperCase() + error.slice(1)).replace(/_/, ' ') }}
+      </h2>
+      <p
+        v-for="message in messages"
+        :key="message.toString()"
+        class="ml-8 font-normal"
+      >
+        {{ message }}
+      </p>
+
+      <p></p>
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  props: {
+    errors: {
+      type: Array[Error],
+      required: true,
+    },
+  },
+};
+</script>

client/components/Auth/AuthAlert.vue

@@ -1,13 +1,36 @@
 <template>
-  <div
-    class="flex flex-col items-center w-11/12 max-w-lg bg-green drop-shadow-lg"
-  >
-    <slot></slot>
+  <div class="w-1/2 max-w-lg">
+    <AuthAlert v-if="errors.length !== 0" :errors="errors">
+      {{ errorHeader }}
+    </AuthAlert>
+
+    <ValidationObserver
+      v-slot="v"
+      tag="form"
+      class="flex flex-col px-6 py-8 bg-green drop-shadow-lg"
+      @submit.prevent="(e) => $emit('submit', e)"
+    >
+      <slot :invalid="v.invalid" />
+    </ValidationObserver>
   </div>
 </template>
 
 <script>
+import { ValidationObserver } from 'vee-validate';
 export default {
   name: 'AuthForm',
+  components: {
+    ValidationObserver,
+  },
+  props: {
+    errors: {
+      type: Array[Error],
+      default: () => [],
+    },
+    errorHeader: {
+      type: String,
+      default: undefined,
+    },
+  },
 };
 </script>

client/components/Auth/AuthFooter.vue

@@ -0,0 +1,26 @@
+<template>
+  <button
+    type="submit"
+    :class="
+      disabled
+        ? 'text-darkgrey bg-lightgrey border-darkgrey'
+        : 'text-red bg-white border-red'
+    "
+    class="place-self-center text-l font-bold w-24 h-8 rounded border border-solid my-5"
+    :disabled="disabled"
+  >
+    <slot />
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'AuthSubmit',
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>