fix #96, fix #128, fix #122, fix #123, fix #125 (#142)

* Removue unused data * added texts * Fix nabar z-index * Fix reset password * Added styles
code4romania · Jul 26, 2023 · 74e7e5e · 74e7e5e
1 parent e69e831
commit 74e7e5e
Show file tree

Hide file tree

Showing 11 changed files with 149 additions and 212 deletions.
diff --git a/resources/js/Components/Navbar.vue b/resources/js/Components/Navbar.vue
@@ -1,5 +1,5 @@
 <template>
-    <Disclosure as="nav" class="bg-white shadow z-100" v-slot="{ open }">
+    <Disclosure as="nav" class="relative bg-white shadow z-103" v-slot="{ open }">
         <div class="px-4 mx-auto max-w-7xl xl:px-0 lg:py-2">
             <div class="flex justify-between h-16">
 

diff --git a/resources/js/Components/form/Input.vue b/resources/js/Components/form/Input.vue
@@ -16,6 +16,10 @@
             @input="$emit('update:modelValue', $event.target.value)"
             ref="input"
             :placeholder="placeholder"
+            :pattern="pattern"
+            :min="min"
+            :max="max"
+            :maxlength="maxlength"
         />
 
         <!-- Extra -->
@@ -58,6 +62,22 @@
         },
         color:{
             type: String
+        },
+        pattern: {
+            type: String,
+            default: null
+        },
+        min: {
+            type: Number,
+            default: null
+        },
+        max: {
+            type: Number,
+            default: null
+        },
+        maxlength: {
+            type: Number,
+            default: null
         }
     });
 
@@ -77,3 +97,11 @@
     /** Expose. */
     defineExpose({ focus: () => input.value.focus() });
 </script>
+
+<style scoped>
+input::-webkit-inner-spin-button,
+input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+</style>
diff --git a/resources/js/Pages/Auth/ForgotPassword.vue b/resources/js/Pages/Auth/ForgotPassword.vue
@@ -1,11 +1,14 @@
 <template>
     <PageLayout>
         <!-- Inertia page head -->
-       <Head title="Forgot Password" />
+       <Head :title="$t('password_reset')" />
 
-       <div v-if="status" class="mb-4 text-sm font-medium text-green-600">
-           {{ status }}
-       </div>
+       <Alert
+            v-if="status"
+            class="fixed right-10 top-10 w-96 z-103"
+            type="success"
+            :message="status"
+        />
 
        <!-- Auth template. -->
        <Auth :content="content">
@@ -17,7 +20,6 @@
                     type="email"
                     v-model="form.email"
                     :isRequired="true"
-                    hasAutocomplete="username"
                     :error="form.errors.email"
                 />
 
@@ -47,6 +49,7 @@
    import Auth from '@/Components/templates/Auth.vue';
    import PrimaryButton from '@/Components/buttons/PrimaryButton.vue';
    import Input from '@/Components/form/Input.vue';
