From 4b6fdee0ab26d26a912beaaaa2bece062e088f7b Mon Sep 17 00:00:00 2001
From: khatabwedaa <khatabwedaa@gmail.com>
Date: Thu, 7 May 2020 01:26:47 +0200
Subject: [PATCH] add all forms components

---
 src/Models/data.js                            | 54 +++++++++++----
 src/components/UI/Forms/CasualForm.vue        | 48 -------------
 src/components/UI/Forms/InputsForm.vue        | 45 ++++++++++++
 src/components/UI/Forms/MultiColumnForm.vue   | 68 -------------------
 .../{Subscribe.vue => NewsletterForm.vue}     | 10 +--
 src/components/UI/Forms/SignInForm.vue        | 42 ++++++++++++
 .../{Login.vue => SignInFormWithImage.vue}    | 30 ++++----
 7 files changed, 148 insertions(+), 149 deletions(-)
 delete mode 100644 src/components/UI/Forms/CasualForm.vue
 create mode 100644 src/components/UI/Forms/InputsForm.vue
 delete mode 100644 src/components/UI/Forms/MultiColumnForm.vue
 rename src/components/UI/Forms/{Subscribe.vue => NewsletterForm.vue} (73%)
 create mode 100644 src/components/UI/Forms/SignInForm.vue
 rename src/components/UI/Forms/{Login.vue => SignInFormWithImage.vue} (73%)

diff --git a/src/Models/data.js b/src/Models/data.js
index 63e3c17..2a39fbf 100644
--- a/src/Models/data.js
+++ b/src/Models/data.js
@@ -2,35 +2,59 @@ export default [
     {
         name: 'Alert',
         components: [
+            { name: 'Success Alert' },
+            { name: 'Info Alert' },
+            { name: 'Warning Alert' },
+            { name: 'Error Alert' },
             { name: 'Notification Pop' },
-            { name: 'Alert' },
 
         ],
     },
-    {
-        name: 'Heroes',
-        components: [
-            { name: 'Hero With Pattern' },
-        ],
-    },
     {
         name: 'Cards',
         components: [
             { name: 'Article Card' },
             { name: 'Article Card With Image' },
-            { name: 'Product' },
-            { name: 'Product Evaluation' },
-            { name: 'Testimonial' },
-            { name: 'User Details' },
+            { name: 'Product Card' },
+            { name: 'Product Card With Evaluation' },
+            { name: 'Testimonial Card' },
+            { name: 'User Card' },
+            { name: 'User Card With Details' },
         ],
     },
     {
         name: 'Forms',
         components: [
-            {name: 'Casual Form'},
-            {name: 'Multi Column Form'},
-            {name: 'Login'},
-            {name: 'Subscribe'},
+            {name: 'Inputs Form'},
+            {name: 'Newsletter Form'},
+            {name: 'Sign In Form'},
+            {name: 'Sign In Form With Image'},
         ],
     },
+    // {
+    //     name: 'Heroes',
+    //     components: [
+    //         { name: 'Hero With Pattern' },
+    //         { name: 'Hero With Image' },
+    //     ],
+    // },
+    // {
+    //     name: 'Navigation', 
+    //     components: [
+    //         { name: 'Navbar With Search' },
+    //         { name: 'Footer With Subscribe Form' },
+    //     ]
+    // },
+    // {
+    //     name: 'Sections',
+    //     components: [
+    //         { name: 'Paragraph With Image' },
+    //     ]
+    // },
+    // {
+    //     name: 'Paginations',
+    //     components: [
+    //         { name: 'Simple Pagination' },
+    //     ]
+    // },
 ];
