Merge pull request #18 from myrunes/dev

main 1.9

Author: zekroTJA

Diff for: package-lock.json

@@ -14,6 +14,7 @@
     "request": "^2.88.0",
     "vue": "^2.6.10",
     "vue-async-computed": "^3.7.0",
+    "vue-recaptcha": "^1.3.0",
     "vue-resource": "^1.5.1",
     "vue-router": "^3.0.6",
     "vue-tooltipster": "^1.2.0",

Diff for: package.json

@@ -15,8 +15,8 @@
     <meta name="twitter:title" property="og:title" itemprop="name" content="MYRUNES" />
     <meta name="twitter:description" property="og:description" itemprop="description" content="MYRUNES | Save your League of Legends runes without wasting money." />
 
+    <script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer></script>
 
-    <!-- hide favicon until we have an icon for this -->
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>MYRUNES</title>
   </head>

Diff for: public/index.html

@@ -20,22 +20,25 @@
           target="_blank"
           class="main-link"
         >
-          changed the password hashing
-          algorithm to argon2.
+          changed the password hashing algorithm to argon2.
         </a>
         <br />Please, go to your
-        <router-link to="/settings" class="main-link">settings</router-link>&nbsp;and change your password
-        in order to switch to the new algorithm.
+        <router-link to="/settings" class="main-link">settings</router-link
+        >&nbsp;and change your password in order to switch to the new algorithm.
         <br />
       </p>
     </InfoBubble>
 
     <!-- INFO BETA WARN -->
-    <InfoBubble ref="betawarn" color="red" @hides="onBetaWarnHides" style="z-index: 110;">
+    <InfoBubble
+      ref="betawarn"
+      color="red"
+      @hides="onBetaWarnHides"
+      style="z-index: 110;"
+    >
       <p class="text-center m-2">
         <b>ATTENTION:</b>&nbsp;This instance is running on a non-release canary
-        build which is not fully tested yet!
-        <br />Actions taken here may lead
+        build which is not fully tested yet! <br />Actions taken here may lead
         to loss or corruption of data!
       </p>
     </InfoBubble>
@@ -93,6 +96,10 @@ export default {
       }
     });
 
+    Rest.getRecapctchaInfo().then((res) => {
+      this.$store.commit('setReCaptchaSiteKey', res.body.sitekey);
+    });
+
     EventBus.$on('login', () => {
       this.checkLogin();
     });

Diff for: src/App.vue

@@ -346,4 +346,11 @@ span.tb {
 
 .w-100 {
   width: 100%;
+}
+
+.viewlimit-width {
+  width: 100%;
+  max-width: 950px;
+  margin-left: auto !important;
+  margin-right: auto !important;
 }

Diff for: src/css/global.css

@@ -25,14 +25,15 @@ function checkUsername(uname) {
   });
 }
 
-function register(username, password, remember) {
+function register(username, password, remember, recaptcharesponse) {
   return _req({
     url: `${HOST}/users`,
     method: 'POST',
     json: {
       username,
       password,
       remember,
+      recaptcharesponse,
     },
   });
 }
@@ -181,6 +182,13 @@ function getVersion() {
   });
 }
 
