login communication

backend/src/main/java/de/hft/geotime/security/JWTAuthenticationFilter.java

@@ -53,6 +53,7 @@ public class JWTAuthenticationFilter extends UsernamePasswordAuthenticationFilte
             HttpServletResponse res,
             FilterChain chain,
             Authentication auth) {
+        res.setHeader("Access-Control-Expose-Headers", "Authorization");
         String token = JWT.create()
                 .withSubject(((User) auth.getPrincipal()).getUsername())
                 .withExpiresAt(new Date(System.currentTimeMillis() + EXPIRATION_TIME))

frontend/src/App.vue

@@ -51,12 +51,13 @@
             <template v-slot:activator="{ on }">
               <v-btn color="primary" dark v-on="on">Login</v-btn>
             </template>
-            <v-card class="main">               
+            <v-card class="main">
               <v-card-actions>
                 <v-spacer></v-spacer>
                 <v-btn  icon @click="dialog = false"><v-icon>mdi-window-close</v-icon></v-btn>
               </v-card-actions>
-              <SignIn />
+              <SignIn v-on:signIn="signIn"/>
+              <p id="loginError" ></p>
             </v-card>
           </v-dialog>
         </v-row>
@@ -81,7 +82,7 @@
                 </v-list-item-content>
 
                 <v-list-item-action>
-                 
+
                 </v-list-item-action>
               </v-list-item>
             </v-list>
@@ -92,7 +93,7 @@
               <v-list-item>
                 <v-list-item-action>
                   <v-switch
-                    
+
                     color="primary"
                     :input-value="login"
                     @change="login= !login"
@@ -126,7 +127,9 @@
 </template>
 
 <script>
+
 import SignIn from "./views/SignIn.vue";
+var baseUri = "http://backend:5000";
 export default {
   components: {
     SignIn
@@ -139,7 +142,31 @@ export default {
     login: true,
     dialog: false,
     menu: false
+    
   }),
+  methods: {
+    signIn (loginData) {
+
+
+  var xhttp = new XMLHttpRequest();
+
+xhttp.onreadystatechange = function() {
+  if (this.status == 200 & this.readyState ==4) {
+    sessionStorage.setItem("jwt", this.getResponseHeader("Authorization"));
+    location.reload();
+
+    
+  }else if(this.status != 200 && this.status !=0) {
+  
+    document.getElementById("loginError").innerHTML="Login not successfull";
+  }
+};
+  xhttp.open("POST", baseUri + "/login", true);
+  xhttp.send('{"username": "' + loginData.username +'", "password": "'+ loginData.password +'"}');
+ 
+    }
+
+  },
   created() {
     this.$vuetify.theme.dark = true;
   }

frontend/src/views/SignIn.vue

@@ -22,12 +22,14 @@
                       <v-text-field
                         id="password"
                         label="Password"
+                        v-model="password"
                         name="Password"
                         prepend-icon="mdi-key"
                         type="password"
                         color="primary"
                       />
                     </v-form>
+                    <p id="missing"></p>
                   </v-card-text>
                   <div class="text-center mt-3">
                     <v-btn rounded color="logowhite" outlined dark v-on:click="signin()">Sign In</v-btn>
@@ -121,14 +123,27 @@
 export default {
   data: () => ({
     step: 1,
-    username: ""
+    username: "",
+    password: "",
+   
   }),
   props: {
     source: String
   },
   methods: {
     signin() {
-      console.log(this.username);
+      if (this.username != "" && this.password != "") {
+         document.getElementById("missing").innerHTML= "";
+        const loginData = {
+          username: this.username,
+          password: this. password
+        }
+        this.$emit('signIn', loginData);
+      }else {
+        document.getElementById("missing").innerHTML= "Please fill out all fields";
+      }
+
+     
     }
   }
 };