fix #120, fix #114, fix #133, fix #135, fix #136 (#152)

* Removue unused data * added texts * Fix nabar z-index * Fix reset password * Added styles * fix #120, fix #114, fix #133, fix #135, fix #136 --------- Co-authored-by: Lupu Gheorghe <[email protected]>
code4romania · Jul 26, 2023 · 5d916e6 · 5d916e6
1 parent 74e7e5e
commit 5d916e6
Show file tree

Hide file tree

Showing 9 changed files with 117 additions and 37 deletions.
diff --git a/resources/js/Components/form/Avatar.vue b/resources/js/Components/form/Avatar.vue
@@ -2,7 +2,6 @@
     <div class="flex items-center gap-x-4">
         <img v-if="preview" :src="preview" alt="File Preview" class="object-cover w-12 h-12 rounded-full" />
         <SvgLoader v-else name="avatar" class="w-12 h-12" />
-
         <label
             :for="id"
             :class="['relative inline-flex text-gray-700 bg-white ring-inset ring-1 ring-gray-300 items-center justify-center px-4 py-2 text-sm font-medium border border-transparent rounded-md']">
@@ -11,14 +10,17 @@
                 :id="id"
                 type="file"
                 @change="handleFileChange"
-                class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
+                class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+            />
+
+
         </label>
     </div>
 </template>
 
 <script setup>
     /** Import from vue. */
-    import { ref } from 'vue';
+    import { ref, onMounted } from 'vue';
 
     /** Import Components. */
     import SvgLoader from '@/Components/SvgLoader.vue';
@@ -27,7 +29,8 @@
     const props = defineProps({
         label: String,
         id: String,
-        form: Object
+        form: Object,
+        recivedFile: [Object, String]
     });
 
     /** Image preview. */
@@ -53,4 +56,24 @@
         /** Emit file. */
         emit('upload', file);
     }
+
+    onMounted(() => {
+        const responseFile = props.recivedFile;
+
+        if(!responseFile) {
+            return
+        }
+
+        const file = new File(
+            [responseFile],
+            responseFile.name,
+            {
+                type: responseFile.type,
+                lastModified: responseFile.lastModified,
+            }
+        );
+        const reader = new FileReader();
+        reader.onload = (() => preview.value = reader.result);
+        reader.readAsDataURL(file);
+    })
 </script>
diff --git a/resources/js/Components/form/ButtonFile.vue b/resources/js/Components/form/ButtonFile.vue
@@ -19,12 +19,13 @@
 
 <script setup>
     /** Import form vue. */
-    import { ref } from 'vue';
+    import { ref, onMounted } from 'vue';
 
     /** Component props. */
     const props = defineProps({
         label: String,
         id: String,
+        recivedFile: [Object, String]
     });
 
     /** Image preview. */
@@ -46,4 +47,11 @@
         /** Emit file. */
         emit('upload', file);
     }
+
+    onMounted(() => {
+        if (!props.recivedFile) {
+            return
+        }
+        name.value = props.recivedFile.name.slice(0, 20)
+    })
 </script>
diff --git a/resources/js/Components/registration/Step2.vue b/resources/js/Components/registration/Step2.vue
@@ -37,6 +37,7 @@
             hasAutocomplete="password"
             :error="form.errors['user.password']"
         />
+
         <Input
             :label="$t('password_confirmation')"
             id="password_confirmation"
@@ -48,6 +49,27 @@
             :error="form.errors['user.password_confirmation']"
         />
 
+        <!-- Terms -->
+        <label v-if="'donor' == form.type" class="flex items-center space-x-2">
+            <Checkbox name="terms" v-model:checked="form.terms" />
+            <div class="flex items-center space-x-2 text-sm">
+                <span class="text-gray-700">{{ $t('i_agree') }}</span>
+                <Link
+                    :href="route('terms')"
+                    class="text-primary-500"
+                >
+                    {{ $t('terms_link') }}
+                </Link>
+                <span class="text-red-500">*</span>
+                </div>
+        </label>
+
+        <!-- Subscribe -->
+        <label v-if="'donor' == form.type" class="flex items-center space-x-2">
+            <Checkbox name="subscribe" v-model:checked="form.subscribe" />
+            <span class="text-sm text-gray-700">{{ $t('register_subscribe') }}</span>
+        </label>
+
         <div v-if="'ong' == form.type" class="flex items-center justify-between mt-6 gap-x-4">
             <PrimaryButton
                 background="white"
@@ -92,11 +114,15 @@
 </template>
 
 <script setup>