+function getRecapctchaInfo() {
+  return _req({
+    url: `${HOST}/recaptchainfo`,
+    method: 'GET',
+  });
+}
+
 function getAPIToken() {
   return _req({
     url: `${HOST}/apitoken`,
@@ -239,11 +247,11 @@ function resetPassword(mailaddress) {
   });
 }
 
-function resetPasswordConfirm(token, new_password, page_names) {
+function resetPasswordConfirm(token, new_password, recaptcharesponse) {
   return _req({
     url: `${HOST}/users/me/passwordreset/confirm`,
     method: 'POST',
-    json: { token, new_password, page_names },
+    json: { token, new_password, recaptcharesponse },
   });
 }
 
@@ -292,6 +300,7 @@ export default {
   updateShare,
   deleteShare,
   getVersion,
+  getRecapctchaInfo,
   getAPIToken,
   generateAPIToken,
   deleteAPIToken,

Diff for: src/js/rest.js

@@ -19,12 +19,16 @@ Vue.use(AsyncComputed);
 const store = new Vuex.Store({
   state: {
     loggedIn: null,
+    reCaptchaSiteKey: null,
   },
 
   mutations: {
     setLoggedIn(state, v) {
       state.loggedIn = v;
     },
+    setReCaptchaSiteKey(state, v) {
+      state.reCaptchaSiteKey = v;
+    },
   },
 });
 

Diff for: src/main.js

@@ -1,5 +1,10 @@
+<!-- @format -->
+
 <template>
-  <div class="mw-container" :style="{ padding: $store.state.loggedIn === false ? '50px' : '0px' }">
+  <div
+    class="mw-container viewlimit-width"
+    :style="{ padding: $store.state.loggedIn === false ? '50px' : '0px' }"
+  >
     <div class="logo mb-4"></div>
     <p>Copyright © {{ new Date().getFullYear() }} MYRUNES</p>
     <table class="mb-3">
@@ -19,47 +24,55 @@
       </tbody>
     </table>
     <p>
-      This site is using image material and assets originally created by Riot Games, Inc. (Champion Avatars, Rune Assets).
-      <br />We just want to clarify, that we (MYRUNES) are not the creators and credit holders of these assets.
+      This site is using image material and assets originally created by Riot
+      Games, Inc. (Champion Avatars, Rune Assets).
+      <br />We just want to clarify, that we (MYRUNES) are not the creators and
+      credit holders of these assets.
     </p>
 
     <h2 class="mt-4 mb-3">Source Code</h2>
     <p>
-      Yes, the whole project is completely open source. Below, there are some links
-      to the official sources.
+      Yes, the whole project is completely open source. Below, there are some
+      links to the official sources.
     </p>
     <a
       class="icon-link github"
       href="https://github.com/myrunes"
       target="_blank"
-    >GitHub Organization</a>
+      >GitHub Organization</a
+    >
     <a
       class="icon-link github"
       href="https://github.com/myrunes/backend"
       target="_blank"
-    >Back End (REST API) Repository</a>
+      >Back End (REST API) Repository</a
+    >
     <a
       class="icon-link github"
       href="https://github.com/myrunes/frontend"
       target="_blank"
-    >Front End Repository</a>
+      >Front End Repository</a
+    >
 
     <h2 class="mt-4 mb-3">Information and Privacy</h2>
     <a
       class="icon-link info"
       href="https://github.com/myrunes/backend/blob/master/docs/imprint.txt"
       target="_blank"
-    >Imprint</a>
+      >Imprint</a
+    >
     <a
       class="icon-link info"
       href="https://github.com/myrunes/backend/blob/master/docs/cookie-usage.md"
       target="_blank"
-    >Cookie and Local Storage Usage</a>
+      >Cookie and Local Storage Usage</a
+    >
     <a
       class="icon-link info"
       href="https://github.com/myrunes/backend/blob/master/LICENSE"
       target="_blank"
-    >Open Source Licence (MIT)</a>
+      >Open Source Licence (MIT)</a
+    >
   </div>
 </template>
 
@@ -130,4 +143,4 @@ th {
   content: url('/assets/info.svg');
   transform: scale(1.15);
 }
-</style>
+</style>

Diff for: src/routes/About.vue

@@ -1,7 +1,7 @@
 <!-- @format -->
 
 <template>
-  <div>
+  <div class="viewlimit-width">
     <div
       v-if="isDragging"
       class="hover-detector top"
@@ -23,7 +23,11 @@
     </InfoBubble>
 
     <div v-if="champ" class="champ-header mb-3">
-      <img :src="`${APIHOST}/assets/champions/avatars/${champ}.png`" width="42" height="42" />
+      <img
+        :src="`${APIHOST}/assets/champions/avatars/${champ}.png`"
+        width="42"
+        height="42"
+      />
       <h2>{{ champData.name.toUpperCase() }}</h2>
     </div>
 
@@ -34,18 +38,23 @@
         placeholder="Search for page name"
         @input="onSearchInput"
       />
-      <b-dropdown :text="`Sorted by: ${sortByText}`" class="drop-down" toggle-class="drop-down-btn">
+      <b-dropdown
+        :text="`Sorted by: ${sortByText}`"
+        class="drop-down"
+        toggle-class="drop-down-btn"
+      >
         <b-dropdown-item @click="onSortBy('custom')">Custom</b-dropdown-item>
-        <b-dropdown-item @click="onSortBy('created')">Created Date</b-dropdown-item>
+        <b-dropdown-item @click="onSortBy('created')"
+          >Created Date</b-dropdown-item
+        >
         <b-dropdown-item @click="onSortBy('title')">Title</b-dropdown-item>
       </b-dropdown>
     </div>
 
     <div class="page-container">
-      <h3
-        v-if="pages !== null && pages.length < 1"
-        class="no-pages"
-      >There are no pages belonging to this champion. : (</h3>
+      <h3 v-if="pages !== null && pages.length < 1" class="no-pages">
+        There are no pages belonging to this champion. : (
+      </h3>
 
       <draggable
         :list="pages"
@@ -112,7 +121,7 @@ export default {
     Draggable,
   },
 
-  data: function () {
+  data: function() {
     return {
       champ: null,
       favorite: false,
@@ -134,7 +143,7 @@ export default {
   },
 
   computed: {
-    sortByText: function () {
+    sortByText: function() {
       switch (this.sortBy) {
         case 'created':
           return 'Created Date';
@@ -148,7 +157,7 @@ export default {
     },
   },
 
-  created: function () {
+  created: function() {
     this.sortBy = this.$route.query.sortBy;
 
     if (!this.sortBy) {
@@ -173,7 +182,7 @@ export default {
     }
   },
 
-  destroyed: function () {
+  destroyed: function() {
     Utils.removeWindowListener('keydown', this.onSearchPress);
   },
 

Diff for: src/routes/Champ.vue

@@ -1,33 +1,31 @@
+<!-- @format -->
+
 <template>
-  <div class="mw-container" :style="{ padding: $store.state.loggedIn === false ? '50px' : '0px' }">
+  <div
+    class="mw-container viewlimit-width"
+    :style="{ padding: $store.state.loggedIn === false ? '50px' : '0px' }"
+  >
     <div class="logo mb-4"></div>
 
     <h2 class="mt-4 mb-3">Contact</h2>
     <p>
       If you want to contact us, send an e-mail to
-      <b>
-        <a href="mailto:[email protected]">[email protected]</a>
-      </b>.
+      <b> <a href="mailto:[email protected]">[email protected]</a> </b>.
     </p>
     <p>
       Alternatively, you can also contact us on our
-      <a href="/discord" target="_blank">
-        <b>Discord Server</b>
-      </a>.
-      <br />Of cousre, you can also leave some critics and suggestions there, if you want.
+      <a href="/discord" target="_blank"> <b>Discord Server</b> </a>. <br />Of
+      cousre, you can also leave some critics and suggestions there, if you
+      want.
     </p>
 
     <h2 class="mt-4 mb-3">Support Us</h2>
     <p>
-      This service is (ad-)free and open source, so we don't earn any money with this page.
-      Per year, we pay €20 (~ $22) for the myrunes.com domain and €60 (~ $66) for the root server.
-      So, if you want to support us, you can do this via
-      <a
-        href="/paypal"
-        target="_blank"
-      >
-        <b>PayPal</b>
-      </a>, if you want.
+      This service is (ad-)free and open source, so we don't earn any money with
+      this page. Per year, we pay €20 (~ $22) for the myrunes.com domain and €60
+      (~ $66) for the root server. So, if you want to support us, you can do
+      this via
+      <a href="/paypal" target="_blank"> <b>PayPal</b> </a>, if you want.
     </p>
   </div>
 </template>
@@ -62,4 +60,4 @@ th {
 .mw-container {
   max-width: 1000px;
 }
-</style>
+</style>