feat: implement Advanced Settings Modal layout

package-lock.json

@@ -6038,6 +6038,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.11.0.tgz",
@@ -7671,6 +7676,14 @@
       "integrity": "sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g==",
       "dev": true
     },
+    "vue-js-modal": {
+      "version": "2.0.0-rc.6",
+      "resolved": "https://registry.npmjs.org/vue-js-modal/-/vue-js-modal-2.0.0-rc.6.tgz",
+      "integrity": "sha512-bJOm7Yhrl0ur/QyXjoC3gMMmE7UxiVEcS2rl8v9iPXIe9QLvjiCSZElSOvvyps8LNuG1X0rPifZGxI/CWKCFaw==",
+      "requires": {
+        "resize-observer-polyfill": "^1.5.1"
+      }
+    },
     "vue-loader": {
       "version": "14.2.4",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-14.2.4.tgz",
@@ -7751,23 +7764,15 @@
         }
       }
     },
-    "vue-lottie": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/vue-lottie/-/vue-lottie-0.2.1.tgz",
-      "integrity": "sha512-zInUX69Ij8MhVR3XArpu4PqqBoufwKxS5UMutWCPm59VUaB5H6GtnaIzf9M+l6aYU+Kr8gF/W9dzWLgRuU6V+Q==",
-      "requires": {
-        "lottie-web": "^5.1.9"
-      }
-    },
     "vue-router": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.6.tgz",
       "integrity": "sha512-Ox0ciFLswtSGRTHYhGvx2L44sVbTPNS+uD2kRISuo8B39Y79rOo0Kw0hzupTmiVtftQYCZl87mwldhh2L9Aquw=="
     },
     "vue-select": {
-      "version": "3.10.5",
-      "resolved": "https://registry.npmjs.org/vue-select/-/vue-select-3.10.5.tgz",
-      "integrity": "sha512-32kJNHE9FqV2RzuIfwAYHny40+EltZjf86Jf4cIHc0QUy2/yAr0PM7cET1MBJe+puJdYrItGTwnmTC4I9gKLWg=="
+      "version": "3.10.7",
+      "resolved": "https://registry.npmjs.org/vue-select/-/vue-select-3.10.7.tgz",
+      "integrity": "sha512-6rvIYBNEp9y0xK/sq2ZzDCxKA2BoVNliyctOeMtzarQzvpLlab7l8zvqr2jhGZOxozp7jd2AvZxpF3Ivems2wQ=="
     },
     "vue-snotify": {
       "version": "3.2.1",

package.json

@@ -21,8 +21,9 @@
     "vue": "^2.6.10",
     "vue-click-outside": "^1.1.0",
     "vue-datetime": "^1.0.0-beta.11",
+    "vue-js-modal": "^2.0.0-rc.6",
     "vue-router": "^3.0.6",
-    "vue-select": "^3.4.0",
+    "vue-select": "^3.10.7",
     "vue-snotify": "^3.2.1",
     "vue-spinner": "^1.0.4",
     "vuelidate": "^0.7.5",

src/_assets/post_auth_messages.json

@@ -9,5 +9,7 @@
   "button_label_launch_bubble": "Launch Bubble",
   "button_label_advanced_bubble_settings": "Launch with Advanced Settings",
 
-  "how_it_works_title": "How does it work?"
+  "how_it_works_title": "How does it work?",
+
+  "field_label_bubble_name": "Custom Bubble Name"
 }

src/_components/modals/AdvancedSettings.vue

