Merge pull request #431 from h3poteto/iss-430

closes #430 Show authorization url to rescue it is not opened

src/renderer/components/Authorize.vue

@@ -1,39 +1,52 @@
 <template>
 <div id="authorize">
-  <el-header>
-    <el-row>
-      <el-col :span="24" class="close">
-        <el-button type="text" icon="el-icon-close" @click="close" class="close-button">
-        </el-button>
-      </el-col>
-    </el-row>
-  </el-header>
-  <el-container>
-    <el-form ref="form" :model="authorizeForm" label-width="120px" label-position="top" class="authorize-form" v-on:submit.prevent="authorizeSubmit">
-      <el-form-item label="Please paste authorization code from your browser:">
-        <el-input v-model="authorizeForm.code"></el-input>
-      </el-form-item>
-      <!-- Dummy form to guard submitting with enter -->
-      <el-form-item class="hidden">
-        <el-input></el-input>
-      </el-form-item>
-      <el-form-item class="submit">
-        <el-button
-          type="primary"
-          @click="authorizeSubmit"
-          v-loading="submitting"
-          element-loading-background="rgba(0, 0, 0, 0.8)">
-          Submit
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </el-container>
+  <div>
+    <el-header>
+      <el-row>
+        <el-col :span="24" class="close">
+          <el-button type="text" icon="el-icon-close" @click="close" class="close-button">
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-header>
+    <el-main>
+      <div class="authorization-url">
+        <p>Now authorization page is opened in your browser.</p>
+        <p>If it is not opened, please open the following URL manually.</p>
+        <p class="url">{{ $route.query.url }}</p>
+      </div>
+      <el-form ref="form" :model="authorizeForm" label-width="120px" label-position="top" class="authorize-form" v-on:submit.prevent="authorizeSubmit">
+        <el-form-item label="Please paste authorization code from your browser:">
+          <el-input v-model="authorizeForm.code"></el-input>
+        </el-form-item>
+        <!-- Dummy form to guard submitting with enter -->
+        <el-form-item class="hidden">
+          <el-input></el-input>
+        </el-form-item>
+        <el-form-item class="submit">
+          <el-button
+            type="primary"
+            @click="authorizeSubmit"
+            v-loading="submitting"
+            element-loading-background="rgba(0, 0, 0, 0.8)">
+            Submit
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </el-main>
+  </div>
 </div>
 </template>
 
 <script>
 export default {
   name: 'authorize',
+  props: {
+    url: {
+      type: String,
+      default: ''
+    }
+  },
   data () {
     return {
       authorizeForm: {
@@ -42,6 +55,9 @@ export default {
       submitting: false
     }
   },
+  mounted () {
+    console.log(this.url)
+  },
   methods: {
     authorizeSubmit () {
       this.submitting = true
@@ -88,6 +104,16 @@ export default {
     }
   }
 
+  .authorization-url {
+    margin: 0 auto 64px;
+    max-width: 80%;
+
+    .url {
+      color: #909399;
+      word-wrap: break-word;
+    }
+  }
+
   .authorize-form {
     width: 500px;
     margin: 0 auto;

src/renderer/components/Login/LoginForm.vue

@@ -71,7 +71,7 @@ export default {
         .then((url) => {
           loading.close()
           this.$store.dispatch('Login/pageBack')
-          this.$router.push({ path: '/authorize' })
+          this.$router.push({ path: '/authorize', query: { url: url } })
         })
         .catch(() => {
           loading.close()

src/renderer/router/index.js

@@ -13,7 +13,8 @@ export default new Router({
     {
       path: '/authorize',
       name: 'authorize',
-      component: require('@/components/Authorize').default
+      component: require('@/components/Authorize').default,
+      props: (route) => ({ url: route.query.url })
     },
     {
       path: '/preferences/',