izi katka

front/vue-project/src/components/Components.vue

@@ -20,17 +20,18 @@ export default {
       dataFilterUrl: 'component/filter?'
     }
   },
+
   methods: {
     filter() {
       let urlParams = ""
-      if (document.getElementById('componentNameFilterInput').value != "") {
-        if (urlParams != "") {
+      if (document.getElementById('componentNameFilterInput').value !== "") {
+        if (urlParams !== "") {
           urlParams += "&";
         }
         urlParams += "componentName=" + this.componentName;
       }
-      if (document.getElementById('componentAmountFilterInput').value != "") {
-        if (urlParams != "") {
+      if (document.getElementById('componentAmountFilterInput').value !== "") {
+        if (urlParams !== "") {
           urlParams += "&";
         }
         urlParams += "amount=" + this.amount;
@@ -46,6 +47,11 @@ export default {
       this.componentName = null;
       this.amount = null;
     }
+  },
+  beforeCreate() {
+    if (localStorage.getItem("token") == null) {
+      this.$router.push("/login");
+    }
   }
 }
 </script>

front/vue-project/src/components/Favors.vue

@@ -30,6 +30,11 @@ export default {
       components: [],
     }
   },
+  beforeCreate() {
+    if (localStorage.getItem("token") == null) {
+      this.$router.push("/login");
+    }
+  },
   created() {
     DataService.readAll(this.orderUrl, (data) => new Order(data))
         .then(data => {
@@ -43,14 +48,14 @@ export default {
   methods: {
     filter() {
       let urlParams = ""
-      if (document.getElementById('favorNameFilterInput').value != "") {
-        if (urlParams != "") {
+      if (document.getElementById('favorNameFilterInput').value !== "") {
+        if (urlParams !== "") {
           urlParams += "&";
         }
         urlParams += "favorName=" + this.favorName;
       }
-      if (document.getElementById('priceFilterInput').value != "") {
-        if (urlParams != "") {
+      if (document.getElementById('priceFilterInput').value !== "") {
+        if (urlParams !== "") {
           urlParams += "&";
         }
         urlParams += "price=" + this.price;
@@ -68,7 +73,7 @@ export default {
     },
     addComponentToFavor(favorId) {
       let componentId = document.getElementById('components').value;
-      let response = axios.post(`http://localhost:8080/favor/${favorId}/component?compId=${componentId}`);
+      let response = axios.post(`http://localhost:8080/api/favor/${favorId}/component?compId=${componentId}`);
       console.log(response);
     },
 

front/vue-project/src/components/Header.vue

@@ -3,6 +3,10 @@ export default {
   methods: {
     getRoutes() {
       return this.$router.options.routes.filter(route => route.meta?.hasOwnProperty('label'));
+    },
+    logout() {
+      localStorage.clear();
+      this.$router.push('/login');
     }
   }
 }
@@ -27,6 +31,8 @@ export default {
           </li>
         </ul>
       </div>
+      <button class="btn btn-danger" @click.prevent="logout">Выход</button>
+
     </div>
   </nav>
 </template>

front/vue-project/src/components/Login.vue

@@ -0,0 +1,96 @@
+<script>
+export default {
+  methods: {
+    getUserInfo () {
+      if (localStorage.getItem("token")) {
+        this.loginButton.classList.add("visually-hidden");
+        this.logoutButton.classList.remove("visually-hidden");
+        this.userSpan.innerText = localStorage.getItem("user");
+      } else {
+        this.loginButton.classList.remove("visually-hidden");
+        this.logoutButton.classList.add("visually-hidden");
+        this.userSpan.innerText = "";
+        localStorage.removeItem("user");
+      }
+    },
+    async login (login, password) {
+      const requestParams = {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({login: login, password: password}),
+      };
+      const response = await fetch(this.hostURL + "/jwt/login", requestParams);
+      const result = await response.text();
+      if (response.status === 200) {
+        localStorage.setItem("token", result);
+        localStorage.setItem("user", login);
+        this.$router.push("/cabinets");
+      } else {
+        localStorage.removeItem("token");
+        localStorage.removeItem("user");
+        alert(result);
+      }
+    },
+    loginForm () {
+      this.login(this.loginInput.value, this.passwordInput.value).then(() => {
+        this.loginInput.value = "";
+        this.passwordInput.value = "";
+        this.getUserInfo();
+      });
+    },
+    logoutForm () {
+      localStorage.removeItem("token");
+      localStorage.removeItem("user");
+      this.getUserInfo();
+    },
+    toSignup() {
+      this.$router.push("/signup");
+    }
+  },
+  data() {
+    return {
+      hostURL: "http://localhost:8080",
+      loginInput: undefined,
+      passwordInput: undefined,
+      loginButton: undefined,
+      logoutButton: undefined,
+      userSpan: undefined
+    }
+  },
+  mounted() {
+    this.loginInput = document.getElementById("login");
+    this.passwordInput = document.getElementById("password");
+    this.loginButton = document.getElementById("loginBtn");
+    this.logoutButton = document.getElementById("logoutBtn");
+    this.userSpan = document.getElementById("user");
+    this.getUserInfo();
+  }
+}
+</script>
+
+<template>
+  <form id="loginForm" onsubmit="return false">
+    <div class="row mt-3">
+      <div class="col-sm-4">
+        <label for="login" class="form-label visually-hidden">Login</label>
+        <input type="text" class="form-control" id="login" required placeholder="Логин">
+      </div>
+      <div class="col-sm-4 mt-3 mt-sm-0">
+        <label for="password" class="form-label visually-hidden">Password</label>
+        <input type="password" class="form-control" id="password" required placeholder="Пароль">
+      </div>
+      <div class="d-grid col-sm-2 mx-auto mt-3 mt-sm-0">
+        <button id="loginBtn" type="submit" class="btn btn-success" @click.prevent="loginForm">Войти</button>
+        <button id="logoutBtn" type="button" class="btn btn-danger visually-hidden" @click.prevent="logoutForm">Выйти</button>
+      </div>
+      <div class="d-grid col-sm-2 mx-auto mt-3 mt-sm-0">
+        <span id="user" class="align-middle"></span>
+      </div>
+    </div>
+  </form>
+  <div class="mt-3">
+    <button class="btn btn-outline-secondary" @click.prevent="toSignup">Регистрация</button>
+  </div>
+</template>

front/vue-project/src/components/Orders.vue

@@ -30,6 +30,11 @@ export default {
       components: []
     }
   },
+  beforeCreate() {
+    if (localStorage.getItem("token") == null) {
+      this.$router.push("/login");
+    }
+  },
   created() {
     DataService.readAll(this.favorUrl, (data) => new Favor(data))
         .then(data => {
@@ -43,7 +48,7 @@ export default {
   methods: {
     filter() {
       let urlParams = ""
-      if (document.getElementById('numberFilterInput').value != "") {
+      if (document.getElementById('numberFilterInput').value !== "") {
         urlParams += "number=" + this.number;
       }
       DataService.readAll(this.dataFilterUrl + urlParams, (data) => new Order(data))

front/vue-project/src/components/Signup.vue

@@ -0,0 +1,51 @@
+<script>
+import axios from "axios";
+export default {
+  data() {
+    return {
+      data: []
+    }
+  },
+  methods: {
+    async createUser() {
+      const response = await axios.post("http://localhost:8080/signup", this.toJSON(this.data));
+      if (response.data !== "error") {
+        this.$router.push("/login");
+      } else {
+        document.getElementById('error').value = "Error!";
+      }
+    },
+    toJSON(data) {
+      const jsonObj = {};
+      const fields = Object.getOwnPropertyNames(data);
+      for (const field of fields) {
+        if (data[field] === undefined) {
+          continue;
+        }
+        jsonObj[field] = data[field];
+      }
+      return jsonObj;
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="mb-3">
+    <input type="text" name="login" class="form-control"
+           placeholder="Логин" required autofocus maxlength="64" v-model="data.login"/>
+  </div>
+  <div class="mb-3">
+    <input type="password" name="password" class="form-control"
+           placeholder="Пароль" required minlength="6" maxlength="64" v-model="data.password"/>
+  </div>
+  <div class="mb-3">
+    <input type="password" name="passwordConfirm" class="form-control"
+           placeholder="Пароль (подтверждение)" required minlength="6" maxlength="64" v-model="data.passwordConfirm"/>
+  </div>
+  <div class="mb-3">
+    <button type="submit" class="btn btn-success button-fixed" @click.prevent="createUser">Создать</button>
+    <a class="btn btn-primary button-fixed" href="/login">Назад</a>
+  </div>
+  <p id="error"></p>
+</template>

front/vue-project/src/components/Users.vue

@@ -0,0 +1,45 @@
+<script>
+import CatalogMixins from '../mixins/CatalogMixins.js';
+import User from '../models/User.js';
+
+export default {
+  mixins: [
+    CatalogMixins
+  ],
+  data() {
+    return {
+      getAllUrl: 'user',
+      dataUrl: 'user',
+      transformer: (data) => new User(data),
+      headers: [
+        { name: 'id', label: 'ID' },
+        { name: 'login', label: 'Логин' },
+        { name: 'role', label: 'Роль' }
+      ],
+      ifAdmin: Boolean
+    }
+  },
+  beforeCreate() {
+    if (localStorage.getItem("token") == null) {
+      this.$router.push("/login");
+    }
+  },
+  created() {
+    this.ifAdmin = localStorage.getItem("user") === "admin";
+  }
+}
+</script>
+
+<template>
+  <div v-if="ifAdmin">
+    <DataTable
+        :headers="this.headers"
+        :items="this.items"
+        :selectedItems="this.selectedItems"
+        @dblclick="showEditModalDblClick">
+    </DataTable>
+  </div>
+  <div v-else>
+    <h2>Эта страница доступна только администраторам!</h2>
+  </div>
+</template>

front/vue-project/src/main.js

@@ -4,12 +4,18 @@ import App from './App.vue'
 import Components from './components/Components.vue'
 import Favors from './components/Favors.vue'
 import Orders from './components/Orders.vue'
+import Login from "./components/Login.vue";
+import Signup from "@/components/Signup.vue";
+import Users from "@/components/Users.vue";
 
 const routes = [
     { path: '/', redirect: '/components' },
     { path: '/components', component: Components, meta: { label: 'Компоненты' } },
     { path: '/favors', component: Favors, meta: { label: 'Услуги' } },
-    { path: '/orders', component: Orders, meta: { label: 'Заказы' } }
+    { path: '/orders', component: Orders, meta: { label: 'Заказы' } },
+    { path: '/users', component: Users, meta: { label: 'Пользователи' } },
+    { path: '/login', component: Login},
+    { path: '/signup', component: Signup}
 ]
 
 const router = createRouter({

front/vue-project/src/models/User.js

@@ -0,0 +1,33 @@
+export default class Monitor {
+    constructor(data) {
+        this._id = data?.id;
+        this._login = data?.login;
+        this._role = data?.role;
+    }
+
+    get id() {
+        return this._id;
+    }
+
+    get login() {
+        return this._login;
+    }
+
+    set login(value) {
+        if (typeof value !== 'string' || value === null || value.length == 0) {
+            throw 'New model name value ' + value + ' is not a string or empty';
+        }
+        this._login = value;
+    }
+
+    get role() {
+        return this._role;
+    }
+
+    set role(value) {
+        if (typeof value !== 'string' || value === null || value.length == 0) {
+            throw 'New model name value ' + value + ' is not a string or empty';
+        }
+        this._role = value;
+    }
+}