feat: move /first_install to vue component (#3485)

lnbits/static/css/base.css

@@ -341,3 +341,39 @@ video {
 .q-dialog__inner--minimized {
   padding: 12px;
 }
+
+.first-install {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+.first-install .grid {
+  display: block;
+}
+.first-install .hero-wrapper {
+  display: none;
+}
+.first-install .hero {
+  display: block;
+  height: 100%;
+  max-width: 250px;
+  background-image: url(/static/images/logos/lnbits.svg);
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+@media (min-width: 992px) {
+  .first-install .grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 1rem;
+  }
+  .first-install .hero-wrapper {
+    display: block;
+    position: relative;
+    height: 100%;
+    padding: 1rem;
+  }
+}

lnbits/static/js/init-app.js

@@ -188,6 +188,11 @@ const routes = [
     path: '/extensions',
     name: 'Extensions',
     component: PageExtensions
+  },
+  {
+    path: '/first_install',
+    name: 'FirstInstall',
+    component: PageFirstInstall
   }
 ]
 

lnbits/static/js/pages/first-install.js

@@ -0,0 +1,37 @@
+window.PageFirstInstall = {
+  template: '#page-first-install',
+  mixins: [window.windowMixin],
+  data() {
+    return {
+      loginData: {
+        isPwd: true,
+        isPwdRepeat: true,
+        username: '',
+        password: '',
+        passwordRepeat: ''
+      }
+    }
+  },
+  computed: {
+    checkPasswordsMatch() {
+      return this.loginData.password !== this.loginData.passwordRepeat
+    }
+  },
+  methods: {
+    async setPassword() {
+      try {
+        await LNbits.api.request('PUT', '/api/v1/auth/first_install', null, {
+          username: this.loginData.username,
+          password: this.loginData.password,
+          password_repeat: this.loginData.passwordRepeat
+        })
+        window.location.href = '/admin'
+      } catch (e) {
+        LNbits.utils.notifyApiError(e)
+      }
+    }
+  },
+  created() {
+    document.title = 'First Install - LNbits'
+  }
+}

lnbits/static/scss/base.scss

@@ -132,3 +132,40 @@ video {
 .q-dialog__inner--minimized {
   padding: 12px;
 }
+
+.first-install {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  .grid {
+    display: block;
+  }
+  .hero-wrapper {
+    display: none;
+  }
+  .hero {
+    display: block;
+    height: 100%;
+    max-width: 250px;
+    background-image: url(/static/images/logos/lnbits.svg);
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  @media (min-width: 992px) {
+    .grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-gap: 1rem;
+    }
+    .hero-wrapper {
+      display: block;
+      position: relative;
+      height: 100%;
+      padding: 1rem;
+    }
+  }
+}

lnbits/static/vendor.json

@@ -45,6 +45,7 @@
   "components": [
     "js/pages/extensions_builder.js",
     "js/pages/extensions.js",
+    "js/pages/first-install.js",
     "js/pages/payments.js",
     "js/pages/node.js",
     "js/pages/node-public.js",