\ No newline at end of file
diff --git a/src/components/UI/Forms/CasualForm.vue b/src/components/UI/Forms/CasualForm.vue
deleted file mode 100644
index cc92046..0000000
--- a/src/components/UI/Forms/CasualForm.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-    <div :id="name | toId">
-        <div class="bg-white p-6 rounded shadow">
-            <h2 class="text-lg text-gray-700 font-semibold">Account settings</h2>
-            <div class="mt-4">
-                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
-                    <label class="block">
-                        <span class="text-gray-700">Username</span>
-                        <input type="text"
-                               class="px-4 py-2 rounded bg-gray-200 border border-gray-300 mt-1 block w-full">
-                    </label>
-                    <label class="block">
-                        <span class="text-gray-700">Email Address</span>
-                        <input type="email"
-                               class="px-4 py-2 rounded bg-gray-200 border border-gray-300 mt-1 block w-full">
-                    </label>
-                    <label class="block">
-                        <span class="text-gray-700">Password</span>
-                        <input type="password"
-                               class="px-4 py-2 rounded bg-gray-200 border border-gray-300 mt-1 block w-full">
-                    </label>
-                    <label class="block">
-                        <span class="text-gray-700">Password Confirmation</span>
-                        <input type="password"
-                               class="px-4 py-2 rounded bg-gray-200 border border-gray-300 mt-1 block w-full">
-                    </label>
-                </div>
-                <div class="flex justify-end mt-4">
-                    <button class="px-4 py-2 bg-gray-800 text-gray-200 rounded">Save</button>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                name: 'Casual Form'
-            }
-        }
-    }
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/components/UI/Forms/InputsForm.vue b/src/components/UI/Forms/InputsForm.vue
new file mode 100644
index 0000000..c36971c
--- /dev/null
+++ b/src/components/UI/Forms/InputsForm.vue
@@ -0,0 +1,45 @@
+<template>
+    <div :id="name | toId">
+        <div class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md">
+            <h2 class="text-lg text-gray-700 font-semibold capitalize">Account settings</h2>
+            
+            <form>
+                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4">
+                    <div>
+                        <label class="text-gray-700">Username</label>
+                        <input type="text" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
+                    </div>
+
+                    <div>
+                        <label class="text-gray-700">Email Address</label>
+                        <input type="email" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
+                    </div>
+
+                    <div>
+                        <label class="text-gray-700">Password</label>
+                        <input type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
+                    </div>
+
+                    <div>
+                        <label class="text-gray-700">Password Confirmation</label>
+                        <input type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
+                    </div>
+                </div>
+
+                <div class="flex justify-end mt-4">
+                    <button class="px-4 py-2 bg-gray-800 text-gray-200 rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Save</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Inputs Form'
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/src/components/UI/Forms/MultiColumnForm.vue b/src/components/UI/Forms/MultiColumnForm.vue
deleted file mode 100644
index 43375d8..0000000
--- a/src/components/UI/Forms/MultiColumnForm.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-    <div :id="name | toId">
-        <div class="bg-white p-6 rounded shadow">
-            <h2 class="text-lg text-gray-700 font-semibold">Account settings</h2>
-            <div class="flex flex-col sm:flex-row py-4">
-                <div class="sm:w-1/4">
-                    <h2 class="text-xl text-gray-700">Profile</h2>
-                </div>
-                <div class="sm:w-3/4 grid grid-cols-1 sm:grid-cols-2 gap-6">
-                    <label class="block">
-                        <span class="text-gray-700">Username</span>
-                        <input type="text"
-                               class="px-4 py-2 rounded bg-gray-200 border border-gray-300 mt-1 block w-full">
-                    </label>
-                    <label class="block">
-                        <span class="text-gray-700">Email Address</span>
-                        <input type="email"
-                               class="px-4 py-2 rounded bg-gray-200 border border-gray-300 mt-1 block w-full">
-                    </label>
-                    <label class="block">
-                        <span class="text-gray-700">Password</span>
-                        <input type="password"
-                               class="px-4 py-2 rounded bg-gray-200 border border-gray-300 mt-1 block w-full">
-                    </label>
-                    <label class="block">
-                        <span class="text-gray-700">Password Confirmation</span>
-                        <input type="password"
-                               class="px-4 py-2 rounded bg-gray-200 border border-gray-300 mt-1 block w-full">
-                    </label>
-                </div>
-            </div>
-            <div class="flex flex-col sm:flex-row py-4">
-                <div class="sm:w-1/4">
-                    <h2 class="text-xl text-gray-700">Settings</h2>
-                </div>
-                <div class="sm:w-3/4 grid grid-cols-1 sm:grid-cols-2 gap-6">
-                    <label class="block">
-                        <span class="text-gray-700">Forward to</span>
-                        <input type="text"
-                               class="px-4 py-2 rounded bg-gray-200 border border-gray-300 mt-1 block w-full">
-                    </label>
-                    <label class="block">
-                        <span class="text-gray-700">API Token</span>
-                        <input type="text"
-                               class="px-4 py-2 rounded bg-gray-200 border border-gray-300 mt-1 block w-full">
-                    </label>
-                </div>
-            </div>
-            <div class="flex justify-end mt-4">
-                <button class="px-4 py-2 bg-gray-800 text-gray-200 rounded">Save</button>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                name: 'Multi Column Form'
-            }
-        }
-    }
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/components/UI/Forms/Subscribe.vue b/src/components/UI/Forms/NewsletterForm.vue
similarity index 73%
rename from src/components/UI/Forms/Subscribe.vue
rename to src/components/UI/Forms/NewsletterForm.vue
index 9091c5f..a9e6ae7 100644
--- a/src/components/UI/Forms/Subscribe.vue
+++ b/src/components/UI/Forms/NewsletterForm.vue
@@ -1,7 +1,7 @@
 <template>
         <div :id="name | toId">
