feat: implement registration page

src/_components/shared/Button.vue

@@ -29,7 +29,11 @@
   height: var(--height);
   width: var(--width);
   cursor: pointer;
-  border: none;
+  border: 1px solid $border-color;
+
+  &:focus {
+    outline: none;
+  }
 
   // &:hover {
   //   box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
@@ -50,6 +54,7 @@
 
   &.link {
     background-color: transparent;
+    border: none;
     color: #737373;
 
     .btn--text {
@@ -62,6 +67,11 @@
     background: linear-gradient(300deg, #b838c9 -5%, #ee2f8e 95%);
     color: white;
   }
+
+  &.color-outline {
+    background: white;
+    color: $vivid-pink;
+  }
 }
 </style>
 

src/_components/shared/Card.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="card-container h-100">
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.card-container {
+  background-color: white;
+  padding: 40px;
+  border-radius: 10px;
+  box-shadow: 0px 10px 50px #dee1ec;
+}
+
+.card-content {
+  display: flex;
+  flex-direction: column;
+
+  align-items: center;
+
+  .card-icon {
+    font-family: ETmodules;
+    content: attr(data-icon);
+    font-weight: 400;
+    font-size: 32px;
+    line-height: 1;
+    padding: 25px;
+    border-radius: 100%;
+  }
+
+  .card-title {
+    text-align: center;
+    font-weight: bold;
+    color: #333;
+    margin-top: 30px;
+    margin-bottom: 20px;
+  }
+
+  .card-message {
+    text-align: center;
+    font-weight: 400;
+    color: #666;
+    line-height: 2;
+  }
+}
+</style>
+
+<script>
+export default {};
+</script>

src/_components/shared/Checkbox.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="d-flex align-items-center">
+    <input
+      v-bind="$attrs"
+      v-model="content"
+      type="checkbox"
+      @change="handleChange"
+    />
+    <label v-html="label" class="label"></label>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.label {
+  font-size: 14px;
+  color: #666666;
+  margin-bottom: 0;
+  margin-left: 5px;
+}
+</style>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      content: this.value,
+    };
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('input', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+  },
+};
+</script>

src/_components/shared/index.js

@@ -1,2 +1,4 @@
 export { default as Button } from './Button';
+export { default as Card } from './Card';
+export { default as Checkbox } from './Checkbox';
 export { default as Input } from './Input';

src/_dummy/messages.json

@@ -0,0 +1,38 @@
+{
+  "register_title": "Sign Up for a Bubble: The Safest Place on the Internet.",
+  "register_blurb": "Block behavior tracking, ads and other rude behaviour.",
+  "register_field_label_email": "Email address (will be your username)",
+  "field_label_password": "Choose Password",
+  "field_password_hint": "At least 8 characters, one letter, one number\n & one special character.",
+  "field_label_password_confirm": "Retype Password",
+  "message_request_promoCode": "Don't have a Beta Invite code? Request one here.",
+  "field_label_agreeToTerms": "I agree to the <a href='https://getbubblenow.com/privacy' target='_blank' rel='noopener'>Privacy Policy</a> and <a href='https://getbubblenow.com/terms' target='_blank' rel='noopener'>Terms of Service</a>.",
+  "field_label_sendInformation": "Send me information about My Bubble",
+  "field_label_sendNews": "Send me news about Bubble",
+
+  "marketing_message_got_you_covered_title": "We've Got You Covered",
+  "marketing_message_topics": "browse_anon,no_borders,unlimited_devices,dedicated",
+  "marketing_message_browse_anon_icon": "&#xe0f6;",
+  "marketing_message_browse_anon_color": "#7a69e6",
+  "marketing_message_browse_anon_background_color": "rgba(122,105,230,0.3)",
+  "marketing_message_browse_anon_title": "Browse Anonymously",
+  "marketing_message_browse_anon_content": "BubbleVPN uses industrial-strength encryption to protect your data: IKEv2 with AES-GCM, SHA2, and P-256.",
+
+  "marketing_message_no_borders_icon": "&#xe080;",
+  "marketing_message_no_borders_color": "#6a9ae8",
+  "marketing_message_no_borders_background_color": "rgba(106,154,232,0.3)",
+  "marketing_message_no_borders_title": "Internet Without Borders",
+  "marketing_message_no_borders_content": "Move your Bubble around the world. Access any content regardless of your location.",
+
+  "marketing_message_unlimited_devices_icon": "&#xe00e;",
+  "marketing_message_unlimited_devices_color": "#f767b4",
+  "marketing_message_unlimited_devices_background_color": "rgba(247,103,180,0.3)",
+  "marketing_message_unlimited_devices_title": "Unlimited Devices",
+  "marketing_message_unlimited_devices_content": "There is no limit to the number of devices you can connect to your bubble.",
+
+  "marketing_message_dedicated_icon": "&#xe033;",
+  "marketing_message_dedicated_color": "#76ce44",
+  "marketing_message_dedicated_background_color": "rgba(118,206,68,0.3)",
+  "marketing_message_dedicated_title": "Dedicated, Private & Secure",
+  "marketing_message_dedicated_content": "Your Bubble runs on its own dedicated system. Not even we have access to your Bubble."
+}

