feat: implement my account page

src/_assets/post_auth_messages.json

@@ -24,5 +24,20 @@
   "label_device_iphone": "iPhone",
   "label_device_android": "Android",
   "label_device_mac_computer": "Mac Computer",
-  "label_device_windows_computer": "Windows Computer"
+  "label_device_windows_computer": "Windows Computer",
+
+  "title_my_account": "My Account",
+  "manage_account_actions": "change_password,account_data,billing,manage_ssh,payment,delete_backup",
+  "manage_account_change_password_title": "Change Password",
+  "manage_account_account_data_title": "Account Data",
+  "manage_account_billing_title": "Billing",
+  "manage_account_manage_ssh_title": "Manage SSH Keys",
+  "manage_account_payment_title": "Payment Methods and Credits",
+  "manage_account_delete_backup_title": "Delete or Backup Bubble",
+  "manage_account_change_password_link": "/me/change_password",
+  "manage_account_account_data_link": "/me/policy",
+  "manage_account_billing_link": "/me/bills",
+  "manage_account_manage_ssh_link": "/me/keys",
+  "manage_account_payment_link": "/me/payment",
+  "manage_account_delete_backup_link": "/me/policy"
 }

src/_pages/Layout.vue

@@ -1,6 +1,6 @@
 <!-- Copyright (c) 2020 Bubble, Inc. All rights reserved. For personal (non-commercial) use, see license: https://getbubblenow.com/bubble-license/ -->
 <template>
-  <div class="w-100 h-100">
+  <div class="w-100">
     <router-view></router-view>
   </div>
 </template>

src/_pages/main/account/Layout.vue

@@ -34,6 +34,10 @@
   background-image: url('/background2.svg');
 }
 
+.background3 {
+  background: linear-gradient(112.62deg, #1930d7 13.07%, #361486 90.53%);
+}
+
 .background {
   background: linear-gradient(180deg, #f3f3fb 10%, #ededed 50%, #ffffff 80%);
 }
@@ -51,12 +55,16 @@ export default {
       switch (urlNodes[1]) {
         case 'payment':
           return 'background1';
+        case 'me':
+          return 'background3';
       }
 
       // new pages in progress
       switch (urlNodes[2]) {
         case 'payment':
           return 'background1';
+        case 'me':
+          return 'background3';
       }
 
       return 'background2';

src/_pages/main/account/MyAccount.vue

@@ -0,0 +1,69 @@
+<!-- Copyright (c) 2020 Bubble, Inc. All rights reserved. For personal (non-commercial) use, see license: https://getbubblenow.com/bubble-license/ -->
+<template>
+  <div>
+    <!--- We've Got You Covered Section --->
+    <h1 class="title text-center">
+      {{ messages.title_my_account }}
+    </h1>
+    <div class="row" v-if="messages && messages.manage_account_actions">
+      <div
+        v-for="(item, index) in messages.manage_account_actions.split(',')"
+        :key="index"
+        class="col-lg-6 col-md-6 col-sm-12 my-4 px-3"
+      >
+        <router-link :to="messages[`manage_account_${item}_link`]">
+          <div class="h-100 card-container">
+            <div class="d-flex justify-content-between align-items-center">
+              <span>{{ messages[`manage_account_${item}_title`] }}</span>
+              <span class="icon">
+                <i class="fa fa-plus"></i>
+              </span>
+            </div>
+          </div>
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.title {
+  margin-top: 64px;
+  margin-bottom: 20px;
+  color: white;
+}
+
+.card-container {
+  padding: 24px;
+  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  background: #fff;
+
+  color: #17aea6;
+}
+
+.icon {
+  font-size: 14px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: #eeeef0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>
+
+<script>
+import { mapState } from 'vuex';
+import { Card } from '~/_components/shared';
+
+export default {
+  components: {
+    Card,
+  },
+  computed: {
+    ...mapState('system', ['messages']),
+  },
+};
+</script>

src/_router/index.js

@@ -87,6 +87,10 @@ export const router = new Router({
                   path: 'payment',
                   component: () => import('~/_pages/main/account/Payment'),
                 },
+                {
+                  path: 'me',
+                  component: () => import('~/_pages/main/account/MyAccount'),
+                },
               ],
             },
             {