|
| 1 | +<script setup lang="ts"> |
| 2 | +import { useI18n } from 'vue-i18n' |
| 3 | +import { reactive, ref } from 'vue' |
| 4 | +import { API } from '@/views/net' |
| 5 | +
|
| 6 | +const { t } = useI18n() |
| 7 | +const props = defineProps({ |
| 8 | + visible: Boolean, |
| 9 | +}) |
| 10 | +
|
| 11 | +const deviceAuthActive = ref(0) |
| 12 | +const deviceAuthResponse = ref({ |
| 13 | + user_code: '', |
| 14 | + verification_uri: '', |
| 15 | + device_code: '' |
| 16 | +}) |
| 17 | +const deviceAuthNext = () => { |
| 18 | + if (deviceAuthActive.value++ > 2) { |
| 19 | + return |
| 20 | + } |
| 21 | +
|
| 22 | + if (deviceAuthActive.value === 1) { |
| 23 | + fetch('/oauth2/getLocalCode') |
| 24 | + .then(API.DefaultResponseProcess) |
| 25 | + .then((d) => { |
| 26 | + deviceAuthResponse.value = d |
| 27 | + }) |
| 28 | + } else if (deviceAuthActive.value === 2) { |
| 29 | + window.location.href = '/oauth2/getUserInfoFromLocalCode?device_code=' + deviceAuthResponse.value.device_code |
| 30 | + } |
| 31 | +} |
| 32 | +</script> |
| 33 | + |
| 34 | +<template> |
| 35 | + <el-dialog |
| 36 | + :modelValue="visible" |
| 37 | + title="You need to login first." |
| 38 | + width="30%" |
| 39 | + > |
| 40 | + <el-collapse accordion> |
| 41 | + <el-collapse-item title="Server in cloud" name="1"> |
| 42 | + <a href="/oauth2/token" target="_blank"> |
| 43 | + <svg height="32" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32" data-view-component="true" class="octicon octicon-mark-github v-align-middle color-fg-default"> |
| 44 | + <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path> |
| 45 | + </svg> |
| 46 | + </a> |
| 47 | + </el-collapse-item> |
| 48 | + <el-collapse-item title="Server in local" name="2"> |
| 49 | + <el-steps :active="deviceAuthActive" finish-status="success"> |
| 50 | + <el-step title="Request Device Code" /> |
| 51 | + <el-step title="Input Code"/> |
| 52 | + <el-step title="Finished" /> |
| 53 | + </el-steps> |
| 54 | + |
| 55 | + <div v-if="deviceAuthActive===1"> |
| 56 | + Open <a :href="deviceAuthResponse.verification_uri" target="_blank">this link</a>, and type the code: <span>{{ deviceAuthResponse.user_code }}. Then click the next step button.</span> |
| 57 | + </div> |
| 58 | + <el-button style="margin-top: 12px" @click="deviceAuthNext">Next step</el-button> |
| 59 | + </el-collapse-item> |
| 60 | + </el-collapse> |
| 61 | + </el-dialog> |
| 62 | +</template> |
0 commit comments