Migrate existing inputs to vuetify

README.md

@@ -12,7 +12,7 @@
       <strong>Take a look at the Documentation &raquo</strong>
     </a>
     <br><br>
-    <a href="http://falko.surge.sh/#/">Visit Falko</a>
+    <a href="http://falko.solutions">Visit Falko</a>
     &middot;
     <a href="https://github.com/falko-org/Falko-API">API Repository</a>
     &middot;

package.json

@@ -26,7 +26,7 @@
     "vue-router": "^2.8.1",
     "vue-windows": "^0.1.3",
     "vuedraggable": "^2.23.2",
-    "vuetify": "^1.5.18",
+    "vuetify": "^2.1.1",
     "vuex": "^3.1.1",
     "vuex-persist": "^0.3.0"
   },

src/App.vue

@@ -41,17 +41,10 @@ export default {
 </script>
 
 <style>
-input {
-  border: none;
-  border-radius: 0;
-  border-bottom: solid #c0c0c0 thin;
-  padding-left: 0;
-  color: #333;
-  width: 100%;  
-}
 
-input:focus {
-  outline: 0;
+.v-label {
+  left: 0px !important;
+  right: auto !important;
 }
 
 #app {

src/components/Authentication/Login.vue

@@ -23,25 +23,18 @@
       </div>
 
       <form id="loginForm"  @submit.prevent="() => login()" name="wrong-credentials">
-        <div class="form-group">
-          <input  type="email"
-          class="form-control"
-          placeholder="Email"
-          name="email"
-          v-model="email"
-          v-validate="'email'" >
-          <p class="text-danger" v-if="errors.has('email')">{{ errors.first('email') }}</p>
-        </div>
+          <v-text-field
+            label="Email"
+            v-model="email"
+            :rules="[rules.required, rules.validEmail]"
+          ></v-text-field>
 
-        <div class="form-group">
-          <input  type="password"
-          class="form-control"
-          placeholder="Password"
-          name="password"
-          v-model="password"
-          v-validate="'required|min:6'">
-          <p class="text-danger" v-if="errors.has('password')">{{ errors.first('password') }}</p>
-        </div>
+          <v-text-field
+            label="Password"
+            v-model="password"
+            :type="'password'"
+            :rules="[rules.required, rules.min]"
+          ></v-text-field>
 
         <div class="text-center">
           <button type="submit" class="btn btn-primary falko-button" id="loginButton" >Log In</button>
@@ -64,7 +57,13 @@ export default {
     return {
       email: '',
       password: '',
-      alert: false
+      alert: false,
+      rules: {
+        required: value => !!value || 'Required.',
+        min: v => v.length >= 6 || 'Min 6 characters',
+        emailMatch: () => ('Incorrect email or password'),
+        validEmail: v => /.+@.+/.test(v) || 'E-mail must be valid',
+      }
     };
   },
 
@@ -98,13 +97,6 @@ export default {
   max-width: 20em;
 }
 
-#loginForm input {
-  border: none;
-  border-radius: 0;
-  border-bottom: solid #c0c0c0 thin;
-  padding-left: 0;
-}
-
 #falkoLogoLogin {
   width: 11em;
   margin: 2.5em 0;

src/components/Authentication/Register.vue

@@ -4,45 +4,36 @@
       <img src="../../assets/logo.png" class="rounded mx-auto d-block img-fluid" id="falkoLogoRegister">
       <form id="registerForm" @submit.prevent="register()"  data-vv-scope="form-register">
         <div class="form-group">
-          <input  type="text"
-                  class="form-control"
-                  aria-describedby="userHelp"
-                  placeholder="Username"
-                  name="username"
-                  v-validate="'required|min:3'"
-                  v-model="username">
-          <p class="text-danger" v-if="errors.has('form-register.username')">{{ errors.first('form-register.username') }}</p>
+          <v-text-field
+            label="Username"
+            v-model="username"
+            :rules="[rules.required, rules.minName]"
+          ></v-text-field>
           <p class="text-danger" v-if="errors.has('name-taken')">{{ errors.first('name-taken') }}</p>
         </div>
         <div class="form-group">
-          <input  type="email"
-                  class="form-control"
-                  aria-describedby="emailHelp"
-                  name="email"
-                  placeholder="Enter email"
-                  v-model="email"
-                  v-validate="'required|email'">
-          <p class="text-danger" v-if="errors.has('form-register.email')">{{ errors.first('form-register.email') }}</p>
+          <v-text-field
+            label="Enter Email"
+            v-model="email"
+            :rules="[rules.required, rules.validEmail]"
+          ></v-text-field>
           <p class="text-danger" v-if="errors.has('email-taken')">{{ errors.first('email-taken') }}</p>
         </div>
         <div class="form-group">
-          <input  type="password"
-                  class="form-control"
-                  placeholder="Password"
-                  ref="password"
-                  v-model="password"
-                  name="password"
-                  v-validate="'required|min:6'">
-          <p class="text-danger" v-if="errors.has('form-register.password')">{{ errors.first('form-register.password') }}</p>
+          <v-text-field
+            label="Password"
+            v-model="password"
+            :type="'password'"
+            :rules="[rules.required, rules.minPassword]"
+          ></v-text-field>
         </div>
         <div class="form-group">
-          <input  type="password"
-                  class="form-control"
-                  placeholder="Confirm Password"
-                  v-model="password_confirmation"
-                  name="password"
-                  v-validate="'confirmed:password'">
-          <p class="text-danger" v-if="errors.has('form-register.password_confirmation')">{{ errors.first('form-register.password_confirmation') }}</p>
+          <v-text-field
+            label="Confirm Password"
+            v-model="password_confirmation"
+            :type="'password'"
+            :rules="[rules.required, rules.minPassword, rules.confirmPasswordMatch]"
+          ></v-text-field>
         </div>
         <div class="text-center">
           <button type="submit" :disabled="disableRegisterButton()" class="btn btn-primary falko-button" id="">Register</button>
@@ -63,6 +54,14 @@ export default {
       username: '',
       password: '',
       password_confirmation: '',
+      rules: {
+        required: value => !!value || 'Required.',
+        minPassword: v => v.length >= 6 || 'Min 6 characters',
+        minName: v => v.length >= 3 || 'Min 3 characters',
+        emailMatch: () => ('Incorrect email or password'),
+        validEmail: v => /.+@.+/.test(v) || 'E-mail must be valid',
+        confirmPasswordMatch: () => (this.password === this.password_confirmation) || "Passwords doesn't match"
+      }
     };
   },
 
