--- a
+++ b/web-app/client/src/components/LoginnPatient.vue
@@ -0,0 +1,315 @@
+<template>
+      <div>
+
+        
+           
+       
+         
+          <div v-show="vs" class="regpatient" >
+
+                <h1 id="pl" >PATIENT LOGIN</h1>
+                <form @submit="fs" enctype=multipart/form-data>
+                    <ul>
+                        <li>
+                            <label for="fname" class="label" >Username:</label>
+                            <input type="text"   v-model="username"   id="fname" name="username" class="inputfield" required><br><br>
+                        </li>
+                        <li>
+                            <label for="fname" class="label">Password:</label>
+                            <input type="text"    v-model="password"   id="fname" name="password" class="inputfield"><br><br>
+                        </li>
+                      
+                      
+                       
+                        <li>
+                            
+                        </li>
+                    </ul>
+                    <input type="submit" value="Submit" name="patient" class="signup">
+                </form>
+
+                
+            <div>
+                       <h1>{{objj.error}}</h1>
+                    
+            </div>
+        
+            </div>
+            <h1>{{filter}}</h1>
+
+            <h4>{{gmsg.Success}}</h4>
+              <h4>{{rmsg.Success}}</h4>
+
+                <!-- <div>
+                    <p>  {{patientdatas}}</p>
+                    <p>{{reports}}</p>
+                </div>
+               -->
+             <div v-show="pasked">
+                 <h1>show content</h1>
+                  <form @submit="fs2" enctype=multipart/form-data>
+                  
+                    
+                    <input type="submit" value="Grant" name="patient" class="signup">
+                </form>
+
+                <form @submit="fs3" enctype=multipart/form-data>
+                  
+                    
+                    <input type="submit" value="Reject" name="patient" class="signup">
+                </form>
+
+                 
+             </div>
+            <vue-instant-loading-spinner ref="Spinner"></vue-instant-loading-spinner>
+         </div>
+            
+         <!-- <pp/> -->
+    
+    
+
+
+
+
+</template>
+
+<script>
+// import uuid from 'uuid';
+import VueInstantLoadingSpinner from "vue-instant-loading-spinner/src/components/VueInstantLoadingSpinner.vue";
+import axios from "axios";
+export default {
+    name: "LoginnPatient",
+    async mounted() {
+    // console.log("created");
+    // this.x = 99;
+
+    let res = await axios.get('http://localhost:8080/getPatients');
+
+    let data = res.data;
+    this.patientdatas = data;
+    console.log("this is patient data")
+   console.log(data)
+ 
+
+    
+//     let res1 = await axios.get('http://localhost:8080/getDoctors');
+
+//     let data1 = res1.data;
+//     this.doctordatas = data1;
+//     console.log("this is doctor data")
+//    console.log(data1)
+
+    let res2 = await axios.get('http://localhost:8080/getReports');
+    this.reports=res2.data;
+    console.log("these are reports")
+    console.log()
+    //  console.log(this.reports[0].Record.patientId)
+    //  this.pid=this.reports[0].Record.patientId;
+    //  console.log("insie")
+    //  console.log(this.pid)
+ 
+  },
+    data (){
+        return{
+             x:" ",
+            objj: {
+                
+             
+               
+
+            },
+            patientdatas : [],
+            reports : [],
+            
+
+            gmsg:{},
+            rmsg:{},
+
+            username: '',
+            password: '',
+            vs:true,
+            pasked:false,
+            index:"",
+            filter:{}
+           
+          
+        
+    
+        }
+    },
+    
+
+    components: {
+    VueInstantLoadingSpinner,
+    // pp
+  },
+  methods:{
+         async fs(e)
+        { 
+            //  let list = {};
+            // let x;        
+            e.preventDefault();
+            console.log("submit pressed")
+            this.objj.username=this.username
+            this.objj.password=this.password
+          
+            const newTodo = {
+                username: this.username,
+                password : this.password ,
+             
+               
+            
+            }
+            console.log(newTodo)
+            //1593418037214
+          
+          let params = {
+                patientId: this.username,
+                 pswd : this.password 
+          }
+
+          let res = await axios.post('http://localhost:8080/validatePatient',params);
+          this.objj=res.data;
+          let x = this.objj.Success;
+        //   console.log()
+
+        //   axios.post('http://localhost:8080/validatePatient', {
+        //         patientId: this.username,
+        //         pswd : this.password ,
+            
+        //          })
+        //     // .then(res => this.objj=res.data)
+        //      .then(res => x.json() =res.data.Success )
+            
+        //      .then(console.log(x))
+             
+        //     // .then(data => {})
+        //     .catch(e => {
+        //     this.errors.push(e)
+        //     })
+        //     // console.log(`this is api response ${res.data.Success}`)
+        //     // console.log(``)
+        //     console.log(x)
+        
+        if (x)
+        {
+            // this.$router.push('PatientDashboard') 
+            this.vs=false;
+            console.log("if executed")
+        }
+           for(var i=0;i<this.reports.length;i++)
+       {
+           console.log("for executed")
+           console.log(this.username)
+          if(this.username==this.reports[i].Record.patientId)
+          {
+            console.log("matched")
+            let index = i;
+            this.index = index;
+            let c=1;
+            console.log(index)
+
+            if(c==1)
+            {
+               this.filter = this.patientdatas[index].Record;
+               if(this.reports[index].Record.isAsked=="1")
+               {
+                   
+               
+                    console.log("permission is asked")
+                   this.pasked=true; 
+                }
+           
+          }
+       }
+      
+        }
+  },
+  async fs2(e)
+  {
+       e.preventDefault();
+
+    let l = this.index;
+         let params = {
+                patientId: this.username,
+                 reportId : this.reports[l].Record.reportId
+          }
+
+          let res = await axios.post('http://localhost:8080/grantAccess',params);
+         console.log(res.data)
+         this.gmsg=res.data
+
+       console.log(("granted"))
+        this.pasked=false; 
+
+  },
+  async fs3(e)
+  {
+         e.preventDefault();
+
+         let l = this.index;
+         let params = {
+                patientId: this.username,
+                 reportId : this.reports[l].Record.reportId
+          }
+
+          let res = await axios.post('http://localhost:8080/rejectAccess',params);
+         console.log(res.data)
+          this.rmsg=res.data;
+           console.log(("Rejected"))
+            this.pasked=false; 
+
+  }
+   
+}
+}
+ 
+
+</script>
+
+<style  scoped>
+
+.regpatient
+{
+    background-color: white;
+    height: 280px;
+    width: 300px;
+     border-radius: 25px;
+  padding: 2em;
+    margin: 5em auto;
+  
+  -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+}
+
+
+.signup{
+    background-color: #126597; /* Green */
+  border: none;
+  color: white;
+  padding: 12px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  /* margin: 4px 2px; */
+  margin-left: 6em;
+  cursor: pointer;
+  border-radius: 12px;
+  width: 100px;
+  font-weight: bold;
+}
+#pl{
+    text-align: center;
+}
+.inputfield {
+       width: 15em;
+    padding: 0.8em;
+    /* border-radius: 0.5em; */
+    border: none;
+    border-bottom: 1px solid black;
+}
+ul{
+    list-style-type: none;
+}
+</style>
\ No newline at end of file