src/_pages/auth/ForgotPassword.vue

@@ -7,7 +7,7 @@
       {{ messages.forgot_password_blurb }}
     </h4>
 
-    <form class="login-form">
+    <form class="auth-form">
       <div class="form-group">
         <Input
           class="form-control"
@@ -15,7 +15,7 @@
           :placeholder="messages.field_email_hint"
         />
       </div>
-      <Button color="default" class="login-btn">
+      <Button color="default" class="auth-form-submit">
         {{ messages.button_label_forgot_password }}
       </Button>
       <p class="text-center mt-3">
@@ -38,19 +38,7 @@
   margin-top: 16px;
 }
 
-.login-form {
-  background-color: white;
-  box-shadow: $form-box-shadow;
-
-  width: 450px;
-  max-width: 90%;
-  margin: 80px auto 0;
-  padding: 40px 36px;
-
-  border-radius: $form-border-radius;
-}
-
-.login-btn {
+.forgot-password-btn {
   margin-top: 55px;
 }
 

src/_pages/auth/Layout.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="auth-layout h-100 d-flex flex-column">
     <Header></Header>
-    <div class="content flex-grow-1">
+    <div :class="backgroundClass" class="content flex-grow-1">
       <router-view></router-view>
     </div>
   </div>
@@ -9,10 +9,18 @@
 
 <style lang="scss" scoped>
 .content {
-  background-image: url('/green-curves.svg');
   background-repeat: no-repeat;
-  background-size: cover;
+  background-size: 100% auto;
   background-position-x: center;
+
+}
+
+.background1 {
+  background-image: url('/background1.svg');
+}
+
+.background2 {
+  background-image: url('/background2.svg');
 }
 </style>
 
@@ -22,5 +30,18 @@ export default {
   components: {
     Header,
   },
+  computed: {
+    backgroundClass() {
+      const urlNodes = this.$route.fullPath.split('/');
+      switch (urlNodes[2]) {
+        case 'login':
+        case 'forgot-password':
+          return 'background1';
+        default:
+          return 'background2';
+      }
+      return 'background2';
+    },
+  },
 };
 </script>

src/_pages/auth/Login.vue

@@ -7,7 +7,7 @@
       {{ messages.login_blurb }}
     </h4>
 
-    <form class="login-form">
+    <form class="auth-form">
       <div class="form-group">
         <Input
           class="form-control"
@@ -25,11 +25,11 @@
       <router-link to="/new_pages/forgot-password">
         {{ messages.button_label_forgotPassword }}
       </router-link>
-      <Button color="default" class="login-btn">
+      <Button color="default" class="auth-form-submit">
         {{ messages.button_label_sign_in }}
       </Button>
       <p
-        class="text-center privacy-description"
+        class="text-center description"
         v-html="messages.message_login_agreeToTerms"
       ></p>
     </form>
@@ -45,27 +45,8 @@
 <style lang="scss" scoped>
 @import '../../_scss/components/form';
 
-
-.login-form {
-  background-color: white;
-  box-shadow: $form-box-shadow;
-
-  width: 450px;
-  max-width: 90%;
-  margin: 80px auto 0;
-  padding: 40px 36px;
-
-  border-radius: $form-border-radius;
-}
-
-.login-btn {
-  margin-top: 55px;
-}
-
-.privacy-description {
-  width: 280px;
-  font-size: 14px;
-  margin: 32px auto 8px;
+.description {
+  margin-top: 32px;
 }
 </style>
 

src/_pages/auth/Register.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="wrapper">
+    <h1 class="text-center white-text form-title">
+      {{ messages.register_title }}
+    </h1>
+    <h4 class="text-center white-text form-sub-title">
+      {{ messages.register_blurb }}
+    </h4>
+
+    <form class="auth-form">
+      <div class="form-group">
+        <Input
+          class="form-control"
+          v-model="email"
+          :placeholder="messages.register_field_label_email"
+        />
+      </div>
+      <div class="form-group">
+        <Input
+          class="form-control"
+          v-model="password"
+          :placeholder="messages.field_label_password"
+        />
+        <p class="description">
+          {{ messages.field_password_hint }}
+        </p>
+      </div>
+
+      <div class="form-group">
+        <Input
+          class="form-control"
+          v-model="confirmPassword"
+          :placeholder="messages.field_label_password_confirm"
+        />
+      </div>
+      <div class="form-group">
+        <Input
+          class="form-control"
+          v-model="promoCode"
+          :placeholder="messages.field_label_promoCode"
+        />
+      </div>
+      <a :href="messages.message_request_promoCode_link" target="_blank">
+        {{ messages.message_request_promoCode }}
+      </a>
+
+      <div class="form-group my-5">
+        <Checkbox
+          v-model="agreeTOC"
+          :label="messages.field_label_agreeToTerms"
+        />
+      </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>
+
+      <div class="form-separator"></div>
+
+      <div class="form-group my-3">
+        <Checkbox
+          v-model="agreeTOC"
+          :label="messages.field_label_sendInformation"
+        />
+      </div>
+      <div class="form-group my-3">
+        <Checkbox v-model="agreeTOC" :label="messages.field_label_sendNews" />
+      </div>
+    </form>
+
+    <!--- We've Got You Covered Section --->
+    <h2 class="covered-section-title text-center">
+      {{ messages.marketing_message_got_you_covered_title }}
+    </h2>
+    <div class="row px-5 mx-5">
+      <div
+        v-for="(item, index) in messages.marketing_message_topics.split(',')"
+        :key="index"
+        class="col-lg-3 col-md-6 col-sm-12 my-4 px-3"
+      >
+        <Card>
+          <div class="card-content">
+            <span
+              class="card-icon"
+              :style="{
+                color: messages[`marketing_message_${item}_color`],
+                backgroundColor:
+                  messages[`marketing_message_${item}_background_color`],
+              }"
+              v-html="messages[`marketing_message_${item}_icon`]"
+            >
+            </span>
+            <p class="card-title">
+              {{ messages[`marketing_message_${item}_title`] }}
+            </p>
+            <span class="card-message">
+              {{ messages[`marketing_message_${item}_content`] }}
+            </span>
+          </div>
+        </Card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '../../_scss/components/form';
+
+.covered-section-title {
+  margin-top: 64px;
+  margin-bottom: 20px;
+  color: #3c3c3c;
+}
+</style>
+
+<script>
+import { mapState } from 'vuex';
+
+import { Button, Input, Checkbox, Card } from '~/_components/shared';
+
+export default {
+  components: {
+    Button,
+    Input,
+    Checkbox,
+    Card,
+  },
+
+  data() {
+    return {
+      email: '',
+      password: '',
+      confirmPassword: '',
+      promoCode: '',
+      agreeTOC: false,
+      sendInformation: false,
+      sendNews: false,
+    };
+  },
+
+  computed: {
+    ...mapState('system', ['messages']),
+  },
+};
+</script>

src/_router/index.js

@@ -83,6 +83,10 @@ export const router = new Router({
               path: 'forgot-password',
               component: () => import('~/_pages/auth/ForgotPassword'),
             },
+            {
+              path: 'register',
+              component: () => import('~/_pages/auth/Register'),
+            },
           ],
         },
         {

src/_scss/_variables.scss

@@ -74,6 +74,7 @@ $bright-cyan-10: #def8f0;
 
 $background-color: #e5e5e5;
 $default-text-color: #666666;
+$border-color: lightgrey;
 
 // fonts
 $default-font-family: 'Lato';

src/_scss/components/_form.scss

@@ -1,3 +1,5 @@
+@import "../variables";
+
 $form-box-shadow: 0px 5px 15px -10px #777;
 $form-border-radius: 2px;
 
@@ -8,3 +10,33 @@ $form-border-radius: 2px;
 .form-sub-title {
   margin-top: 16px;
 }
+
+.auth-form {
+  background-color: white;
+  box-shadow: $form-box-shadow;
+
+  width: 450px;
+  max-width: 90%;
+  margin: 80px auto 0;
+  padding: 40px 36px;
+
+  border-radius: $form-border-radius;
+}
+
+.auth-form-submit {
+  margin-top: 55px;
+}
+
+.description {
+  font-size: 14px;
+  width: 290px;
+  margin: 0 auto;
+  color: #666666;
+  text-align: center;
+}
+
+.form-separator {
+  height: 1px;
+  width: 100%;
+  background-color: $border-color;
+}

src/_store/system.module.js

@@ -8,62 +8,79 @@ import { router } from '~/_router';
 
 import { account } from './account.module';
 
+import staticMessages from '~/_dummy/messages.json';
+
 const state = {
-    configs: {
-        networkUuid: null,
-        allowRegistration: false,
-        paymentsEnabled: false,
-        sageLauncher: false,
-        bubbleNode: null,
-        entityClasses: [],
-        locales: ['en_US'],
-        cloudConfigs: {},
-        sslPort: null,
-        locked: null,
-        launchLock: null,
-        promoCodePolicy: null,
-        requireSendMetrics: null,
-        awaitingRestore: false,
-        restoreInProgress: false,
-        support: {},
-        securityLevels: null,
-        jarVersion: null,
-        jarUpgradeAvailable: null
+  configs: {
+    networkUuid: null,
+    allowRegistration: false,
+    paymentsEnabled: false,
+    sageLauncher: false,
+    bubbleNode: null,
+    entityClasses: [],
+    locales: ['en_US'],
+    cloudConfigs: {},
+    sslPort: null,
+    locked: null,
+    launchLock: null,
+    promoCodePolicy: null,
+    requireSendMetrics: null,
+    awaitingRestore: false,
+    restoreInProgress: false,
+    support: {},
+    securityLevels: null,
+    jarVersion: null,
+    jarUpgradeAvailable: null,
+  },
+  entityConfigs: {},
+  searchResults: [],
+  status: {
+    activating: false,
+    searching: false,
+    creatingEntity: false,
+    modelSetupInProgress: false,
+  },
+  activated: null,
+  error: null,
+  messages: {
+    durationToMillis: function(count, units) {
+      if (typeof count === 'undefined' || count === null || count === '')
+        return null;
+      return (
+        parseInt(count) *
+        parseInt(state.messages['time_duration_' + units + '_factor'])
+      );
     },
-    entityConfigs: {},
-    searchResults: [],
-    status: { activating: false, searching: false, creatingEntity: false, modelSetupInProgress: false },
-    activated: null,
-    error: null,
-    messages: {
-        durationToMillis: function(count, units) {
-            if (typeof count === 'undefined' || count === null || count === '') return null;
-            return parseInt(count) * parseInt(state.messages['time_duration_'+units+'_factor']);
-        },
-        millisToDuration: function (ms) {
-            const durations = state.timeDurationOptionsReversed;
-            for (let i=0; i<durations.length; i++) {
-                const durationMillis = parseInt(state.messages['time_duration_'+durations[i]+'_factor']);
-                if (ms >= durationMillis && ((ms % durationMillis) === 0 || i === durations.length-1)) {
-                    return {count: parseInt(ms) / durationMillis, units: durations[i]};
-                }
-            }
-            return {count: parseInt(ms), units: ''};
+    millisToDuration: function(ms) {
+      const durations = state.timeDurationOptionsReversed;
+      for (let i = 0; i < durations.length; i++) {
+        const durationMillis = parseInt(
+          state.messages['time_duration_' + durations[i] + '_factor']
+        );
+        if (
+          ms >= durationMillis &&
+          (ms % durationMillis === 0 || i === durations.length - 1)
+        ) {
+          return { count: parseInt(ms) / durationMillis, units: durations[i] };
         }
+      }
+      return { count: parseInt(ms), units: '' };
     },
-    messageGroupsLoaded: [],
-    countries: [],
-    locales: [],
-    timezones: [],
-    detectedTimezone: null,
-    detectedLocale: null,
-    accountDeletionOptions: [],
-    timeDurationOptions: [],
-    timeDurationOptionsReversed: [],
-    contactTypes: [],
-    appLinks: null,
-    upgradeCheck: null,
-    upgrading: null
+    ...staticMessages,
+  },
+  messageGroupsLoaded: [],
+  countries: [],
+  locales: [],
+  timezones: [],
+  detectedTimezone: null,
+  detectedLocale: null,
+  accountDeletionOptions: [],
+  timeDurationOptions: [],
+  timeDurationOptionsReversed: [],
+  contactTypes: [],
+  appLinks: null,
+  upgradeCheck: null,
+  upgrading: null,
 };
 
 const actions = {
@@ -87,104 +104,126 @@ const actions = {
     );
   },
 
-    loadSystemConfigs({ commit }) {
-        commit('loadSystemConfigsRequest');
-        systemService.loadSystemConfigs()
-            .then(
-                configs => commit('loadSystemConfigsSuccess', configs),
-                error => commit('loadSystemConfigsFailure', error)
-            );
-    },
-    loadEntityConfigs({ commit }) {
-        commit('loadEntityConfigsRequest');
-        systemService.loadEntityConfigs()
-            .then(
-                configs => commit('loadEntityConfigsSuccess', configs),
-                error => commit('loadEntityConfigsFailure', error)
-            );
-    },
-    search({ commit }, type, query) {
-        commit('searchRequest');
-        systemService.search(type, query)
-            .then(
-                results => commit('searchSuccess', {type, query, results}),
-                error => commit('searchFailure', error)
-            );
-    },
-    createEntity({ commit }, {entityConfig, json, messages, errors}) {
-        commit('createEntityRequest');
-        systemService.createEntity(entityConfig, json, messages, errors)
-            .then(
-                entity => commit('createEntitySuccess', entity),
-                error => commit('createEntityFailure', error)
-            );
-    },
-    modelSetup({ commit }, {file, messages, errors}) {
-        commit('modelSetupRequest');
-        systemService.modelSetup(file, messages, errors)
-            .then(
-                ok => commit('modelSetupSuccess'),
-                errors => commit('modelSetupFailure', errors)
-            );
-    },
-    loadMessages({ commit }, group, locale) {
-        commit('loadMessagesRequest');
-        systemService.loadMessages(group, locale)
-            .then(
-                messages => commit('loadMessagesSuccess', {group, messages}),
-                error => commit('loadMessagesFailure', error)
-            );
-    },
-    loadTimezones({ commit }) {
-        commit('loadTimezonesRequest');
-        systemService.loadTimezones().then(
-            timezones => commit('loadTimezonesSuccess', timezones),
-            error => commit('loadTimezonesFailure', error)
-        )
-    },
-    detectTimezone({ commit }) {
-        commit('detectTimezoneRequest');
-        systemService.detectTimezone().then(
-            timezone => commit('detectTimezoneSuccess', timezone),
-            error => commit('detectTimezoneFailure', error)
-        )
-    },
-    detectLocale({ commit }) {
-        commit('detectLocaleRequest');
-        systemService.detectLocale().then(
-            locales => commit('detectLocaleSuccess', locales),
-            error => commit('detectLocaleFailure', error)
-        )
-    },
-    getAppLinks({ commit }, locale) {
-        commit('getAppLinksRequest');
-        systemService.getAppLinks(locale).then(
-            links => commit('getAppLinksSuccess', links),
-            error => commit('getAppLinksFailure', error)
-        )
-    },
-    checkForUpgrade({ commit }) {
-        if (state.upgradeCheck === null) {
-            commit('checkForUpgradeRequest');
-            systemService.checkForUpgrade().then(
-                configs => commit('checkForUpgradeSuccess', configs),
-                error => commit('checkForUpgradeFailure', error)
-            );
-        } else {
-            console.log('checkForUpgrade: already checked ('+state.upgradeCheck+'), not checking again');
-        }
-    },
-    upgrade({ commit }) {
-        commit('upgradeRequest');
-        systemService.upgrade().then(
-            configs => commit('upgradeSuccess', configs),
-            error => commit('upgradeFailure', error)
-        )
-    },
-    upgradeComplete({ commit }) {
-        commit('upgradeCompleteRequest');
-        commit('upgradeCompleteSuccess');
+  loadSystemConfigs({ commit }) {
+    commit('loadSystemConfigsRequest');
+    systemService
+      .loadSystemConfigs()
+      .then(
+        (configs) => commit('loadSystemConfigsSuccess', configs),
+        (error) => commit('loadSystemConfigsFailure', error)
+      );
+  },
+  loadEntityConfigs({ commit }) {
+    commit('loadEntityConfigsRequest');
+    systemService
+      .loadEntityConfigs()
+      .then(
+        (configs) => commit('loadEntityConfigsSuccess', configs),
+        (error) => commit('loadEntityConfigsFailure', error)
+      );
+  },
+  search({ commit }, type, query) {
+    commit('searchRequest');
+    systemService
+      .search(type, query)
+      .then(
+        (results) => commit('searchSuccess', { type, query, results }),
+        (error) => commit('searchFailure', error)
+      );
+  },
+  createEntity({ commit }, { entityConfig, json, messages, errors }) {
+    commit('createEntityRequest');
+    systemService
+      .createEntity(entityConfig, json, messages, errors)
+      .then(
+        (entity) => commit('createEntitySuccess', entity),
+        (error) => commit('createEntityFailure', error)
+      );
+  },
+  modelSetup({ commit }, { file, messages, errors }) {
+    commit('modelSetupRequest');
+    systemService
+      .modelSetup(file, messages, errors)
+      .then(
+        (ok) => commit('modelSetupSuccess'),
+        (errors) => commit('modelSetupFailure', errors)
+      );
+  },
+  loadMessages({ commit }, group, locale) {
+    commit('loadMessagesRequest');
+    systemService
+      .loadMessages(group, locale)
+      .then(
+        (messages) => commit('loadMessagesSuccess', { group, messages }),
+        (error) => commit('loadMessagesFailure', error)
+      );
+  },
+  loadTimezones({ commit }) {
+    commit('loadTimezonesRequest');
+    systemService
+      .loadTimezones()
+      .then(
+        (timezones) => commit('loadTimezonesSuccess', timezones),
+        (error) => commit('loadTimezonesFailure', error)
+      );
+  },
+  detectTimezone({ commit }) {
+    commit('detectTimezoneRequest');
+    systemService
+      .detectTimezone()
+      .then(
+        (timezone) => commit('detectTimezoneSuccess', timezone),
+        (error) => commit('detectTimezoneFailure', error)
+      );
+  },
+  detectLocale({ commit }) {
+    commit('detectLocaleRequest');
+    systemService
+      .detectLocale()
+      .then(
+        (locales) => commit('detectLocaleSuccess', locales),
+        (error) => commit('detectLocaleFailure', error)
+      );
+  },
+  getAppLinks({ commit }, locale) {
+    commit('getAppLinksRequest');
+    systemService
+      .getAppLinks(locale)
+      .then(
+        (links) => commit('getAppLinksSuccess', links),
+        (error) => commit('getAppLinksFailure', error)
+      );
+  },
+  checkForUpgrade({ commit }) {
+    if (state.upgradeCheck === null) {
+      commit('checkForUpgradeRequest');
+      systemService
+        .checkForUpgrade()
+        .then(
+          (configs) => commit('checkForUpgradeSuccess', configs),
+          (error) => commit('checkForUpgradeFailure', error)
+        );
+    } else {
+      console.log(
+        'checkForUpgrade: already checked (' +
+          state.upgradeCheck +
+          '), not checking again'
+      );
     }
+  },
+  upgrade({ commit }) {
+    commit('upgradeRequest');
+    systemService
+      .upgrade()
+      .then(
+        (configs) => commit('upgradeSuccess', configs),
+        (error) => commit('upgradeFailure', error)
+      );
+  },
+  upgradeComplete({ commit }) {
+    commit('upgradeCompleteRequest');
+    commit('upgradeCompleteSuccess');
+  },
 };
 
 const getters = {
@@ -480,32 +519,32 @@ const mutations = {
     state.error = error;
   },
 
-    checkForUpgradeRequest(state) {},
-    checkForUpgradeSuccess(state, ok) {
-        console.log('checkForUpgradeSuccess: ok');
-        state.upgradeCheck = true;
-    },
-    checkForUpgradeFailure(state, error) {
-        state.error = error;
-    },
+  checkForUpgradeRequest(state) {},
+  checkForUpgradeSuccess(state, ok) {
+    console.log('checkForUpgradeSuccess: ok');
+    state.upgradeCheck = true;
+  },
+  checkForUpgradeFailure(state, error) {
+    state.error = error;
+  },
 
-    upgradeRequest(state) {},
-    upgradeSuccess(state, configs) {
-        state.configs = configs;
-        state.upgrading = true;
-    },
-    upgradeFailure(state, error) {
-        state.error = error;
-    },
+  upgradeRequest(state) {},
+  upgradeSuccess(state, configs) {
+    state.configs = configs;
+    state.upgrading = true;
+  },
+  upgradeFailure(state, error) {
+    state.error = error;
+  },
 
-    upgradeCompleteRequest(state) {},
-    upgradeCompleteSuccess(state) {
-        state.upgrading = false;
-    },
-    upgradeCompleteFailure(state, error) {
-        state.upgrading = false;
-        state.error = error;
-    }
+  upgradeCompleteRequest(state) {},
+  upgradeCompleteSuccess(state) {
+    state.upgrading = false;
+  },
+  upgradeCompleteFailure(state, error) {
+    state.upgrading = false;
+    state.error = error;
+  },
 };
 
 export const system = {

src/app/App.vue

@@ -109,9 +109,8 @@
 @import '../_scss/base';
 
 .page-container {
-  width: 100vw;
   height: 100vh;
-  background-color: $background-color;
+  background: linear-gradient(180deg, #f3f3fb 10%, #ededed 50%, #ffffff 80%);
 }
 </style>
 
@@ -177,7 +176,6 @@ export default {
     },
     isNewPage() {
       const newPages = ['/new_pages'];
-      console.log(this.$route);
       return (
         newPages.includes(this.$route.path) ||
         newPages.filter((p) => this.$route.path.startsWith(p)).length

src/index.html

@@ -7,6 +7,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <link href="/bootstrap.min.css" rel="stylesheet" />
+    <!-- <link href="/fontawesome-5.3.1-all.css" rel="stylesheet" /> -->
+    <link href="/etmodules-font.css" rel="stylesheet" />
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
     <link rel="stylesheet" href="/vue-datetime.css">
     <style>

src/public/background2.svg

@@ -0,0 +1,14 @@
+<svg width="1336" height="612" viewBox="0 0 1336 612" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0H1358V469.58L0 577V0Z" fill="url(#paint0_linear)"/>
+<path opacity="0.9" d="M1429 472.95L-93 612V245C-93 245 769.92 456.994 1429 472.95Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="1178" y1="724.171" x2="183.998" y2="161.952" gradientUnits="userSpaceOnUse">
+<stop stop-color="#832AAF"/>
+<stop offset="1" stop-color="#331CA4"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="351" y1="300" x2="401.234" y2="696.486" gradientUnits="userSpaceOnUse">
+<stop stop-color="#331CA4"/>
+<stop offset="0.889877" stop-color="#2ED1A1"/>
+</linearGradient>
+</defs>
+</svg>

src/public/etmodules-font.css

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: ETmodules;
+  src: url(/modules.ttf) format('truetype');
+
+  font-weight: 400;
+  font-style: normal;
+}