get name from db and logout if lnd is locked

src/components/AuthenticatedVerticalNavbar.vue

@@ -168,7 +168,6 @@ export default {
   methods: {
     logout() {
       this.$store.dispatch("user/logout");
-      this.$router.push("/");
     },
     toggleBalance() {
       return (this.state.showBalance = !this.state.showBalance);

src/helpers/api.js

@@ -1,6 +1,5 @@
 import axios from "axios";
 import store from "@/store";
-import router from "@/router";
 
 // An object to store the response time of completed API requests
 const responseTime = {};
@@ -9,6 +8,7 @@ const responseTime = {};
 const responsePending = {};
 
 // Interceptor to refresh JWT or logout user based on 401 requests
+// and to logout user if lnd is locked
 axios.interceptors.response.use(function (response) {
   // Any status code that lie within the range of 2xx cause this function to trigger
   // Do something with response data
@@ -16,42 +16,50 @@ axios.interceptors.response.use(function (response) {
 }, async function (error) {
   // Any status codes that falls outside the range of 2xx cause this function to trigger
 
-  // Return any error which is not due to authentication back to the calling service
+  //logout user if lnd is locked
+  if (error.response.status === 403 && error.config.url.startsWith(`${process.env.VUE_APP_API_URL}/v1/lnd`) && error.response.data === "Must unlock wallet") {
+    store.dispatch('user/logout')
+    return Promise.reject(error);
+  }
+
+  // Return any error which is not related to auth
   if (!error.response || error.response.status !== 401) {
     return Promise.reject(error);
   }
 
+
   // Return the same 401 back if user is trying to login with incorrect password
   if (error.config.url === `${process.env.VUE_APP_SYSTEM_API_URL}/v1/account/login`) {
     return Promise.reject(error);
   }
 
   // Logout user if token refresh didn't work
-  if (error.config.url === `${process.env.VUE_APP_SYSTEM_API_URL}/v1/account/refresh` || error.config.message === "Invalid JWT") {
-    store.dispatch('user/logout')
-    router.push('/');
-
+  if (error.config.url === `${process.env.VUE_APP_SYSTEM_API_URL}/v1/account/refresh`) {
+    store.dispatch('user/logout');
     return Promise.reject(error);
   }
 
-  // Try request again with new token
-  try {
-    await store.dispatch('user/refreshJWT');
-  } catch (error) {
-    return Promise.reject(error);
-  }
+  // Try request again with new token if error is due to invalid JWT
 
-  // New request with new token
-  const config = error.config;
-  config.headers['Authorization'] = `JWT ${store.state.user.jwt}`;
-
-  return new Promise((resolve, reject) => {
-    axios.request(config).then(response => {
-      resolve(response);
-    }).catch((error) => {
-      reject(error);
-    })
-  });
+  if (error.response.data === 'Invalid JWT') {
+    try {
+      await store.dispatch('user/refreshJWT');
+    } catch (error) {
+      return Promise.reject(error);
+    }
+
+    // New request with new token
+    const config = error.config;
+    config.headers['Authorization'] = `JWT ${store.state.user.jwt}`;
+
+    return new Promise((resolve, reject) => {
+      axios.request(config).then(response => {
+        resolve(response);
+      }).catch((error) => {
+        reject(error);
+      })
+    });
+  }
 
 });
 

src/layouts/DashboardLayout.vue

@@ -44,7 +44,7 @@
             </div>
             <b-nav-item-dropdown class="d-none d-lg-block d-xl-block" right no-caret>
               <!-- Using 'button-content' slot -->
-              <template v-slot:button-content>Satoshi</template>
+              <template v-slot:button-content>{{ name.split(' ')[0] }}</template>
               <b-dropdown-item @click="logout">Log out</b-dropdown-item>
             </b-nav-item-dropdown>
           </b-navbar-nav>
@@ -109,6 +109,7 @@ export default {
   },
   computed: {
     ...mapState({
+      name: state => state.user.name,
       isApiOperational: state => state.system.api.operational,
       isBitcoinOperational: state => state.bitcoin.operational,
       isBitcoinCalibrating: state => state.bitcoin.calibrating,
@@ -127,7 +128,6 @@ export default {
         this.toggleMobileMenu();
       }
       this.$store.dispatch("user/logout");
-      this.$router.push("/");
     },
     toggleMobileMenu() {
       this.$store.commit("toggleMobileMenu");
@@ -211,6 +211,8 @@ export default {
     //trigger loading watcher
     // this.loading = true;
 
+    this.$store.dispatch("user/getInfo");
+
     // start polling data every 20s
     this.fetchData();
     this.interval = window.setInterval(this.fetchData, 20000);

src/store/modules/user.js

@@ -1,8 +1,9 @@
 import API from "@/helpers/api";
+import router from "@/router";
 
 // Initial state
 const state = () => ({
-  name: "Satoshi",
+  name: "",
   jwt: window.localStorage.getItem("jwt") || "",
   registered: true,
   seed: []
@@ -35,12 +36,15 @@ const actions = {
     );
 
     if (data && data.jwt) {
-      commit("setJWT", data.jwt);
+      commit("setJWT", data.jwt)
     }
   },
 
-  logout({ commit }) {
-    commit("setJWT", "");
+  logout({ commit, state }) {
+    if (state.jwt) {
+      commit("setJWT", "");
+      router.push("/");
+    }
   },
 
   async refreshJWT({ commit }) {
@@ -55,6 +59,11 @@ const actions = {
     commit("setRegistered", !!registered);
   },
 
+  async getInfo({ commit }) {
+    const { name } = await API.get(`${process.env.VUE_APP_SYSTEM_API_URL}/v1/account/info`);
+    commit("setName", name);
+  },
+
   async getSeed({ commit, state, dispatch }, plainTextPassword) {
     let rawSeed;
 

src/views/Dashboard.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="p-sm-2">
     <div class="my-3 pb-2">
-      <h1>welcome back, satoshi</h1>
+      <h1 class="text-lowercase">welcome back{{ name ? `, ${ name.split(' ')[0] }` : '' }}</h1>
       <p class="text-muted">This is your Umbrel's dashboard</p>
     </div>
     <b-row>
@@ -116,6 +116,7 @@ export default {
   },
   computed: {
     ...mapState({
+      name: state => state.user.name,
       syncPercent: state => state.bitcoin.percent,
       blocks: state => state.bitcoin.blocks,
       btcBalance: state => {

src/views/Login.vue

@@ -1,5 +1,13 @@
 <template>
   <div>
+    <!-- <div
+      class="d-flex flex-column align-items-center justify-content-center min-vh100 p-2"
+      v-if="loading"
+    >
+      <img alt="Umbrel" src="@/assets/logo.svg" class="mb-2 logo" />
+      <b-spinner class="my-5"></b-spinner>
+    </div>-->
+
     <div class="d-flex flex-column align-items-center justify-content-center min-vh100 p-2">
       <img alt="Umbrel" src="@/assets/logo.svg" class="mb-2 logo" />
       <h1 class="text-center mb-2">welcome back</h1>
@@ -46,6 +54,7 @@ import InputPassword from "@/components/InputPassword";
 export default {
   data() {
     return {
+      loading: true,
       password: "",
       isIncorrectPassword: false,
       isLoggingIn: false
@@ -66,10 +75,13 @@ export default {
 
     //redirect to onboarding if the user is not registered
     await this.$store.dispatch("user/registered");
+    await new Promise(resolve => setTimeout(resolve, 2000));
 
     if (!this.$store.state.user.registered) {
-      this.$router.push("/start");
+      return this.$router.push("/start");
     }
+
+    this.loading = false;
   },
   methods: {
     async authenticateUser() {

src/views/Start.vue

@@ -158,8 +158,7 @@ export default {
       }
 
       if (this.currentStep === 5) {
-        // return this.notedSeed;
-        return true;
+        return this.notedSeed;
       }
 
       return true;
@@ -216,10 +215,10 @@ export default {
       this.notedSeed = true;
     }
   },
-  created() {
+  async created() {
     //redirect to home if the user is already registered
     if (this.registered) {
-      this.$router.push("/dashboard");
+      return this.$router.push("/");
     }
 
     //generate a new seed on load