-            <div class="flex flex-col max-w-4xl mx-auto md:h-56 bg-white rounded-lg shadow-lg overflow-hidden md:flex-row">
-                <div class="md:flex items-center justify-center md:w-1/2 md:bg-gray-700">
+            <div class="flex flex-col max-w-4xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden md:flex-row md:h-56">
+                <div class="md:flex md:items-center md:justify-center md:w-1/2 md:bg-gray-700">
                     <div class="py-6 px-8 md:py-0">
                         <h2 class="text-gray-700 text-2xl font-bold md:text-gray-100">Sign Up For Project Updates</h2>
                         <p class="mt-2 text-gray-600 md:text-gray-400">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur obcaecati odio</p>
@@ -9,9 +9,9 @@
                 </div>
                 <div class="flex items-center justify-center pb-6 md:py-0 md:w-1/2 md:border-b-8 border-gray-700">
                     <form>
-                        <div class="flex flex-col rounded-lg overflow-hidden sm:flex-row">
+                        <div class="flex flex-col rounded-lg overflow-hidden lg:flex-row">
                             <input class="py-3 px-4 bg-gray-200 text-gray-800 border-gray-300 border-2 outline-none placeholder-gray-500 focus:bg-gray-100" type="text" name="email" placeholder="Enter your email">
-                            <button class="py-3 px-4 bg-gray-700 text-gray-100 font-semibold uppercase hover:bg-gray-600">subscribe</button>
+                            <button class="py-3 px-4 bg-gray-700 text-gray-100 font-semibold uppercase hover:bg-gray-600 focus:bg-gray-600 focus:outline-none">subscribe</button>
                         </div>
                     </form>
                 </div>
@@ -24,7 +24,7 @@
 export default {
     data() {
         return {
-            name: 'Subscribe',
+            name: 'Newsletter Form',
         }
     }
 }