+    /** Import from inertia. */
+    import { Link } from '@inertiajs/vue3';
+
     /** Import components. */
     import Input from '@/Components/form/Input.vue';
     import PrimaryButton from '@/Components/buttons/PrimaryButton.vue';
     import SecondaryButton from '@/Components/buttons/SecondaryButton.vue';
     import SvgLoader from '@/Components/SvgLoader.vue';
+    import Checkbox from '@/Components/form/Checkbox.vue';
 
     const props = defineProps({
         form: Object,

diff --git a/resources/js/Components/registration/Step3.vue b/resources/js/Components/registration/Step3.vue
@@ -33,6 +33,7 @@
                 :label="$t('upload_logo')"
                 @upload="ongLogo"
                 :form="form"
+                :recivedFile="form.ong.logo"
             />
         </div>
 
@@ -50,15 +51,14 @@
 
         <!-- Activity domains -->
         <div>
-            <MultiSelectObjectFilter
-                class="w-full"
+            <SelectMultiple
+                class="w-full z-101"
                 :label="$t('domains')"
-                v-model="form.ong.activity_domains_ids"
+                type="object"
                 :options="activity_domains"
-                id="activity-domains"
-                ref="activityDomains"
+                v-model="form.ong.activity_domains_ids"
+                :error="form.errors['ong.activity_domains_ids']"
             />
-            <p v-show="form.errors['ong.activity_domains_ids']" class="mt-2 text-sm text-red-600">{{ form.errors['ong.activity_domains_ids'] }}</p>
         </div>
 
         <!-- Statut -->
@@ -68,6 +68,7 @@
                 :label="$t('upload_file')"
                 @upload="ongStatute"
                 v-model="form.ong.statute"
+                :recivedFile="form.ong.statute"
             />
             <p class="block mt-1 text-xs font-medium leading-6 text-gray-500">{{ $t('file_description') }}</p>
         </div>
@@ -97,15 +98,15 @@
 </template>
 
 <script setup>
+    import { onMounted } from "vue";
+
     /** Import components. */
     import Input from '@/Components/form/Input.vue';
     import Avatar from '@/Components/form/Avatar.vue';
     import Textarea from '@/Components/form/Textarea.vue';
     import ButtonFile from '@/Components/form/ButtonFile.vue';
-    import MultiSelectFilter from '@/Components/filters/MultiSelectFilter.vue';
     import PrimaryButton from '@/Components/buttons/PrimaryButton.vue';
-    import {onMounted} from "vue";
-    import MultiSelectObjectFilter from "@/Components/filters/MultiSelectObjectFilter.vue";
+    import SelectMultiple from '@/Components/form/SelectMultiple.vue';
 
     /** Component props. */
     const props = defineProps({
@@ -115,10 +116,6 @@
             default: () => []
         },
     });
-    onMounted(() => {
-        console.log(props.form)
-        console.log(props.activity_domains);
-    })
 
     /** Update form ong logo. */
     const ongLogo = ((file) => props.form.ong.logo = file);

diff --git a/resources/js/Components/registration/Step4.vue b/resources/js/Components/registration/Step4.vue
@@ -5,13 +5,14 @@
 
         <!-- County -->
         <div class="w-full">
-            <MultiSelectObjectFilter
-                class="w-full"
+            <SelectMultiple
+                class="w-full z-101"
                 :label="$t('county')"
+                type="object"
                 v-model="form.ong.counties_ids"
                 :options="counties"
+                :error="form.errors['ong.counties_ids']"
             />
-            <p v-show="form.errors['ong.counties_ids']" class="mt-2 text-sm text-red-600">{{ form.errors['ong.counties_ids'] }}</p>
         </div>
 
         <!-- Address -->
@@ -107,7 +108,7 @@
     /** Import components. */
     import Input from '@/Components/form/Input.vue';
     import PrimaryButton from '@/Components/buttons/PrimaryButton.vue';
-    import MultiSelectObjectFilter from "@/Components/filters/MultiSelectObjectFilter.vue";
+    import SelectMultiple from '@/Components/form/SelectMultiple.vue';
 
     const props = defineProps({
         form: Object,

diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue
@@ -65,19 +65,21 @@
                         background="primary-500"
                         hover="primary-400"
                         color="white"
+                        class="col-span-2 md:col-span-1"
                         :class="{ 'opacity-25': form.processing }"
                         :disabled="form.processing"
                     >
                         {{ $t('log_in') }}
                     </PrimaryButton>
 
 
-                    <!-- <SecondaryButton
-                        :class="{ 'opacity-25': form.processing }"
-                        :disabled="form.processing"
+                    <SecondaryButton
+                        class="col-span-2 md:col-span-1 w-full flex items-center justify-center flex-1 gap-x-2 py-2.5"
+                        @click="googleLogin"
                     >
-                        {{ $t('google_log_in') }}
-                    </SecondaryButton> -->
+                        <SvgLoader name="google" />
+                        {{ $t("google_login") }}
+                    </SecondaryButton>
                 </div>
             </form>
         </Auth>
@@ -95,6 +97,7 @@
     import Checkbox from '@/Components/form/Checkbox.vue';
     import PrimaryButton from '@/Components/buttons/PrimaryButton.vue';
     import SecondaryButton from '@/Components/buttons/SecondaryButton.vue';
+    import SvgLoader from '@/Components/SvgLoader.vue';
     import Alert from '@/Components/Alert.vue';
 
     /** Component props. */
@@ -126,4 +129,11 @@
             onFinish: () => form.reset('password'),
         });
     };
