Release: v1.0.0-alpha.2 (#2)

* update package * update gitignore * add prisma * add user service * add auth service * add password encryption * implement login route * add auth guard * remove test files * add dotenv package * add jwt generation * add jwt guard with profile controller * add profile site * improve code style with prettier * remove hello worlds * add helmet * add vue framework * connect vue to nest * add css * add login route * add logger middleware + loggin route * update package * add catch for duplicate user registration * implement submit method * make login and registerView more dynamic * hotfix * update prisma schema * update structure * generate Movie db service * add env tmp * update movie relation and service * create movie route and add imdb package * hotfix * implement GET movie:id * fix auth bugs * add info * implement POST movie * add try catch * implement GET movie/all * implement movie table * add client profile * client: add movie add button * prisma: add vote table * backend: edit structure * backend: add vote boilerplate * edit structure * backend: implement POST vote * db: improve naming * backend: add DELETE Vote * backend: add GET vote * update vote output * update proposer output * update package * Client: implement client-side state management to react on loading and logged_in * client: add history view * client: improve movie component table * backend: update route GET movie/all * client: display movie votes * client: implement vote * client: implement router logout * BD: add "name" attribute to userDB * backend: remove middleware from auth * backend: implement email confirm * common: update env tmp * client: add privacy * client: hot fix * client: hot fix * client: add AlertComponent.vue * backend: update movie information * backend: implement movie delete * client: implement delete own movie * client: implement form validation * common: add port configuration * client: add vertical scrolling in movie table * client: rename page title * client: add regex to imdb upload * client: outsource api call * client: hotfix * backend: fix initial interest (now server handled instead of client handled) * backend: restrict unvoting for own proposed movie * client: implement triggerable alert components * common: implemented client warnings on auth * common: implemented better version of client warnings on auth * client: style hotfix * common: update README.md * client: add GitHub Link * client: update login regex + add password confirm * client: create e-mail verified page * client: edit plugin structure * client: hot fix * client: hot fix * client: implement profile page style * client: divide form inputs into separate components * client: text improve * client: hotfix * client: hotfix * client: change route api/profile to api/user * backend: update auth (outsource password service + reduce payload to user_id) * backend: implemented user routes for self-management of own account * client: add profile options + implement get all user data * backend: add gravatar generation * client: add api logic to profile * backend: allow gravatar in helmet * backend: implement md5 hash algorithm * client: add logic to delete account * backend: outsource gravatar in a service + update gravatar url on email change * update README.md
EliasSchaut · Nov 14, 2022 · 86a7dfa · 86a7dfa
1 parent 2d398b1
commit 86a7dfa
Show file tree

Hide file tree

Showing 41 changed files with 951 additions and 141 deletions.
diff --git a/README.md b/README.md
@@ -2,8 +2,9 @@
 A full stack management application for voting movies for weekly movie events.
 
 ## Features
-- Account-Registration with email verification
+- Account-registration with email verification
 - Users can vote, add and remove movies
+- Users can manage own profile
 - Clean and responsive Bootstrap-UI
 - 100% useable without client (via REST-API)
 - **(soon)** automatic management of voted movies around movie events

diff --git a/client/index.html b/client/index.html
@@ -1,13 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Movie-Monday-Manager</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <title>Movie-Monday-Manager</title>
+
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="/src/main.ts"></script>
+</body>
 </html>
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -11,10 +11,14 @@
   "dependencies": {
     "bootstrap": "^5.2.0",
     "bootstrap-table": "^1.21.1",
+    "jquery": "^3.6.1",
     "vue": "^3.2.37",
     "vue-router": "^4.1.3"
   },
   "devDependencies": {
+    "@types/jquery": "^3.5.14",
+    "@types/bootstrap": "^5.2.6",
+    "@types/bootstrap-table": "^1.12.0",
     "@types/node": "^16.11.47",
     "@vitejs/plugin-vue": "^3.0.1",
     "@vue/tsconfig": "^0.1.3",

diff --git a/client/src/assets/img/Portrait_Placeholder.png b/client/src/assets/img/Portrait_Placeholder.png
diff --git a/client/src/components/LoginComponent.vue b/client/src/components/LoginComponent.vue
@@ -3,84 +3,39 @@
   <div class="form-intro">
     <p class="big"><b>{{ head[route] }}</b></p>
   </div>
-  <form :action="route_base + route" @submit.prevent="onSubmit" id="form_register" class="form was-validated" novalidate>
-    <div class="mb-3" v-if="route === 'register'">
-      <label for="form_name" class="form-label">{{ form.name }}</label>
-      <input type="text" class="form-control" id="form_name" placeholder="Max Mustermann" name="name" pattern="^[A-Z](.*)$" required>
-      <div class="valid-feedback">
-        Looks good!
-      </div>
-      <div class="invalid-feedback">
-        Should start with a capital letter.
-      </div>
-    </div>
-    <div class="mb-3">
-      <label for="form_username" class="form-label">{{ form.username }}</label>
-      <input type="text" class="form-control" id="form_username" placeholder="max@mustermann.de" name="username" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" required>
-      <div class="valid-feedback">
-        Looks good!
-      </div>
-      <div class="invalid-feedback">
-        Please enter a valid email address!
-      </div>
-    </div>
-    <div class="mb-3">
-      <label for="form_password" class="form-label">{{ form.password }}</label>
-      <input type="password" class="form-control" id="form_password" placeholder="•••" name="password"
-             pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$" required>
-      <div class="valid-feedback">
-        Looks good!
-      </div>
-      <div class="invalid-feedback">
-        Minimum eight characters, at least one letter and one number!
-      </div>
-    </div>
-    <button v-if="!loading.value" id="button_submit" type="submit" class="btn btn-primary form-submit"
-            data-bs-placement="bottom">
-      {{ form.submit.name }}
-    </button>
-    <button v-if="loading.value" id="button_loading" type="submit" class="btn btn-primary form-submit" disabled>
-      <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
-      {{ form.submit.loading }}
-    </button>
+  <form :action="route_base + route" @submit.prevent="onSubmit" id="form_register" class="form was-validated">
+    <NameComponent v-if="route === 'register'"/>
+    <EmailComponent />
+    <PasswordComponent v-if="route === 'register'" type="double" />
+    <PasswordComponent v-else type="single" />
+    <SubmitComponent />
   </form>
   <!----------------------------------------------------------------->
 </template>
 
 <script lang="ts">
-import { ref } from "vue";
-import router from "@/router";
+import router from "@/router/router";
 import { call } from "@/components/ts/api";
+import PasswordComponent from "@/components/util/form/PasswordComponent.vue";
+import EmailComponent from "@/components/util/form/EmailComponent.vue";
+import NameComponent from "@/components/util/form/NameComponent.vue";
+import SubmitComponent from "@/components/util/form/SubmitComponent.vue";
 
-let loading = ref(false);
 export default {
   name: "LoginComponent",
+  components: { SubmitComponent, NameComponent, EmailComponent, PasswordComponent },
   data() {
     return {
-      route_base: "api/auth/",
+      route_base: "/api/auth/",
       head: {
-        login: "Melde dich an!",
-        register: "Registriere dich!",
-      },
-      form: {
-        username: "E-Mail",
-        password: "Password",
-        name: "Name",
-        submit: {
-          name: "Submit",
-          loading: "Fertigstellen..."
-        }
+        login: "Log In!",
+        register: "Register!",
       }
     };
   },
   props: {
     route: String
   },
-  computed: {
-    loading() {
-      return loading;
-    }
-  },
   methods: {
     async onSubmit(e: SubmitEvent) {
       const form_html = e.target as HTMLFormElement;
@@ -105,6 +60,21 @@ export default {
             router.push("../login");
           }
         })
+    },
+    async check_password() {
+      const password = document.getElementById("form_password") as HTMLInputElement;
+      const password_confirm = document.getElementById("form_password_confirm") as HTMLInputElement;
+      if (password.value !== password_confirm.value) {
+        password_confirm.setCustomValidity("Should be the same as the password!");
+      } else {
+        password_confirm.setCustomValidity("");
+      }
+    }
+  },
+  mounted() {
+    const confirm = router.currentRoute.value.params.confirm
+    if (confirm) {
+      call("/api/auth/confirm/" + confirm)
     }
   }
 };