diff --git a/src/components/UI/Forms/SignInForm.vue b/src/components/UI/Forms/SignInForm.vue
new file mode 100644
index 0000000..7f160ad
--- /dev/null
+++ b/src/components/UI/Forms/SignInForm.vue
@@ -0,0 +1,42 @@
+<template>
+    <div :id="name | toId">
+        <div class="bg-white w-full max-w-sm rounded-lg overflow-hidden mx-auto">
+            <div class="py-4 px-8">
+                <div class="text-center font-bold text-gray-700 text-3xl">Brand</div>
+                <div class="mt-1 text-center font-bold text-gray-600 text-xl">Welcome Back</div>
+                <div class="mt-1 text-center text-gray-600">Login or create account</div>
+
+                <form>
+                    <div class="mt-4 w-full">
+                        <input class="w-full mt-2 py-2 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white" type="email" placeholder="Email Address">
+                    </div>
+                    <div class="mt-4 w-full">
+                        <input class="w-full mt-2 py-2 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white" type="password" placeholder="Password">
+                    </div>
+                    <div class="flex justify-between items-center mt-6">
+                        <a href="#" class="text-gray-600 text-sm hover:text-gray-500">Forget Password?</a>
+                        <button class="py-2 px-4 bg-gray-700 text-white rounded hover:bg-gray-600 focus:outline-none" type="button">
+                            Login
+                        </button>
+                    </div>
+                </form>
+            </div>
+
+            <div class="flex items-center justify-center py-4 bg-gray-100 text-center">
+                <h1 class="text-gray-600 text-sm">Dont`t have an account? </h1>
+                <a href="#" class="text-blue-600 font-bold mx-2 text-sm hover:text-blue-500">Register</a>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+    export default {
+        data() {
+            return {
+                name: 'Sign In Form',
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/src/components/UI/Forms/Login.vue b/src/components/UI/Forms/SignInFormWithImage.vue
similarity index 73%
rename from src/components/UI/Forms/Login.vue
rename to src/components/UI/Forms/SignInFormWithImage.vue
index 96c2e14..2efb5b2 100644
--- a/src/components/UI/Forms/Login.vue
+++ b/src/components/UI/Forms/SignInFormWithImage.vue
@@ -1,13 +1,12 @@
 <template>
     <div :id="name | toId">
-        <div class="flex bg-white rounded-lg shadow-lg overflow-hidden mx-auto max-w-sm lg:max-w-4xl">
-            <div class="hidden lg:block lg:w-1/2 bg-cover"
-                 style="background-image:url('https://images.unsplash.com/photo-1546514714-df0ccc50d7bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=667&q=80')"></div>
+        <div class="flex max-w-sm mx-auto bg-white rounded-lg shadow-lg overflow-hidden lg:max-w-4xl">
+            <div class="hidden lg:block lg:w-1/2 bg-cover" style="background-image:url('https://images.unsplash.com/photo-1546514714-df0ccc50d7bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=667&q=80')"></div>
+            
             <div class="w-full p-8 lg:w-1/2">
                 <h2 class="text-2xl font-semibold text-gray-700 text-center">Brand</h2>
                 <p class="text-xl text-gray-600 text-center">Welcome back!</p>
-                <a href="#"
-                   class="flex items-center justify-center mt-4 text-white rounded-lg shadow-md hover:bg-gray-100">
+                <a href="#" class="flex items-center justify-center mt-4 text-white rounded-lg shadow-md hover:bg-gray-100">
                     <div class="px-4 py-3">
                         <svg class="h-6 w-6" viewBox="0 0 40 40">
                             <path d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.045 27.2142 24.3525 30 20 30C14.4775 30 10 25.5225 10 20C10 14.4775 14.4775 9.99999 20 9.99999C22.5492 9.99999 24.8683 10.9617 26.6342 12.5325L31.3483 7.81833C28.3717 5.04416 24.39 3.33333 20 3.33333C10.7958 3.33333 3.33335 10.7958 3.33335 20C3.33335 29.2042 10.7958 36.6667 20 36.6667C29.2042 36.6667 36.6667 29.2042 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z"
@@ -20,33 +19,38 @@
                                   fill="#1976D2"/>
                         </svg>
                     </div>
-                    <h1 class="px-4 py-3 w-5/6 text-center text-gray-600 font-bold">Sign in with Google</h1>
+                    <h3 class="px-4 py-3 w-5/6 text-center text-gray-600 font-bold">Sign in with Google</h3>
                 </a>
+
                 <div class="mt-4 flex items-center justify-between">
                     <span class="border-b w-1/5 lg:w-1/4"></span>
-                    <a href="#" class="text-xs text-center text-gray-500 uppercase">or login with email</a>
+                    <a href="#" class="text-xs text-center text-gray-500 uppercase hover:underline">or login with email</a>
                     <span class="border-b w-1/5 lg:w-1/4"></span>
                 </div>
+
                 <div class="mt-4">
                     <label class="block text-gray-700 text-sm font-bold mb-2">Email Address</label>
-                    <input class="bg-gray-200 text-gray-700 focus:outline-none focus:shadow-outline border border-gray-300 rounded py-2 px-4 block w-full appearance-none"
+                    <input class="bg-gray-200 text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full appearance-none focus:outline-none focus:bg-white"
                            type="email">
                 </div>
+
                 <div class="mt-4">
                     <div class="flex justify-between">
                         <label class="block text-gray-700 text-sm font-bold mb-2">Password</label>
-                        <a href="#" class="text-xs text-gray-500">Forget Password?</a>
+                        <a href="#" class="text-xs text-gray-500 hover:underline">Forget Password?</a>
                     </div>
-                    <input class="bg-gray-200 text-gray-700 focus:outline-none focus:shadow-outline border border-gray-300 rounded py-2 px-4 block w-full appearance-none"
+                    <input class="bg-gray-200 text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full appearance-none focus:outline-none focus:bg-white"
                            type="password">
                 </div>
+
                 <div class="mt-8">
-                    <button class="bg-gray-700 text-white font-bold py-2 px-4 w-full rounded hover:bg-gray-600">Login
+                    <button class="bg-gray-700 text-white font-bold py-2 px-4 w-full rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Login
                     </button>
                 </div>
+                
                 <div class="mt-4 flex items-center justify-between">
                     <span class="border-b w-1/5 md:w-1/4"></span>
-                    <a href="#" class="text-xs text-gray-500 uppercase">or sign up</a>
+                    <a href="#" class="text-xs text-gray-500 uppercase hover:underline">or sign up</a>
                     <span class="border-b w-1/5 md:w-1/4"></span>
                 </div>
             </div>
@@ -59,7 +63,7 @@
     export default {
         data() {
             return {
-                name: 'Login',
+                name: 'Sign In Form With Image',
             }
         }
     }