Merge pull request #4 from VikingEngineers/YuryTest

Yury test

src/router/index.js

@@ -24,6 +24,8 @@ import ElProgressBars from "../layouts/sections/elements/progress-bars/ProgressB
 import ElToggles from "../layouts/sections/elements/toggles/TogglesView.vue";
 import ElTypography from "../layouts/sections/elements/typography/TypographyView.vue";
 import Project from "../views/LandingPages/Project/Project.vue";
+import Profile from "../views/LandingPages/Profile/Profile.vue";
+import TopSecretProject from "../views/LandingPages/Project/TopSecretProject.vue";
 
 
 const router = createRouter({
@@ -34,12 +36,25 @@ const router = createRouter({
       name: "presentation",
       component: PresentationView,
     },
+
     {
       path: '/project/:id',
       name: 'project',
       component: Project
     },
 
+    {
+      path: '/TopSecret',
+      name: 'topsecretproject',
+      component: TopSecretProject
+    },
+
+    {
+      path: '/profile/:id',
+      name: 'profile',
+      component: Profile
+    },
+
     {
       path: "/pages/landing-pages/about-us",
       name: "about",

src/views/LandingPages/Profile/Profile.vue

@@ -0,0 +1,43 @@
+<script setup>
+import axios from 'axios';
+import { onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
+
+
+const profileId = ref(null);
+const route = useRoute();
+const profileData = ref([]);
+
+onMounted(async() => {
+    profileId.value = route.params.id;
+    await getProfile();
+});
+
+
+const getProfile = async () => {
+    const profileDataRecieved = await axios.get(`http://somebodyhire.me/api/profile/${profileId.value}/`);
+    profileData.value = profileDataRecieved.data;
+
+};
+
+
+
+
+</script>
+
+
+<template>
+    <div>
+      <h1>Профиль пользователя номер: {{ profileData.id }}</h1>
+      <h2>{{ profileData.username }}</h2>
+        <p>{{ profileData.email }}</p>
+         
+      
+    </div>
+  </template> 
+
+
+
+<style scoped>
+</style>
+  

src/views/LandingPages/Project/TopSecretProject.vue

@@ -0,0 +1,30 @@
+<!-- Шаблон для страницы, содержимое которой видно только зарегистрированным пользователям -->
+
+<script setup>
+
+import { computed } from "vue";
+
+// example components
+import DefaultNavbar from "@/examples/navbars/NavbarDefault.vue";
+import Header from "@/examples/Header.vue";
+
+
+const isAuthenticated = computed(() => !!sessionStorage.getItem('access_token')); // Computed property to check if the user is authenticated
+
+</script>
+
+
+
+
+<template>
+  <DefaultNavbar  />
+
+  <Header>
+    <div v-if="isAuthenticated">
+        <p>Наш главный секрет</p>
+    </div>
+    <div v-else>
+        <p>здесь ничего нет</p>
+    </div>
+  </Header>
+</template>

src/views/LandingPages/SignIn/BasicView Old.vue

@@ -0,0 +1,171 @@
+<script setup>
+import { onMounted } from "vue";
+
+// example components
+import DefaultNavbar from "@/examples/navbars/NavbarDefault.vue";
+import Header from "@/examples/Header.vue";
+
+//Vue Material Kit 2 components
+import MaterialInput from "@/components/MaterialInput.vue";
+import MaterialSwitch from "@/components/MaterialSwitch.vue";
+import MaterialButton from "@/components/MaterialButton.vue";
+
+// material-input
+import setMaterialInput from "@/assets/js/material-input";
+onMounted(() => {
+  setMaterialInput();
+});
+</script>
+<template>
+  <DefaultNavbar transparent />
+  <Header>
+    <div
+      class="page-header align-items-start min-vh-100"
+      :style="{
+        backgroundImage:
+          'url(https://images.unsplash.com/photo-1497294815431-9365093b7331?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80)'
+      }"
+      loading="lazy"
+    >
+      <span class="mask bg-gradient-dark opacity-6"></span>
+      <div class="container my-auto">
+        <div class="row">
+          <div class="col-lg-4 col-md-8 col-12 mx-auto">
+            <div class="card z-index-0 fadeIn3 fadeInBottom">
+              <div
+                class="card-header p-0 position-relative mt-n4 mx-3 z-index-2"
+              >
+                <div
+                  class="bg-gradient-success shadow-success border-radius-lg py-3 pe-1"
+                >
+                  <h4
+                    class="text-white font-weight-bolder text-center mt-2 mb-0"
+                  >
+                    Sign in
+                  </h4>
+                  <div class="row mt-3">
+                    <div class="col-2 text-center ms-auto">
+                      <a class="btn btn-link px-3" href="javascript:;">
+                        <i class="fa fa-facebook text-white text-lg"></i>
+                      </a>
+                    </div>
+                    <div class="col-2 text-center px-1">
+                      <a class="btn btn-link px-3" href="javascript:;">
+                        <i class="fa fa-github text-white text-lg"></i>
+                      </a>
+                    </div>
+                    <div class="col-2 text-center me-auto">
+                      <a class="btn btn-link px-3" href="javascript:;">
+                        <i class="fa fa-google text-white text-lg"></i>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="card-body">
+                <form role="form" class="text-start">
+                  <MaterialInput
+                    id="email"
+                    class="input-group-outline my-3"
+                    :label="{ text: 'Email', class: 'form-label' }"
+                    type="email"
+                  />
+                  <MaterialInput
+                    id="password"
+                    class="input-group-outline mb-3"
+                    :label="{ text: 'Password', class: 'form-label' }"
+                    type="password"
+                  />
+                  <MaterialSwitch
+                    class="d-flex align-items-center mb-3"
+                    id="rememberMe"
+                    labelClass="mb-0 ms-3"
+                    checked
+                    >Remember me</MaterialSwitch
+                  >
+
+                  <div class="text-center">
+                    <MaterialButton
+                      class="my-4 mb-2"
+                      variant="gradient"
+                      color="success"
+                      fullWidth
+                      >Sign in</MaterialButton
+                    >
+                  </div>
+                  <p class="mt-4 text-sm text-center">
+                    Don't have an account?
+                    <a
+                      href="#"
+                      class="text-success text-gradient font-weight-bold"
+                      >Sign up</a
+                    >
+                  </p>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <footer class="footer position-absolute bottom-2 py-2 w-100">
+        <div class="container">
+          <div class="row align-items-center justify-content-lg-between">
+            <div class="col-12 col-md-6 my-auto">
+              <div
+                class="copyright text-center text-sm text-white text-lg-start"
+              >
+                © {{ new Date().getFullYear() }}, made with
+                <i class="fa fa-heart" aria-hidden="true"></i> by
+                <a
+                  href="https://www.creative-tim.com"
+                  class="font-weight-bold text-white"
+                  target="_blank"
+                  >Creative Tim</a
+                >
+                for a better web.
+              </div>
+            </div>
+            <div class="col-12 col-md-6">
+              <ul
+                class="nav nav-footer justify-content-center justify-content-lg-end"
+              >
+                <li class="nav-item">
+                  <a
+                    href="https://www.creative-tim.com"
+                    class="nav-link text-white"
+                    target="_blank"
+                    >Creative Tim</a
+                  >
+                </li>
+                <li class="nav-item">
+                  <a
+                    href="https://www.creative-tim.com/presentation"
+                    class="nav-link text-white"
+                    target="_blank"
+                    >About Us</a
+                  >
+                </li>
+                <li class="nav-item">
+                  <a
+                    href="https://www.creative-tim.com/blog"
+                    class="nav-link text-white"
+                    target="_blank"
+                    >Blog</a
+                  >
+                </li>
+                <li class="nav-item">
+                  <a
+                    href="https://www.creative-tim.com/license"
+                    class="nav-link pe-0 text-white"
+                    target="_blank"
+                    >License</a
+                  >
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </Header>
+</template>

src/views/LandingPages/SignIn/BasicView.vue

@@ -1,21 +1,88 @@
 <script setup>
 import { onMounted } from "vue";
+import { ref } from "vue";
+import axios from 'axios';
+import { computed } from "vue";
 
 // example components
 import DefaultNavbar from "@/examples/navbars/NavbarDefault.vue";
 import Header from "@/examples/Header.vue";
 
-//Vue Material Kit 2 components
-import MaterialInput from "@/components/MaterialInput.vue";
-import MaterialSwitch from "@/components/MaterialSwitch.vue";
-import MaterialButton from "@/components/MaterialButton.vue";
-
 // material-input
 import setMaterialInput from "@/assets/js/material-input";
+
+const username = ref('');
+const password = ref('');
+const errorMessage = ref('');
+
+const isAuthenticated = computed(() => !!sessionStorage.getItem('access_token')); // Computed property to check if the user is authenticated
+
+
+const login = async () => {
+  if (!username.value || !password.value) {
+    errorMessage.value = "Please fill in both fields.";
+  } else {
+    const url = 'http://somebodyhire.me/api/token/';
+    const headers = {
+      'Content-Type': 'application/json',
+    };
+    const body = {
+      username: username.value,
+      password: password.value,
+    };
+
+    try {
+      const response = await axios.post(url, body, { headers });
+      errorMessage.value = `Request:\nPOST ${url}\nHeaders: ${JSON.stringify(headers)}\nBody: ${JSON.stringify(body)}\n\nResponse:\nStatus: ${response.status}\nHeaders: ${JSON.stringify(response.headers)}\nBody: ${JSON.stringify(response.data)}`;
+      sessionStorage.setItem('access_token', response.data.access); // Save the access token in sessionStorage (new line)
+    } catch (error) {
+      if (error.response) {
+        // The request was made and the server responded with a status code that falls out of the range of 2xx
+        errorMessage.value = `Request:\nPOST ${url}\nHeaders: ${JSON.stringify(headers)}\nBody: ${JSON.stringify(body)}\n\nResponse:\nStatus: ${error.response.status}\nHeaders: ${JSON.stringify(error.response.headers)}\nBody: ${JSON.stringify(error.response.data)}`;
+      } else if (error.request) {
+        // The request was made but no response was received
+        errorMessage.value = `Request:\nPOST ${url}\nHeaders: ${JSON.stringify(headers)}\nBody: ${JSON.stringify(body)}\n\nError: No response received from server. Please try again later.`;
+      } else {
+        // Something happened in setting up the request that triggered an error
+        errorMessage.value = `Request:\nPOST ${url}\nHeaders: ${JSON.stringify(headers)}\nBody: ${JSON.stringify(body)}\n\nError: ${error.message}`;
+      }
+    }
+  }
+};
+
+const logout = () => { // Method to logout the user by clearing the session storage (new function)
+  sessionStorage.removeItem('access_token');
+};
+
+
 onMounted(() => {
   setMaterialInput();
 });
 </script>
+
+<script>
+export default {
+  data() {
+    return {
+      username: '',
+      password: '',
+      errorMessage: '',
+    };
+  },
+  methods: {
+    login() {
+      if (!this.username || !this.password) {
+        this.errorMessage = "Please fill in both fields.";
+      } else {
+        // Implement login logic here
+        this.errorMessage = `Can't login now, you are trying to sign in with login: ${this.username} and password: ${this.password}`;
+      }
+    },
+  },
+};
+</script>
+
+
 <template>
   <DefaultNavbar transparent />
   <Header>
@@ -41,64 +108,61 @@ onMounted(() => {
                   <h4
                     class="text-white font-weight-bolder text-center mt-2 mb-0"
                   >
-                    Sign in
+                    Вход
                   </h4>
-                  <div class="row mt-3">
-                    <div class="col-2 text-center ms-auto">
-                      <a class="btn btn-link px-3" href="javascript:;">
-                        <i class="fa fa-facebook text-white text-lg"></i>
-                      </a>
-                    </div>
-                    <div class="col-2 text-center px-1">
-                      <a class="btn btn-link px-3" href="javascript:;">
-                        <i class="fa fa-github text-white text-lg"></i>
-                      </a>
-                    </div>
-                    <div class="col-2 text-center me-auto">
-                      <a class="btn btn-link px-3" href="javascript:;">
-                        <i class="fa fa-google text-white text-lg"></i>
-                      </a>
-                    </div>
-                  </div>
                 </div>
               </div>
               <div class="card-body">
                 <form role="form" class="text-start">
-                  <MaterialInput
+                  <div>
-                    id="email"
+                    <div v-if="isAuthenticated">
-                    class="input-group-outline my-3"
+                        <!-- This will only be displayed if the user is authenticated -->
-                    :label="{ text: 'Email', class: 'form-label' }"
+                        <p>Опять Ты!</p>
-                    type="email"
+                        <button @click="logout">Выход</button>
-                  />
+                    </div>
-                  <MaterialInput
+
-                    id="password"
+                    <div v-else>
-                    class="input-group-outline mb-3"
+                        <!-- This will be displayed if the user is not authenticated -->
-                    :label="{ text: 'Password', class: 'form-label' }"
+                        <p>Ты с какого района?</p>
-                    type="password"
+                    
-                  />
+
-                  <MaterialSwitch
+
-                    class="d-flex align-items-center mb-3"
+
-                    id="rememberMe"
+                      <div>
-                    labelClass="mb-0 ms-3"
+                        <input v-model="username" type="text" placeholder="Имя пользователя" />
-                    checked
+                      </div>
-                    >Remember me</MaterialSwitch
+
-                  >
+                      <div>
+                        <input v-model="password" type="password" placeholder="Пароль" />
+                      </div>
+
+
+                    <div class="text-center">
+                      <button
+                        type="button"
+                        class="btn bg-gradient-dark w-100 my-4 mb-2"
+                        @click="login"
+                                      >
+                          Войти
+                      </button>
+
+                    </div>
+                      
+                    </div>
+
+
+              <div v-if="errorMessage">
+                      <p>{{ errorMessage }}</p>
+              </div>
+  </div>
+                  
 
-                  <div class="text-center">
-                    <MaterialButton
-                      class="my-4 mb-2"
-                      variant="gradient"
-                      color="success"
-                      fullWidth
-                      >Sign in</MaterialButton
-                    >
-                  </div>
                   <p class="mt-4 text-sm text-center">
-                    Don't have an account?
+                    Нет аккаунта?
                     <a
                       href="#"
                       class="text-success text-gradient font-weight-bold"
-                      >Sign up</a
+                      >Пока что нахер идите</a
                     >
                   </p>
                 </form>
@@ -107,65 +171,6 @@ onMounted(() => {
           </div>
         </div>
       </div>
-      <footer class="footer position-absolute bottom-2 py-2 w-100">
-        <div class="container">
-          <div class="row align-items-center justify-content-lg-between">
-            <div class="col-12 col-md-6 my-auto">
-              <div
-                class="copyright text-center text-sm text-white text-lg-start"
-              >
-                © {{ new Date().getFullYear() }}, made with
-                <i class="fa fa-heart" aria-hidden="true"></i> by
-                <a
-                  href="https://www.creative-tim.com"
-                  class="font-weight-bold text-white"
-                  target="_blank"
-                  >Creative Tim</a
-                >
-                for a better web.
-              </div>
-            </div>
-            <div class="col-12 col-md-6">
-              <ul
-                class="nav nav-footer justify-content-center justify-content-lg-end"
-              >
-                <li class="nav-item">
-                  <a
-                    href="https://www.creative-tim.com"
-                    class="nav-link text-white"
-                    target="_blank"
-                    >Creative Tim</a
-                  >
-                </li>
-                <li class="nav-item">
-                  <a
-                    href="https://www.creative-tim.com/presentation"
-                    class="nav-link text-white"
-                    target="_blank"
-                    >About Us</a
-                  >
-                </li>
-                <li class="nav-item">
-                  <a
-                    href="https://www.creative-tim.com/blog"
-                    class="nav-link text-white"
-                    target="_blank"
-                    >Blog</a
-                  >
-                </li>
-                <li class="nav-item">
-                  <a
-                    href="https://www.creative-tim.com/license"
-                    class="nav-link pe-0 text-white"
-                    target="_blank"
-                    >License</a
-                  >
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </footer>
     </div>
   </Header>
 </template>

src/views/Presentation/PresentationView.vue

@@ -14,7 +14,7 @@
 </style>
 
 <script setup>
-import { onMounted, onUnmounted } from "vue";
+import { onMounted, onUnmounted, computed, } from "vue";
 
 //example components
 import NavbarDefault from "../..//examples/navbars/NavbarDefault.vue";
@@ -29,6 +29,9 @@ import PresentationSearch from "./Sections/PresentationSearch.vue";
 //images
 import vueMkHeader from "@/assets/img/space-background.jpg";
 
+//authentification
+const isAuthenticated = computed(() => !!sessionStorage.getItem('access_token'));
+
 //hooks
 const body = document.getElementsByTagName("body")[0];
 onMounted(() => {
@@ -86,6 +89,18 @@ export default {
             >
               LinkedMin
             </h1>
+            <div v-if="isAuthenticated">
+                <h1
+                class="text-white pt-3 mt-n5 me-2"
+                :style="{ display: 'inline-block ', fontFamily: 'PressStart2P, sans-serif' }"
+                > 
+                Тариф Премиум</h1>
+            </div>
+
+              <div v-else>
+                <p>Тариф Бесплатный</p>
+              </div>
+
             <p class="lead text-white px-5 mt-3" :style="{ fontWeight: '500',  fontFamily: 'PressStart2P, sans-serif' }">
             Показывай себя и свои проекты.  
              Находи вдохновение, коллег и новые знания.

src/views/Presentation/Sections/PresentationSearch.vue

@@ -34,13 +34,16 @@ const search = async () => {
     <div>
         <h2>Найдено проектов: {{ searchResultProjects.length}} </h2>
         <div v-for = "project in searchResultProjects" :key="project.id">
-            <h3>{{ project.title }}</h3>
+            <h3>{{ project.title }} with ID {{ project.id }}</h3>
             <p>{{ project.description }}</p>
+            <a :href="`http://somebodyhire.me/project/${project.id}`">Страница проекта</a>
+
         </div>
         <h2>Найдено людей: {{ searchResultUsers.length}} </h2>
         <div v-for = "user in searchResultUsers" :key="user.id">
-            <h3>{{ user.username }}</h3>
+            <h3>{{ user.username }} with id {{ user.id }}</h3>
             <p>{{ user.email }}</p>
+            <a :href="`http://somebodyhire.me/profile/${user.id}`">Страница пользователя</a>
             
             
         </div>