diff --git a/app/javascript/vue/projects/modals/edit.vue b/app/javascript/vue/projects/modals/edit.vue
index 2a4fc9c1c..04f3ac812 100644
--- a/app/javascript/vue/projects/modals/edit.vue
+++ b/app/javascript/vue/projects/modals/edit.vue
@@ -29,12 +29,12 @@
             </div>
             <div class="mt-6" :class="{'hidden': !visible}">
               <label class="sci-label">{{ i18n.t("user_assignment.select_default_user_role") }}</label>
-              <SelectDropdown :optionsUrl="userRolesUrl" :value="defaultRole" @change="changeRole" />
+              <SelectDropdown :options="userRoles" :value="defaultRole" @change="changeRole" />
             </div>
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
-            <button class="btn btn-primary" type="submit">
+            <button class="btn btn-primary" type="submit" :disabled="visible && !defaultRole">
               {{ i18n.t('projects.index.modal_edit_project.submit') }}
             </button>
           </div>
@@ -60,12 +60,25 @@ export default {
   components: {
     SelectDropdown,
   },
+  watch: {
+    visible(newValue) {
+      if (newValue) {
+        [this.defaultRole] = this.userRoles.find((role) => role[1] === 'Viewer');
+      } else {
+        this.defaultRole = null;
+      }
+    }
+  },
+  mounted() {
+    this.fetchUserRoles();
+  },
   data() {
     return {
       name: this.project.name,
       visible: !this.project.hidden,
       defaultRole: this.project.default_public_user_role_id,
       error: null,
+      userRoles: []
     };
   },
   methods: {
@@ -86,6 +99,14 @@ export default {
     changeRole(role) {
       this.defaultRole = role;
     },
+    fetchUserRoles() {
+      if (this.userRolesUrl) {
+        axios.get(this.userRolesUrl)
+          .then((response) => {
+            this.userRoles = response.data.data;
+          });
+      }
+    }
   },
 };
 </script>
diff --git a/app/javascript/vue/projects/modals/new.vue b/app/javascript/vue/projects/modals/new.vue
index bbf674fbb..9d48fa18d 100644
--- a/app/javascript/vue/projects/modals/new.vue
+++ b/app/javascript/vue/projects/modals/new.vue
@@ -31,12 +31,12 @@
             </div>
             <div class="mt-6" :class="{'hidden': !visible}">
               <label class="sci-label">{{ i18n.t("user_assignment.select_default_user_role") }}</label>
-              <SelectDropdown :optionsUrl="userRolesUrl" :value="defaultRole" @change="changeRole" />
+              <SelectDropdown :options="userRoles" :value="defaultRole" @change="changeRole" />
             </div>
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
-            <button class="btn btn-primary" type="submit">
+            <button class="btn btn-primary" type="submit" :disabled="disableSubmit || (visible && !defaultRole)">
               {{ i18n.t('projects.index.modal_new_project.create') }}
             </button>
           </div>
@@ -63,19 +63,32 @@ export default {
   components: {
     SelectDropdown,
   },
+  watch: {
+    visible(newValue) {
+      if (newValue) {
+        [this.defaultRole] = this.userRoles.find((role) => role[1] === 'Viewer');
+      } else {
+        this.defaultRole = null;
+      }
+    }
+  },
+  mounted() {
+    this.fetchUserRoles();
+  },
   data() {
     return {
       name: '',
       visible: false,
       defaultRole: null,
       error: null,
-      disableSubmit: false
+      disableSubmit: false,
+      userRoles: []
     };
   },
   methods: {
-    submit() {
+    async submit() {
       this.disableSubmit = true;
-      axios.post(this.createUrl, {
+      await axios.post(this.createUrl, {
         project: {
           name: this.name,
           visibility: (this.visible ? 'visible' : 'hidden'),
@@ -93,6 +106,14 @@ export default {
     changeRole(role) {
       this.defaultRole = role;
     },
+    fetchUserRoles() {
+      if (this.userRolesUrl) {
+        axios.get(this.userRolesUrl)
+          .then((response) => {
+            this.userRoles = response.data.data;
+          });
+      }
+    }
   },
 };
 </script>
diff --git a/app/javascript/vue/protocols/modals/new.vue b/app/javascript/vue/protocols/modals/new.vue
index 59f1b6659..b95166347 100644
--- a/app/javascript/vue/protocols/modals/new.vue
+++ b/app/javascript/vue/protocols/modals/new.vue
@@ -30,12 +30,12 @@
             </div>
             <div class="mt-6" :class="{'hidden': !visible}">
               <label class="sci-label">{{ i18n.t("protocols.new_protocol_modal.role_label") }}</label>
-              <SelectDropdown :optionsUrl="userRolesUrl" :value="defaultRole" @change="changeRole" />
+              <SelectDropdown :options="userRoles" :value="defaultRole" @change="changeRole" />
             </div>
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
-            <button class="btn btn-primary" type="submit">
+            <button class="btn btn-primary" type="submit" :disabled="visible && !defaultRole">
               {{ i18n.t('protocols.new_protocol_modal.create_new') }}
             </button>
           </div>
@@ -61,11 +61,24 @@ export default {
   components: {
     SelectDropdown
   },
+  watch: {
+    visible(newValue) {
+      if (newValue) {
+        [this.defaultRole] = this.userRoles.find((role) => role[1] === 'Viewer');
+      } else {
+        this.defaultRole = null;
+      }
+    }
+  },
+  mounted() {
+    this.fetchUserRoles();
+  },
   data() {
     return {
       name: '',
       visible: false,
       defaultRole: null,
+      userRoles: [],
       error: null
     };
   },
@@ -86,6 +99,14 @@ export default {
     },
     changeRole(role) {
       this.defaultRole = role;
+    },
+    fetchUserRoles() {
+      if (this.userRolesUrl) {
+        axios.get(this.userRolesUrl)
+          .then((response) => {
+            this.userRoles = response.data.data;
+          });
+      }
     }
   }
 };