@@ -123,8 +93,4 @@ export default {
   flex-direction: column;
   justify-content: space-around;
 }
-
-.form-submit {
-  margin-top: 20px
-}
 </style>
diff --git a/client/src/components/MovieComponent.vue b/client/src/components/MovieComponent.vue
@@ -1,17 +1,17 @@
 <template>
 <div class="main table-responsive">
-  <table class="table table-striped table-bordered table-active">
+  <table class="table table-striped table-bordered table-active" >
     <thead>
       <tr class="table-dark align-middle">
-        <th scope="col" class="d-flex justify-content-between align-items-baseline" style="min-width: 100px">
+        <th data-field="title" data-sortable="true" scope="col" class="d-flex justify-content-between align-items-baseline" style="min-width: 100px">
           <div>Title</div>
           <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modal_add_movie" :disabled="!store.logged_in"><b>+</b></button>
         </th>
-        <th scope="col">Year</th>
-        <th scope="col">Genre</th>
-        <th scope="col">Proposer</th>
-        <th scope="col">Proposed&nbsp;on</th>
-        <th scope="col" colspan="2">Interested</th>
+        <th data-field="year" data-sortable="true" scope="col">Year</th>
+        <th data-field="gerne" data-sortable="true" scope="col">Genre</th>
+        <th data-field="proposer" data-sortable="true" scope="col">Proposer</th>
+        <th data-field="proposed_on" data-sortable="true" scope="col">Proposed&nbsp;on</th>
+        <th data-field="interested" data-sortable="true" scope="col" colspan="2">Interested</th>
       </tr>
     </thead>
     <tbody>
@@ -70,7 +70,7 @@
 import { store } from './ts/store'
 import { ref } from "vue";
 import { call } from "@/components/ts/api";
-import router from "@/router";
+import router from "@/router/router";
 
 export default {
   name: "MovieComponent",
@@ -88,7 +88,7 @@ export default {
     if (store.logged_in) {
       call("api/vote")
         .then((data) => { votes.value = data; })
-      call("api/profile")
+      call("api/user")
         .then((data) => { user_id.value = data.id; })
     }
 
@@ -123,7 +123,7 @@ export default {
       call("api/vote/" + imdb_id, "DELETE")
         .then(() => router.go(0))
     }
-  }
+  },
 };
 </script>
 

diff --git a/client/src/components/NavbarComponent.vue b/client/src/components/NavbarComponent.vue
@@ -18,6 +18,9 @@
           <li>
             <router-link class="nav-link" to="/privacy">Privacy</router-link>
           </li>
+          <li>
+            <a class="nav-link" href="https://github.com/EliasSchaut/Movie-Monday-Manager" target="_blank">GitHub</a>
+          </li>
         </ul>
         <div class="me-lg-1 spinner-border text-secondary" role="status" v-if="store.loading">
           <span class="visually-hidden">Loading...</span>