@@ -129,13 +128,6 @@ export default {
   max-width: 20em;
 }
 
-#registerForm input {
-  border: none;
-  border-radius: 0;
-  border-bottom: solid #c0c0c0 thin;
-  padding-left: 0;
-}
-
 #falkoLogoRegister {
   width: 11em;
   margin: 1.3em 0;

src/components/Issues/AddIssue.vue

@@ -17,14 +17,24 @@
 						</div>
 						<div class=" row modal-body">
               <div class="col">
-                <p><label>Name</label></p>
-                <p><input type="text" v-model="name" id="issueName" placeholder="Issue Title" name="name" v-validate="'required'">
-									<p class="text-danger" v-if="errors.has('name')">{{ errors.first('name') }}</p>
-								</input><br></p>
-                <p><label>Body</label></p>
-                <input type="text" v-model="body" placeholder="Issue Body..." name="body" v-validate="'required'">
-								<p class="text-danger" v-if="errors.has('body')">{{ errors.first('body') }}</p>
-							</input><br>
+				<v-text-field
+					label="Name"
+					v-model="name"
+					:rules="[rules.required]"
+				></v-text-field>
+				<p class="text-danger" v-if="errors.has('name')">{{ errors.first('name') }}</p>
+				<br>
+
+				<v-textarea
+					name="input-7-4"
+					v-model="body"
+					label="Issue Body"
+					rows="2"
+					row-height="20"
+					:rules="[rules.required]"
+				></v-textarea>
+				<p class="text-danger" v-if="errors.has('body')">{{ errors.first('body') }}</p>
+				<br>
               </div>
 						</div>
 						<div class="modal-footer">