+
+    /** Goolge login */
+    const googleLogin = () => {
+        /** TODO
+         * Method for login with google
+         */
+    }
 </script>
diff --git a/resources/js/Pages/Auth/Register.vue b/resources/js/Pages/Auth/Register.vue
@@ -50,8 +50,8 @@ const form = useForm({
         contact_email: '',
         contact_phone: '',
         contact_person: '',
-        activity_domains_ids: '',
-        counties_ids: '',
+        activity_domains_ids: [],
+        counties_ids: [],
         volunteer: false,
         why_volunteer: '',
         logo: '',
@@ -139,6 +139,12 @@ const submit = () => {
     if (form.type === 'donor') {
         delete form.ong;
     }
+
+    if(form.type = 'ong') {
+        form.ong.activity_domains_ids = form.ong.activity_domains_ids.map(domain => domain.id)
+        form.ong.counties_ids = form.ong.counties_ids.map(county => county.id)
+    }
+
     form.post(route('register'), {
         onError: (error) => {
             /** Set active component in case of validation errors. */
@@ -151,6 +157,17 @@ const submit = () => {
             } else if (error['ong.volunteer'] || error['ong.cif'] || error['ong.why_volunteer']) {
                 current.value = 4
             }
+
+            /** Repopulate array as objects. */
+            if(form.type = 'ong') {
+                if (0 < form.ong.activity_domains_ids.length) {
+                    form.ong.activity_domains_ids = props.activity_domains.filter(domain => form.ong.activity_domains_ids.includes(domain.id));
+                }
+
+                if (0 < form.ong.counties_ids.length) {
+                    form.ong.counties_ids = props.counties.filter(county => form.ong.counties_ids.includes(county.id));
+                }
+            }
         },
         onSuccess: (data) => {
             current.value = steps.value.length - 1

diff --git a/resources/js/Pages/Public/Website/Terms.vue b/resources/js/Pages/Public/Website/Terms.vue
@@ -2,16 +2,13 @@
     <PageLayout>
         <!-- Inertia page head -->
         <Head :title="$t('thank_you')" />
-        <div class="p-9 mt-4 mx-auto max-w-7xl mb-10">
+        <div class="mx-auto mt-4 mb-10 p-9 max-w-7xl">
 
         </div>
     </PageLayout>
 </template>
 
 <script setup>
-    /** Remove this import after backend connection. */
-    import project from '@/local_json/project.js';
-
     /** Import from inertia. */
     import { Head, Link } from '@inertiajs/vue3';
 

diff --git a/resources/js/locales/ro.js b/resources/js/locales/ro.js
@@ -15,8 +15,8 @@ export default {
     "cancel": "Anulează",
     "save": "Salvează",
     "saved": "Saved.",
-    "remember_me": "Remember me",
-    "password_forgoten": "Ai uitat parola?",
+    "remember_me": "Ține-mă minte ",
+    "password_forgoten": "Am uitat parola",
     "log_in": "Intră în cont",
     "google_log_in": "Continuă cu Google",
     "password_reset": "Resetează parola",
@@ -158,7 +158,7 @@ export default {
     "volunteer": "Voluntariat",
     "organization_accepts_volunteers_label": "Organizația acceptă voluntari?",
     "yes": "Da",
-    "organization_why_volunteer_label": "De ce să devin voluntar? Scrie câteva rânduri pentru a motiva vizitatorii să aplice ca voluntari",
+    "organization_why_volunteer_label": "De ce să devin voluntar?",
     "organization_contact": "Contact organizatie",
     "organization_website_label": "Website organizație",
     "organization_phone_label": "Telefon contact organizație (public)",
@@ -389,5 +389,6 @@ export default {
     "project_categories": "Proiecte din categoria",
     "donation_period": "Perioada donatii",
     "ong_description": "Descriere organizație",
-    "need_help": "Ai nevoie de ajutor în plus?"
+    "need_help": "Ai nevoie de ajutor în plus?",
+    "register_subscribe": "Doresc sa ma abonez la newsletter"
 }