removed modal in favor of regular page

src/pages/Profile.vue

@@ -3,26 +3,52 @@
 <!-- TODO: Profile in settings  -->
 <!-- TODO: Profile public page -->
 <template lang="html">
-  <div>
-    <b-button v-b-modal.edit-profile>
+  <b-container>
+    <h1>{{ profile.name }}</h1>
+    <p class="lead">{{ profile.bio }}</p>
+    <pre>gamebrary.com/{{ profile.userName }}</pre>
+
+    <empty-state
+      title="Profile"
+      message="Create a public profile now!"
+      action-text="Get Started!"
+      @action="createProfile"
+    />
+
+    <b-button :to="{ name: 'edit-profile' }">
       Edit
     </b-button>
 
-    <edit-profile-modal />
-  </div>
+    <p><b-badge>{{ profile.followers.length }}</b-badge> Followers</p>
+    <p><b-badge>{{ profile.following.length }}</b-badge> Followers</p>
+
+    <a :href="profile.website" target="_blank">Website</a>
+
+    <b-button :href="profile.twitter" target="_blank">
+      <i class="fab fa-twitter fa-fw" aria-hidden />
+    </b-button>
+    <pre>{{ profile }}</pre>
+  </b-container>
 </template>
 
 <script>
-import EditProfileModal from '@/components/EditProfileModal';
-import { mapGetters } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
+import EmptyState from '@/components/EmptyState';
 
 export default {
   components: {
-    EditProfileModal,
+    EmptyState,
   },
 
   computed: {
     ...mapGetters(['darkTheme']),
+    ...mapState(['profile']),
+  },
+
+  methods: {
+    createProfile() {
+      // console.log('boom');
+    },
   },
 };
 </script>

src/pages/Profile/EditProfile.vue

@@ -1,27 +1,6 @@
 <template lang="html">
-  <b-modal
-    id="edit-profile"
-    :header-bg-variant="darkTheme ? 'dark' : null"
-    :header-text-variant="darkTheme ? 'white' : null"
-    :body-bg-variant="darkTheme ? 'dark' : null"
-    :body-text-variant="darkTheme ? 'white' : null"
-    hide-footer
-  >
-    <template v-slot:modal-header="{ close }">
-      <modal-header
-        title="Edit profile"
-        @close="close"
-      >
-        <b-button
-          variant="primary"
-          @click="save"
-        >
-          <b-spinner small v-if="saving" />
-          <span v-else>{{ $t('global.save') }}</span>
-        </b-button>
-      </modal-header>
-    </template>
-
+  <b-container>
+    <h1>Edit profile</h1>
     <b-button @click="checkUserNameAvailability">
       Check availability
     </b-button>
@@ -35,6 +14,7 @@
     >
       <b-form-input
         id="userName"
+        disabled
         v-model="profile.userName"
         placeholder=""
       />
@@ -69,7 +49,7 @@
 
     <pre>{{ user }}</pre>
 
-  </b-modal>
+  </b-container>
 </template>
 
 <script>
@@ -87,8 +67,10 @@ export default {
         followers: [],
         following: [],
         dateJoined: [],
-        // profilePicture: '',
-        // backdrop: '',
+        friendCode: '',
+        onlineId: '',
+        gamerTag: '',
+        profilePicture: '',
         location: 'Chandler, AZ',
         website: 'https://gamebrary.com',
         twitter: 'romancm',

src/router.js

@@ -13,6 +13,7 @@ import Boards from '@/components/Boards';
 import Settings from '@/pages/Settings';
 import Upgrade from '@/pages/Upgrade';
 import Profile from '@/pages/Profile';
+import EditProfile from '@/pages/Profile/EditProfile';
 import NotFound from '@/pages/NotFound';
 
 Vue.use(Router);
@@ -95,6 +96,14 @@ export default new Router({
         title: 'Profile',
       },
     },
+    {
+      name: 'edit-profile',
+      path: '/profile/edit',
+      component: EditProfile,
+      meta: {
+        title: 'Edit profile',
+      },
+    },
     {
       name: 'about',
       path: '/about',