Added regsiter page and styles (#8836)

* Added regsiter page and styles

* Added style updates

* Added login server connection and logout

* Added login

* Added social auth

* Moved image assests

* Added trasnlations

* Added social icons

* Removed duplicate

* Updated shrinkwrap

website/client/app.vue

@@ -2,15 +2,18 @@
 
 <template lang="pug">
 #app
-  app-menu
-  .container-fluid
+  app-menu(v-if="userLoggedIn")
+  .container-fluid(v-if="userLoggedIn")
     app-header
     router-view
+
+  router-view(v-if="!userLoggedIn")
 </template>
 
 <script>
 import AppMenu from './components/appMenu';
 import AppHeader from './components/appHeader';
+import axios from 'axios';
 
 export default {
   name: 'app',
@@ -18,9 +21,50 @@ export default {
     AppMenu,
     AppHeader,
   },
+  data () {
+    return {
+      userLoggedIn: false,
+    };
+  },
+  async beforeCreate () {
+    // Setup listener for title
+    this.$store.watch(state => state.title, (title) => {
+      document.title = title;
+    });
+
+    // Mount the app when user and tasks are loaded
+    const userDataWatcher = this.$store.watch(state => [state.user.data, state.tasks.data], ([user, tasks]) => {
+      if (user && user._id && Array.isArray(tasks)) {
+        userDataWatcher(); // remove the watcher
+        // this.$mount('#app');
+      }
+    });
+
+    // @TODO: Move this to store?
+    let authSettings = localStorage.getItem('habit-mobile-settings');
+    if (!authSettings) return;
+
+    authSettings = JSON.parse(authSettings);
+    axios.defaults.headers.common['x-api-user'] = authSettings.auth.apiId;
+    axios.defaults.headers.common['x-api-key'] = authSettings.auth.apiToken;
+
+    // Load the user and the user tasks
+    await Promise.all([
+      this.$store.dispatch('user:fetch'),
+      this.$store.dispatch('tasks:fetchUserTasks'),
+    ]).catch((err) => {
+      console.error('Impossible to fetch user. Copy into localStorage a valid habit-mobile-settings object.', err); // eslint-disable-line no-console
+    });
+
+    this.userLoggedIn = true;
+  },
+  mounted () { // Remove the loading screen when the app is mounted
+    let loadingScreen = document.getElementById('loading-screen');
+    if (loadingScreen) document.body.removeChild(loadingScreen);
+  },
 };
 </script>
 
 <style src="bootstrap/scss/bootstrap.scss" lang="scss"></style>
 <style src="assets/scss/index.scss" lang="scss"></style>
-<style src="assets/css/index.css"></style>
+<style src="assets/css/index.css"></style>