refs #3 Fix login page design

src/renderer/components/Login.vue

@@ -1,74 +1,47 @@
 <template>
 <div id="login">
-  <el-form ref="instanceForm" label-width="120px" label-position="top">
-    <el-form-item label="Domain name">
-      <el-input v-model="instanceForm.domain"></el-input>
-    </el-form-item>
-    <el-form-item class="submit">
-      <el-button type="primary" @click="search">Search</el-button>
-    </el-form-item>
-  </el-form>
-  <el-form ref="loginForm" v-if="instances.length > 0" label-width="120px" label-position="top">
-    <el-form-item label="Select instance">
-      <el-radio-group v-model="loginForm.selectInstance" @change="changeInstance">
-        <el-radio class="instance-list" v-for="instance in instances" v-bind:key="instance.id" :label="instance.name" border></el-radio>
-      </el-radio-group>
-    </el-form-item>
-    <el-form-item class="submit">
-      <el-button type="primary" @click="login" v-if="selectedInstance !== null">Login</el-button>
-    </el-form-item>
-  </el-form>
+  <instance-form v-if="page == 1"></instance-form>
+  <login-form v-if="page == 2"></login-form>
 </div>
 </template>
 
 <script>
+import InstanceForm from './Login/InstanceForm'
+import LoginForm from './Login/LoginForm'
 import { mapState } from 'vuex'
 
 export default {
   name: 'login',
-  data () {
-    return {
-      instanceForm: {
-        domain: ''
-      },
-      loginForm: {
-        selectInstance: ''
-      }
-    }
-  },
   computed: {
     ...mapState({
-      instances: state => state.Login.instances,
-      selectedInstance: state => state.Login.selectedInstance
+      page: state => state.Login.page
     })
   },
-  created () {
-  },
-  methods: {
-    login () {
-      this.$store.dispatch('Login/fetchLogin', this.selectedInstance)
-        .then((url) => {
-          this.$router.push({ path: '/authorize' })
-        })
-    },
-    search () {
-      this.$store.dispatch('Login/searchInstance', this.instanceForm.domain)
-    },
-    changeInstance (value) {
-      this.$store.dispatch('Login/changeInstance', value)
-    }
-  }
+  components: { InstanceForm, LoginForm }
 }
 </script>
 
 <style lang="scss">
 body { font-family: 'Source Sans Pro', sans-serif; }
 
+html, body, #app, #login {
+  height: 100%;
+  margin: 0;
+}
+
 #login {
+  background-color: #292f3f;
+  color: #ffffff;
   text-align: center;
 
-  .instance-list {
-    display: block;
+  .el-form-item__label {
+    color: #f0f3f9;
+  }
+
+  .el-input__inner {
+    background-color: #373d48;
+    color: #ffffff;
+    border: 0;
   }
 }
 </style>

src/renderer/components/Login/InstanceForm.vue

@@ -0,0 +1,53 @@
+<template>
+<div id="instance_form">
+  <el-form ref="instanceForm" label-width="120px" label-position="top" class="instance-form">
+    <el-form-item label="Domain name">
+      <el-input v-model="instanceForm.domain" class="input"></el-input>
+    </el-form-item>
+    <el-form-item class="submit">
+      <el-button type="primary" @click="search">Search</el-button>
+    </el-form-item>
+  </el-form>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'instance-form',
+  data () {
+    return {
+      instanceForm: {
+        domain: ''
+      }
+    }
+  },
+  methods: {
+    search () {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      this.$store.dispatch('Login/searchInstance', this.instanceForm.domain)
+        .then(() => {
+          loading.close()
+          this.$store.commit('Login/changePage', 2)
+        })
+        .catch(() => {
+          this.$message({
+            message: 'Could not search instance',
+            type: 'error'
+          })
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.instance-form {
+  width: 400px;
+  margin: 0 auto;
+}
+</style>

src/renderer/components/Login/LoginForm.vue

@@ -0,0 +1,71 @@
+<template>
+<div id="login_form">
+  <el-form ref="loginForm" label-width="120px" label-position="top">
+    <el-form-item label="Select instance">
+      <el-radio-group v-model="loginForm.selectInstance" @change="changeInstance" class="instance-group">
+        <el-radio class="instance-list" v-for="instance in instances" v-bind:key="instance.id" :label="instance.name" border></el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item class="submit">
+      <el-button type="text" class="back" @click="back"><icon name="chevron-left"></icon></el-button>
+      <el-button type="primary" class="login" @click="login" v-if="selectedInstance !== null">Login</el-button>
+    </el-form-item>
+  </el-form>
+</div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'login-form',
+  data () {
+    return {
+      loginForm: {
+        selectInstance: ''
+      }
+    }
+  },
+  computed: {
+    ...mapState({
+      instances: state => state.Login.instances,
+      selectedInstance: state => state.Login.selectedInstance
+    })
+  },
+  methods: {
+    login () {
+      this.$store.dispatch('Login/fetchLogin', this.selectedInstance)
+        .then((url) => {
+          this.$router.push({ path: '/authorize' })
+        })
+    },
+    changeInstance (value) {
+      this.$store.dispatch('Login/changeInstance', value)
+    },
+    back () {
+      this.$store.dispatch('Login/pageBack')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.instance-group {
+  width: 300px;
+  text-align: left;
+  margin: 0 auto;
+}
+
+.instance-list {
+  display: block;
+  width: 300px;
+  margin-left: 0 !important;
+  border-color: #606266;
+  color: #dcdfe6;
+  margin-bottom: 10px;
+}
+
+.back {
+  margin-right: 20px;
+}
+</style>

src/renderer/store/Login.js

@@ -5,28 +5,37 @@ const Login = {
   namespaced: true,
   state: {
     instances: [],
-    selectedInstance: null
+    selectedInstance: null,
+    page: 1
   },
   mutations: {
-    updateInstances (state, body) {
-      state.instances = body.instances
+    updateInstances (state, instances) {
+      state.instances = instances
     },
     changeInstance (state, instance) {
       state.selectedInstance = instance
+    },
+    changePage (state, page) {
+      state.page = page
     }
   },
   actions: {
     searchInstance ({ commit }, domain) {
-      ipcRenderer.send('get-social-token', 'get')
-      ipcRenderer.on('response-get-social-token', (event, token) => {
-        axios
-          .get(`https://instances.social/api/1.0/instances/search?q=${domain}`, {
-            'headers': { 'Authorization': `Bearer ${token}` }
-          })
-          .then((res) => {
-            commit('updateInstances', res.data)
-            console.log(res.data)
-          })
+      return new Promise((resolve, reject) => {
+        ipcRenderer.send('get-social-token', 'get')
+        ipcRenderer.on('error-get-social-token', (event, err) => {
+          reject(err)
+        })
+        ipcRenderer.on('response-get-social-token', (event, token) => {
+          axios
+            .get(`https://instances.social/api/1.0/instances/search?q=${domain}`, {
+              'headers': { 'Authorization': `Bearer ${token}` }
+            })
+            .then((res) => {
+              commit('updateInstances', res.data.instances)
+              resolve(res)
+            })
+        })
       })
     },
     fetchLogin ({ commit }, instance) {
@@ -42,6 +51,11 @@ const Login = {
     },
     changeInstance ({ commit }, instance) {
       commit('changeInstance', instance)
+    },
+    pageBack ({ commit }) {
+      commit('changePage', 1)
+      commit('updateInstances', [])
+      commit('changeInstance', null)
     }
   }
 }