@@ -0,0 +1,131 @@
+<!-- Copyright (c) 2020 Bubble, Inc. All rights reserved. For personal (non-commercial) use, see license: https://getbubblenow.com/bubble-license/ -->
+<template>
+  <modal
+    name="advanced-settings"
+    :adaptive="true"
+    width="90%"
+    maxWidth="600"
+    height="auto"
+  >
+    <a class="close-btn" @click="hide">
+      <i class="fa fa-times"></i>
+    </a>
+
+    <form class="form">
+      <h3 class="text-center mb-5">
+        {{ messages.field_label_show_advanced_plan_options }}
+      </h3>
+      <div class="form-group">
+        <Input
+          class="form-control"
+          :placeholder="messages.field_label_bubble_name"
+        />
+      </div>
+      <div class="form-group">
+        <v-select :placeholder="messages.field_label_network_domain"></v-select>
+      </div>
+      <div class="form-group">
+        <v-select :placeholder="messages.field_label_region"></v-select>
+      </div>
+      <div class="form-group">
+        <v-select :placeholder="messages.field_label_locale"></v-select>
+      </div>
+      <div class="form-group">
+        <v-select :placeholder="messages.field_label_timezone"></v-select>
+      </div>
+      <div class="form-group">
+        <v-select :placeholder="messages.field_label_footprint"></v-select>
+      </div>
+      <div class="form-group">
+        <v-select
+          :placeholder="messages.field_label_network_ssh_key"
+        ></v-select>
+      </div>
+      <div class="form-group">
+        <Button color="outline" height="34">
+          {{ messages.form_title_add_ssh_key }}
+        </Button>
+        <p class="description text-left ml-0 mt-2">
+          {{ messages.field_description_network_ssh_key }}
+        </p>
+      </div>
+
+      <div class="form-group my-4">
+        <Checkbox :label="messages.field_label_sendInformation" />
+      </div>
+
+      <div
+        class="form-group mt-4 d-flex justify-content-center align-items-center"
+      >
+        <div class="flex-grow-1 pr-2">
+          <Button block color="outline">
+            {{ messages.button_label_cancel }}
+          </Button>
+        </div>
+        <div class="flex-grow-1 pl-2">
+          <Button block color="default">
+            {{ messages.button_label_register }}
+          </Button>
+        </div>
+      </div>
+    </form>
+  </modal>
+</template>
+
+<style lang="scss">
+@import '../../_scss/components/form';
+@import '../../_scss/breakpoints';
+
+.vm--container {
+  .vm--overlay {
+    background-color: #6f28abcc;
+  }
+  .vm--modal {
+    border-radius: 10px;
+    padding: 40px;
+    position: relative;
+
+    @include respond-below(sm) {
+      padding: 40px 20px;
+    }
+  }
+}
+
+.close-btn {
+  position: absolute;
+  top: 15px;
+  right: 20px;
+  font-size: 20px;
+}
+</style>
+
+<script>
+import { mapState } from 'vuex';
+
+import { Button, Input, Checkbox } from '../shared';
+
+export default {
+  components: {
+    Button,
+    Input,
+    Checkbox,
+  },
+
+  computed: {
+    ...mapState('system', ['configs', 'messages']),
+  },
+
+  methods: {
+    show() {
+      this.$modal.show('advanced-settings');
+    },
+    hide() {
+      this.$modal.hide('advanced-settings');
+    },
+  },
+
+  mounted() {
+    this.show();
+  },
+};
+</script>

src/_components/modals/index.js

@@ -0,0 +1,5 @@
+/**
+ * Copyright (c) 2020 Bubble, Inc.  All rights reserved.
+ * For personal (non-commercial) use, see license: https://getbubblenow.com/bubble-license/
+ */
+export { default as AdvancedSettingsModal } from './AdvancedSettings';

src/_pages/main/bubble/LaunchBubble.vue

@@ -17,7 +17,7 @@
         {{ messages.button_label_launch_bubble }}
       </Button>
 
-      <a class="mt-3 btn-modal" href="#">
+      <a class="mt-3 btn-modal" href="#" @click="openSettingsModal">
         {{ messages.button_label_advanced_bubble_settings }}
       </a>
     </div>
@@ -26,6 +26,7 @@
     <a class="how-it-works-section-link text-center d-block mt-5" href="#">
       {{ messages.how_it_works_title }}
     </a>
+    <AdvancedSettingsModal ref="settingsModal" />
   </div>
 </template>
 
@@ -61,12 +62,12 @@ import Lottie from 'lottie-web';
 
 import { util } from '~/_helpers';
 import { Button } from '~/_components/shared';
-import { Features } from '~/_components/sections';
+import { AdvancedSettingsModal } from '~/_components/modals';
 
 export default {
   components: {
     Button,
-    Features,
+    AdvancedSettingsModal,
   },
 
   data() {
@@ -90,7 +91,12 @@ export default {
     console.log(this.user);
   },
 
-  methods: {},
+  methods: {
+    openSettingsModal(ev) {
+      ev.preventDefault();
+      this.$refs.settingsModal.show();
+    },
+  },
 
   watch: {},
 };

src/_scss/_base.scss

@@ -2,12 +2,12 @@
 @import 'variables';
 
 @import 'components/text';
+@import 'components/select';
 
 // html,
 // body {
 //   font-family: 'Lato';
 // }
-
 p {
   color: $default-text-color;
-}
+}

src/index.js

@@ -30,6 +30,8 @@ Vue.config.productionTip = false;
 
 // plugins
 import './_plugins/snotify';
+import './_plugins/modal';
+import './_plugins/select';
 
 // not sure what the best way is to include these icons, we reference them programmatically via string resource/messages
 // Vue.component('font-awesome-icon', FontAwesomeIcon);