change border color textinput component if have error

erikwibowo · Feb 14, 2023 · 69d4876 · 69d4876
1 parent 0ca05ad
commit 69d4876
Show file tree

Hide file tree

Showing 15 changed files with 39 additions and 32 deletions.
diff --git a/resources/js/Components/TextInput.vue b/resources/js/Components/TextInput.vue
@@ -1,7 +1,13 @@
 <script setup>
 import { onMounted, ref } from 'vue';
 
-defineProps(['modelValue']);
+defineProps({
+    modelValue: String,
+    error: {
+        type: String,
+        default: null,
+    },
+})
 
 defineEmits(['update:modelValue']);
 
@@ -18,6 +24,7 @@ defineExpose({ focus: () => input.value.focus() });
 
 <template>
     <input
-        class="border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-primary dark:focus:border-primary focus:ring-primary dark:focus:ring-primary rounded-md shadow-sm placeholder:text-gray-400 placeholder:dark:text-gray-400/50"
-        :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" ref="input" />
+        v-bind:class="error ? 'border-red-500 dark:border-red-400 dark:bg-gray-900 dark:text-gray-300 focus:border-red-500 dark:focus:border-red-400 focus:ring-red-500 dark:focus:ring-red-400' : 'border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-primary dark:focus:border-primary focus:ring-primary dark:focus:ring-primary'"
+        class="rounded-md shadow-sm placeholder:text-gray-400 placeholder:dark:text-gray-400/50" :value="modelValue"
+        @input="$emit('update:modelValue', $event.target.value)" ref="input" />
 </template>