+   import Alert from '@/Components/Alert.vue';
 
     /** Component props. */
    defineProps({
@@ -70,6 +73,13 @@
 
    /** Submit action. */
    const submit = () => {
-       form.post(route('password.email'));
+        form.post(route('password.email'), {
+            onError: (error) => {
+                form.reset('email')
+            },
+            onSuccess: () => {
+                form.reset('email')
+            },
+        });
    };
 </script>
diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue
@@ -3,9 +3,12 @@
         <!-- Inertia page head -->
         <Head title="Log in" />
 
-        <div v-if="status" class="mb-4 text-sm font-medium text-green-600">
-            {{ status }}
-        </div>
+        <Alert
+            v-if="status"
+            class="fixed right-10 top-10 w-96 z-103"
+            type="success"
+            :message="status"
+        />
 
         <!-- Auth template. -->
         <Auth :content="content">
@@ -92,6 +95,7 @@
     import Checkbox from '@/Components/form/Checkbox.vue';
     import PrimaryButton from '@/Components/buttons/PrimaryButton.vue';
     import SecondaryButton from '@/Components/buttons/SecondaryButton.vue';
+    import Alert from '@/Components/Alert.vue';
 
     /** Component props. */
     defineProps({

diff --git a/resources/js/Pages/Auth/ResetPassword.vue b/resources/js/Pages/Auth/ResetPassword.vue
@@ -1,3 +1,89 @@
 <template>
-    <div>Reset password</div>
+    <PageLayout>
+        <!-- Inertia page head -->
+       <Head :title="$t('password_reset')" />
+
+       <Alert
+            v-if="status"
+            class="fixed right-10 top-10 w-96 z-103"
+            type="success"
+            :message="status"
+        />
+
+       <!-- Auth template. -->
+       <Auth :content="content">
+           <form class="mt-4 space-y-6 lg:mb-28" @submit.prevent="submit">
+                <!-- Password -->
+                <Input
+                    :label="$t('password')"
+                    id="password"
+                    type="password"
+                    v-model="form.password"
+                    :isRequired="true"
+                    :error="form.errors.password"
+                />
+
+                <!-- Confirm password -->
+                <Input
+                    :label="$t('password_confirmation')"
+                    id="password-confirmation"
+                    type="password"
+                    v-model="form.password_confirmation"
+                    :isRequired="true"
+                    :error="form.errors.password_confirmation"
+                />
+
+                <!-- Action -->
+               <div class="grid grid-cols-1">
+                   <PrimaryButton
+                       background="primary-500"
+                       hover="primary-400"
+                       color="white"
+                       :class="{ 'opacity-25': form.processing }"
+                       :disabled="form.processing"
+                   >
+                       {{ $t('save') }}
+                   </PrimaryButton>
+               </div>
+           </form>
+       </Auth>
+   </PageLayout>
 </template>
+
+<script setup>
+/** Import from inertia. */
+import { Head, useForm } from '@inertiajs/vue3';
+
+/** Import components. */
+import PageLayout from '@/Layouts/PageLayout.vue';
+import Auth from '@/Components/templates/Auth.vue';
+import PrimaryButton from '@/Components/buttons/PrimaryButton.vue';
+import Input from '@/Components/form/Input.vue';
+import Alert from '@/Components/Alert.vue';
+
+/** Component props. */
+const props = defineProps({
+    status: { type: String },
+    token: { type: String },
+    email: {type: String}
+});
+
+/** Page content. */
+const content = {
+    title: "Resetează parola",
+    description: "Resetează parola",
+}
+
+/** Form variables. */
+const form = useForm({
+    email: props.email,
+    password: '',
+    password_confirmation: '',
+    token: props.token
+});
+
+/** Submit action. */
+const submit = () => {
+    form.post(route('password.store'), {});
+};
+</script>
diff --git a/resources/js/Pages/Profile/Edit.vue b/resources/js/Pages/Profile/Edit.vue
@@ -1,20 +1,19 @@
 <template>
     <PageLayout>
         <Head title="Profile" />
-
-        <div v-if="status" class="mb-4 font-medium text-sm text-green-600">
+        <div v-if="status" class="mb-4 text-sm font-medium text-green-600">
             {{ status }}
         </div>
 
-        <div class="max-w-7xl mx-auto sm:px-6 lg:px-12 space-y-6">
+        <div class="px-6 mx-auto space-y-6 max-w-7xl lg:px-12">
 
             <UpdateProfileInformationForm
                 :must-verify-email="mustVerifyEmail"
                 :status="status"
                 class="max-w-xl"
             />
 
-            <div class="w-full border-t border-gray-300 my-4"></div>
+            <div class="w-full my-4 border-t border-gray-300"></div>
 
             <UpdatePasswordForm class="max-w-xl" />
 

diff --git a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
@@ -33,9 +33,12 @@
                 :label="$t('phone')"
                 id="phone"
                 type="number"
+                pattern="[0-9]{10}"
                 v-model="form.phone"
                 :isRequired="true"
                 :error="form.errors.phone"
+                :min="0"
+                :maxlength="10"
             >
                 <p class="pt-1 text-sm text-gray-500">{{ $t('phone_input_info') }}</p>
             </Input>
@@ -101,7 +104,6 @@
     import SvgLoader from '@/Components/SvgLoader.vue';
     import PrimaryButton from '@/Components/buttons/PrimaryButton.vue';
     import SecondaryButton from '@/Components/buttons/SecondaryButton.vue';
-    import {onMounted} from "vue";
 
     /** Component props. */
     defineProps({
@@ -122,8 +124,4 @@
         email: user.email,
         phone: user.phone,
     });
-
-onMounted(() => {
-    console.log('mounted')
-});
 </script>
diff --git a/resources/js/local_json/project.js b/resources/js/local_json/project.js