better save new token modal

* now save new token modal clear the data on submit
* url fix on homepage

resources/js/components/Interview/newtokenmodal.vue

 <template>
     <section v-show="isComponentModalActive">
-        <!-- 
-        1. this modal needs vuex to open an close.
-        2. this modal needs to send to vuex the image, see this.$store.commit("newinterview", this.newinterview);
-        3. 
-
-
-    -->
         <div
             class="fixed inset-0 z-50 overflow-y-auto"
             aria-labelledby="modal-title"
@@ -16,16 +9,6 @@
             <div
                 class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0"
             >
-                <!--
-      Background overlay, show/hide based on modal state.
-
-      Entering: "ease-out duration-300"
-        From: "opacity-0"
-        To: "opacity-100"
-      Leaving: "ease-in duration-200"
-        From: "opacity-100"
-        To: "opacity-0"
-    -->
                 <div
                     class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"
                     aria-hidden="true"
@@ -38,16 +21,6 @@
                     >&#8203;</span
                 >
 
-                <!--
-      Modal panel, show/hide based on modal state.
-
-      Entering: "ease-out duration-300"
-        From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-        To: "opacity-100 translate-y-0 sm:scale-100"
-      Leaving: "ease-in duration-200"
-        From: "opacity-100 translate-y-0 sm:scale-100"
-        To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-    -->
                 <div
                     class="relative inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6"
                 >
@@ -160,7 +133,11 @@
                         >
                             <label
                                 for="name"
-                                class="block text-xs font-medium text-gray-900"
+                                :class="
+                                    error
+                                        ? 'block text-xs font-medium text-red-500'
+                                        : 'block text-xs font-medium text-gray-900'
+                                "
                                 >{{ trans("Token Name") }}</label
                             >
                             <input
@@ -209,30 +186,33 @@ export default {
     data() {
         return {
             isComponentModalActive: false,
-            tokenName: "",
             file: null,
             fileUpload: null,
             showCombobox: false,
             ispreset: false,
             base64: "",
             image_path: "",
+            error: false,
         };
     },
     created() {
         this.newinterview.newtoken.file = { name: "" };
+        this.newinterview.newtoken = { name: "" };
     },
     computed: {
         ...mapState(["newinterview"]),
     },
     methods: {
         closeModal: function () {
-            this.newinterview.newtokenmodal = false;
+            document.getElementById("tokenImage").src =
+                "data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
             this.file = null;
             this.fileUpload = null;
-            this.tokenName = "";
             this.base64 = "";
             this.image_path = "";
-            document.getElementById("tokenImage").src = "";
+            this.error = false;
+            this.newinterview.newtoken = { name: "" };
+            this.newinterview.newtokenmodal = false;
         },
         handler: function () {
             document.activeElement.blur();
@@ -358,16 +338,31 @@ export default {
             ctx.drawImage(img, cx, cy, cw, ch, x, y, w, h);
         },
         saveToken: function () {
-            let name = "study";
-            let self = this;
-            name = name.replace(/[\[\]]/g, "\\$&");
-            var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
-                result = regex.exec(this.url)[2].replace(/\+/g, " ");
+            if (
+                !("name" in this.newinterview.newtoken) ||
+                ("name" in this.newinterview.newtoken &&
+                    this.newinterview.newtoken.name === "")
+            ) {
+                this.error = true;
+            } else {
+                let name = "study";
+                let self = this;
+                name = name.replace(/[\[\]]/g, "\\$&");
+                var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+                    result = regex.exec(this.url)[2].replace(/\+/g, " ");
 
-            this.$store.dispatch("saveToken", result).then(function () {
-                self.newinterview.newtoken = { name: "" };
-                self.closeModal();
-            });
+                this.$store.dispatch("saveToken", result).then(function () {
+                    self.error = false;
+                    document.getElementById("tokenImage").src =
+                        "data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
+                    self.file = null;
+                    self.fileUpload = null;
+                    self.base64 = "";
+                    self.image_path = "";
+                    self.newinterview.newtoken = { name: "" };
+                    self.newinterview.newtokenmodal = false;
+                });
+            }
         },
         setTokenFromPreset: function (file = "") {
             this.newinterview.newtoken.file = file;

resources/js/components/studieslist.vue

@@ -254,7 +254,7 @@
                     >
                         <a
                             title="manage study"
-                            :href="productionUrl + 'studies/' + study.id"
+                            :href="productionUrl + '/studies/' + study.id"
                             class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-blue-500 border border-transparent rounded-md shadow-sm cursor-pointer hover:bg-blue-700 hover:text-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 xl:w-full"
                         >
                             {{ trans("Manage Project") }}