@@ -46,7 +56,10 @@ export default {
   data () {
     return {
       name: '',
-      body : ''
+	  body : '',
+	  rules: {
+        required: value => !!value || 'Required.',
+      }
     }
 	},
 

src/components/Issues/EditIssue.vue

@@ -15,22 +15,26 @@
           </div>
           <div class="modal-body row">
             <div class="col">
-              <p><label> Name </label></p>
-              <input type = "text" v-model="name" placeholder="Name" name="name" v-validate="'required'">
+              <v-text-field
+                label="Name"
+                v-model="name"
+                :rules="[rules.required]"
+              ></v-text-field>
               <p class="text-danger" v-if="errors.has('name')">{{ errors.first('name') }}</p>
-            </input><br>
-              <p><label> Description </label></p>
-              <input type = "text" v-model="body" placeholder="Description" name="body" v-validate="'required'">
+              <br>
+              <v-text-field
+                label="Description"
+                v-model="body"
+                :rules="[rules.required]"
+              ></v-text-field>
               <p class="text-danger" v-if="errors.has('body')">{{ errors.first('body') }}</p>
-            </input><br>
+              <br>
             </div>
             <div class="col">
-                <div class="row justify-content-center">
-                  <p><label> Assignees </label></p>
-                </div>
-                <div class="row">
-                  <input type="text" v-model="search" placeholder="search...">
-                </div>
+              <v-text-field
+                label="Assignees"
+                v-model="search"
+              ></v-text-field>
               <div class="col" v-if="search != ''">
                 <div class="row" v-for="contributor in filteredContribs">
                 <label class="custom-control custom-checkbox">
@@ -66,7 +70,10 @@ export default {
       number: "",
       contributors: [],
       selectedContribs: [],
-      search: ""
+      search: "",
+      rules: {
+        required: value => !!value || 'Required.',
+      }
     }
   },
 

src/components/Projects/AddProject.vue

@@ -15,19 +15,18 @@
             </button>
           </div>
           <div class="modal-body" data-vv-scope="modal-project">
-            <p><label>Name</label></p>
-            <p><input type = "text"
-                      name="name"
-                      v-validate="'required'"
-                      v-model="name">
-                <p class="text-danger" v-if="errors.has('name')">{{ errors.first('name') }}</p>
-                <br>
-            </p>
-            <p><label>Description</label></p>
-            <input type = "text"
-                   name = "description"
-                   v-validate="'required'"
-                   v-model="description">
+            <v-text-field
+              label="Name"
+              v-model="name"
+              :rules="[rules.required]"
+            ></v-text-field>
+            <p class="text-danger" v-if="errors.has('name')">{{ errors.first('name') }}</p>
+            <br>
+            <v-text-field
+              label="Description"
+              v-model="description"
+              :rules="[rules.required]"
+            ></v-text-field>
             <p class="text-danger" v-if="errors.has('description')">{{ errors.first('description') }}</p>
             <br>
           </div>
@@ -52,6 +51,9 @@ export default {
     return {
       name: '',
       description: '',
+      rules: {
+        required: value => !!value || 'Required.',
+      }
     };
   },
 

src/components/Projects/EditProject.vue

@@ -16,21 +16,20 @@
             <div class="col">
               <div class="row">
                 <div class="col">
-                  <p><label > Name </label></p>
-                  <p><input type = "text"
-                            name="name"
-                            v-validate="'required'"
-                            v-model="name">
-                      <p class="text-danger" v-if="errors.has('name')">{{ errors.first('name') }}</p>
-                      <br>
-                  </p>
+                    <v-text-field
+                      label="Name"
+                      v-model="name"
+                      :rules="[rules.required]"
+                    ></v-text-field>
+                    <p class="text-danger" v-if="errors.has('name')">{{ errors.first('name') }}</p>
+                    <br>
                 </div>
                 <div class="col">
-                  <p><label> Description </label></p>
-                  <input type = "text"
-                         name = "description"
-                         v-validate="'required'"
-                         v-model="description">
+                  <v-text-field
+                    label="Description"
+                    v-model="description"
+                    :rules="[rules.required]"
+                  ></v-text-field>
                   <p class="text-danger" v-if="errors.has('description')">{{ errors.first('description') }}</p>
                   <br>
                 </div>
@@ -69,6 +68,9 @@ export default{
       name: '',
       description: '',
       isScoring: '',
+      rules: {
+        required: value => !!value || 'Required.',
+      }
     };
   },
   computed: {