diff --git a/resources/js/Pages/Auth/ConfirmPassword.vue b/resources/js/Pages/Auth/ConfirmPassword.vue
@@ -34,7 +34,7 @@ const submit = () => {
             <div>
                 <InputLabel for="password" :value="lang().label.password" />
                 <TextInput id="password" type="password" class="mt-1 block w-full" v-model="form.password" required
-                    autocomplete="current-password" autofocus :placeholder="lang().placeholder.password" />
+                    autocomplete="current-password" autofocus :placeholder="lang().placeholder.password" :error="form.errors.password" />
                 <InputError class="mt-2" :message="form.errors.password" />
             </div>
 

diff --git a/resources/js/Pages/Auth/ForgotPassword.vue b/resources/js/Pages/Auth/ForgotPassword.vue
@@ -41,7 +41,7 @@ const submit = () => {
                 <InputLabel for="email" :value="lang().label.email" />
 
                 <TextInput id="email" type="email" class="mt-1 block w-full" v-model="form.email" required autofocus
-                    autocomplete="username" :placeholder="lang().placeholder.email" />
+                    autocomplete="username" :placeholder="lang().placeholder.email" :error="form.errors.email" />
 
                 <InputError class="mt-2" :message="form.errors.email" />
             </div>

diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue
@@ -41,14 +41,14 @@ const submit = () => {
             <div>
                 <InputLabel for="email" :value="lang().label.email" />
                 <TextInput id="email" type="email" class="mt-1 block w-full" v-model="form.email" required autofocus
-                    autocomplete="username" :placeholder="lang().placeholder.email" />
+                    autocomplete="username" :placeholder="lang().placeholder.email" :error="form.errors.email" />
                 <InputError class="mt-2" :message="form.errors.email" />
             </div>
 
             <div class="mt-4">
                 <InputLabel for="password" :value="lang().label.password" />
                 <TextInput id="password" type="password" class="mt-1 block w-full" v-model="form.password" required
-                    autocomplete="current-password" :placeholder="lang().placeholder.password" />
+                    autocomplete="current-password" :placeholder="lang().placeholder.password" :error="form.errors.password" />
                 <InputError class="mt-2" :message="form.errors.password" />
             </div>
 

diff --git a/resources/js/Pages/Auth/Register.vue b/resources/js/Pages/Auth/Register.vue
@@ -35,7 +35,7 @@ const submit = () => {
                 <InputLabel for="name" :value="lang().label.name" />
 
                 <TextInput id="name" type="text" class="mt-1 block w-full" v-model="form.name" required autofocus
-                    autocomplete="name" :placeholder="lang().placeholder.name" />
+                    autocomplete="name" :placeholder="lang().placeholder.name" :error="form.errors.name" />
 
                 <InputError class="mt-2" :message="form.errors.name" />
             </div>
@@ -44,7 +44,7 @@ const submit = () => {
                 <InputLabel for="email" :value="lang().label.email" />
 
                 <TextInput id="email" type="email" class="mt-1 block w-full" v-model="form.email" required
-                    autocomplete="username" :placeholder="lang().placeholder.email" />
+                    autocomplete="username" :placeholder="lang().placeholder.email" :error="form.errors.email" />
 
                 <InputError class="mt-2" :message="form.errors.email" />
             </div>
@@ -53,7 +53,7 @@ const submit = () => {
                 <InputLabel for="password" :value="lang().label.password" />
 
                 <TextInput id="password" type="password" class="mt-1 block w-full" v-model="form.password" required
-                    autocomplete="new-password" :placeholder="lang().placeholder.password" />
+                    autocomplete="new-password" :placeholder="lang().placeholder.password" :error="form.errors.password" />
 
                 <InputError class="mt-2" :message="form.errors.password" />
             </div>
@@ -63,7 +63,7 @@ const submit = () => {
 
                 <TextInput id="password_confirmation" type="password" class="mt-1 block w-full"
                     v-model="form.password_confirmation" required autocomplete="new-password"
-                    :placeholder="lang().placeholder.password_confirmation" />
+                    :placeholder="lang().placeholder.password_confirmation" :error="form.errors.password_confirmation" />
 
                 <InputError class="mt-2" :message="form.errors.password_confirmation" />
             </div>

diff --git a/resources/js/Pages/Auth/ResetPassword.vue b/resources/js/Pages/Auth/ResetPassword.vue
@@ -39,7 +39,7 @@ const submit = () => {
                 <InputLabel for="email" :value="lang().label.email" />
 
                 <TextInput id="email" type="email" class="mt-1 block w-full" v-model="form.email" required autofocus
-                    autocomplete="username" :placeholder="lang().placeholder.email" />
+                    autocomplete="username" :placeholder="lang().placeholder.email" :error="form.errors.email" />
 
                 <InputError class="mt-2" :message="form.errors.email" />
             </div>
@@ -48,7 +48,7 @@ const submit = () => {
                 <InputLabel for="password" :value="lang().label.password" />
 
                 <TextInput id="password" type="password" class="mt-1 block w-full" v-model="form.password" required
-                    autocomplete="new-password" :placeholder="lang().placeholder.password" />
+                    autocomplete="new-password" :placeholder="lang().placeholder.password" :error="form.errors.password" />
 
                 <InputError class="mt-2" :message="form.errors.password" />
             </div>
@@ -58,7 +58,7 @@ const submit = () => {
 
                 <TextInput id="password_confirmation" type="password" class="mt-1 block w-full"
                     v-model="form.password_confirmation" required autocomplete="new-password"
-                    :placeholder="lang().placeholder.password_confirmation" />
+                    :placeholder="lang().placeholder.password_confirmation" :error="form.errors.password_confirmation" />
 
                 <InputError class="mt-2" :message="form.errors.password_confirmation" />
             </div>

diff --git a/resources/js/Pages/Permission/Create.vue b/resources/js/Pages/Permission/Create.vue
@@ -43,7 +43,7 @@ const create = () => {
                     <div>
                         <InputLabel for="name" :value="lang().label.role" />
                         <TextInput id="name" type="text" class="mt-1 block w-full" v-model="form.name" required
-                            :placeholder="lang().placeholder.name" />
+                            :placeholder="lang().placeholder.name" :error="form.errors.name" />
                         <InputError class="mt-2" :message="form.errors.name" />
                     </div>
                 </div>

diff --git a/resources/js/Pages/Permission/Edit.vue b/resources/js/Pages/Permission/Edit.vue
@@ -51,7 +51,7 @@ watchEffect(() => {
                     <div>
                         <InputLabel for="name" :value="lang().label.role" />
                         <TextInput id="name" type="text" class="mt-1 block w-full" v-model="form.name" required
-                            :placeholder="lang().placeholder.name" />
+                            :placeholder="lang().placeholder.name" :error="form.errors.name" />
                         <InputError class="mt-2" :message="form.errors.name" />
                     </div>
                 </div>

diff --git a/resources/js/Pages/Profile/Partials/DeleteUserForm.vue b/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
@@ -62,7 +62,7 @@ const closeModal = () => {
                 <div class="mt-6">
                     <InputLabel for="password" :value="lang().label.password" class="sr-only" />
                     <TextInput id="password" ref="passwordInput" v-model="form.password" type="password"
-                        class="mt-1 block w-full" @keyup.enter="deleteUser" :placeholder="lang().placeholder.password" />
+                        class="mt-1 block w-full" @keyup.enter="deleteUser" :placeholder="lang().placeholder.password" :error="form.errors.password" />
 
                     <InputError :message="form.errors.password" class="mt-2" />
                 </div>

diff --git a/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue b/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
@@ -49,7 +49,7 @@ const updatePassword = () => {
 
                 <TextInput id="current_password" ref="currentPasswordInput" v-model="form.current_password"
                     type="password" class="mt-1 block w-full" autocomplete="current-password"
-                    :placeholder="lang().placeholder.password" />
+                    :placeholder="lang().placeholder.password" :error="form.errors.current_password" />
 
                 <InputError :message="form.errors.current_password" class="mt-2" />
             </div>
@@ -58,7 +58,7 @@ const updatePassword = () => {
                 <InputLabel for="password" :value="lang().profile.new_password" />
 
                 <TextInput id="password" ref="passwordInput" v-model="form.password" type="password"
-                    class="mt-1 block w-full" autocomplete="new-password" :placeholder="lang().placeholder.password" />
+                    class="mt-1 block w-full" autocomplete="new-password" :placeholder="lang().placeholder.password" :error="form.errors.password" />
 
                 <InputError :message="form.errors.password" class="mt-2" />
             </div>
@@ -68,7 +68,7 @@ const updatePassword = () => {
 
                 <TextInput id="password_confirmation" v-model="form.password_confirmation" type="password"
                     class="mt-1 block w-full" autocomplete="new-password"
-                    :placeholder="lang().placeholder.password_confirmation" />
+                    :placeholder="lang().placeholder.password_confirmation" :error="form.errors.password_confirmation" />
 
                 <InputError :message="form.errors.password_confirmation" class="mt-2" />
             </div>

diff --git a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
@@ -40,7 +40,7 @@ const updateProfile = () => {
                 <InputLabel for="name" :value="lang().label.name" />
 
                 <TextInput id="name" type="text" class="mt-1 block w-full" v-model="form.name" required autofocus
-                    autocomplete="name" :placeholder="lang().placeholder.name" />
+                    autocomplete="name" :placeholder="lang().placeholder.name" :error="form.errors.name" />
 
                 <InputError class="mt-2" :message="form.errors.name" />
             </div>
@@ -49,7 +49,7 @@ const updateProfile = () => {
                 <InputLabel for="email" :value="lang().label.email" />
 
                 <TextInput id="email" type="email" class="mt-1 block w-full" v-model="form.email" required
-                    autocomplete="email" :placeholder="lang().placeholder.email" />
+                    autocomplete="email" :placeholder="lang().placeholder.email" :error="form.errors.email" />
 
                 <InputError class="mt-2" :message="form.errors.email" />
             </div>

diff --git a/resources/js/Pages/Role/Create.vue b/resources/js/Pages/Role/Create.vue
@@ -71,7 +71,7 @@ const select = () => {
                     <div>
                         <InputLabel for="name" :value="lang().label.role" />
                         <TextInput id="name" type="text" class="mt-1 block w-full" v-model="form.name" required
-                            :placeholder="lang().placeholder.name" />
+                            :placeholder="lang().placeholder.name" :error="form.errors.name" />
                         <InputError class="mt-2" :message="form.errors.name" />
                     </div>
                     <div>

diff --git a/resources/js/Pages/Role/Edit.vue b/resources/js/Pages/Role/Edit.vue
@@ -83,7 +83,7 @@ const select = () => {
                     <div>
                         <InputLabel for="name" :value="lang().label.role" />
                         <TextInput id="name" type="text" class="mt-1 block w-full" v-model="form.name" required
-                            :placeholder="lang().placeholder.name" />
+                            :placeholder="lang().placeholder.name" :error="form.errors.name" />
                         <InputError class="mt-2" :message="form.errors.name" />
                     </div>
                     <div>

diff --git a/resources/js/Pages/User/Create.vue b/resources/js/Pages/User/Create.vue
@@ -51,26 +51,26 @@ const roles = props.roles?.map(role => ({ label: role.name, value: role.name }))
                     <div>
                         <InputLabel for="name" :value="lang().label.name" />
                         <TextInput id="name" type="text" class="mt-1 block w-full" v-model="form.name" required
-                            :placeholder="lang().placeholder.name" />
+                            :placeholder="lang().placeholder.name" :error="form.errors.name" />
                         <InputError class="mt-2" :message="form.errors.name" />
                     </div>
                     <div>
                         <InputLabel for="email" :value="lang().label.email" />
                         <TextInput id="email" type="email" class="mt-1 block w-full" v-model="form.email"
-                            :placeholder="lang().placeholder.email" />
+                            :placeholder="lang().placeholder.email" :error="form.errors.email" />
                         <InputError class="mt-2" :message="form.errors.email" />
                     </div>
                     <div>
                         <InputLabel for="password" :value="lang().label.password" />
                         <TextInput id="password" type="password" class="mt-1 block w-full" v-model="form.password"
-                            :placeholder="lang().placeholder.password" />
+                            :placeholder="lang().placeholder.password" :error="form.errors.password" />
                         <InputError class="mt-2" :message="form.errors.password" />
                     </div>
                     <div>
                         <InputLabel for="password_confirmation" :value="lang().label.password_confirmation" />
                         <TextInput id="password_confirmation" type="password" class="mt-1 block w-full"
                             v-model="form.password_confirmation"
-                            :placeholder="lang().placeholder.password_confirmation" />
+                            :placeholder="lang().placeholder.password_confirmation" :error="form.errors.password_confirmation" />
                         <InputError class="mt-2" :message="form.errors.password_confirmation" />
                     </div>
                     <div>

diff --git a/resources/js/Pages/User/Edit.vue b/resources/js/Pages/User/Edit.vue
@@ -61,26 +61,26 @@ const roles = props.roles?.map(role => ({ label: role.name, value: role.name }))
                     <div>
                         <InputLabel for="name" :value="lang().label.name" />
                         <TextInput id="name" type="text" class="mt-1 block w-full" v-model="form.name" required
-                            :placeholder="lang().placeholder.name" />
+                            :placeholder="lang().placeholder.name" :error="form.errors.name" />
                         <InputError class="mt-2" :message="form.errors.name" />
                     </div>
                     <div>
                         <InputLabel for="email" :value="lang().label.email" />
                         <TextInput id="email" type="email" class="mt-1 block w-full" v-model="form.email"
-                            :placeholder="lang().placeholder.email" />
+                            :placeholder="lang().placeholder.email" :error="form.errors.email" />
                         <InputError class="mt-2" :message="form.errors.email" />
                     </div>
                     <div>
                         <InputLabel for="password" :value="lang().label.password" />
                         <TextInput id="password" type="password" class="mt-1 block w-full" v-model="form.password"
-                            :placeholder="lang().placeholder.password" />
+                            :placeholder="lang().placeholder.password" :error="form.errors.password" />
                         <InputError class="mt-2" :message="form.errors.password" />
                     </div>
                     <div>
                         <InputLabel for="password_confirmation" :value="lang().label.password_confirmation" />
                         <TextInput id="password_confirmation" type="password" class="mt-1 block w-full"
                             v-model="form.password_confirmation"
-                            :placeholder="lang().placeholder.password_confirmation" />
+                            :placeholder="lang().placeholder.password_confirmation" :error="form.errors.password_confirmation" />
                         <InputError class="mt-2" :message="form.errors.password_confirmation" />
                     </div>
                     <div>