-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
259 additions
and
92 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
<template> | ||
<v-dialog v-model="this.show" max-width="320" persistent> | ||
<v-list class="py-2" color="primary" elevation="12" rounded="lg"> | ||
<v-list-item prepend-icon="mdi-plus-circle" :title="text"> | ||
<template v-slot:prepend> | ||
<div class="pe-4"> | ||
<v-icon color="primary" size="x-large"></v-icon> | ||
</div> | ||
</template> | ||
|
||
<template v-slot:append> | ||
<v-progress-circular color="primary" indeterminate="disable-shrink" size="16" | ||
width="2"></v-progress-circular> | ||
</template> | ||
</v-list-item> | ||
</v-list> | ||
</v-dialog></template> | ||
|
||
<script> | ||
export default { | ||
props: { | ||
show: { | ||
type: Boolean, | ||
default: false, | ||
}, | ||
text: { | ||
type: String, | ||
default: '加载中', | ||
}, | ||
}, | ||
watch: { | ||
show(val) { | ||
this.loading = val; | ||
}, | ||
text(val) { | ||
this.text = val; | ||
}, | ||
}, | ||
}; | ||
</script> | ||
|
||
<style scoped> | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,41 +1,136 @@ | ||
<template> | ||
<v-container> | ||
<v-card class="mx-auto" :href="BASE_API + '/user/login?redirect=new'"> | ||
<template v-slot:prepend> | ||
<v-icon icon="mdi-web"></v-icon> | ||
</template> | ||
<template v-slot:append> | ||
<v-icon icon="mdi-arrow-right-circle"></v-icon> | ||
</template> | ||
<template v-slot:title> | ||
<span>在 ZeroCat 完成登录</span> </template><template v-slot:subtitle> | ||
<span>您将在 {{ BASE_API }} 完成登录</span> </template><v-card-text class="bg-surface-light pt-4"> | ||
您将会跳转至ZeroCat账户登录页面,完成登录后,您将会被重定向回ZeroCatNext。 | ||
</v-card-text> | ||
</v-card> | ||
<CaptchaDialog ref="usecaptcha"></CaptchaDialog> | ||
<v-btn @click="usecaptcha" class="mt-4" block variant="outlined">使用验证码登录</v-btn> | ||
</v-container> | ||
|
||
|
||
|
||
|
||
<div class="auth-wrapper d-flex align-center justify-center pa-4"> | ||
<VCard class="auth-card pa-4 pt-7" max-width="448"> | ||
|
||
<v-row> | ||
<v-col cols="12"> | ||
<VCardText> | ||
<h5 class="text-h5 font-weight-semibold mb-1"> | ||
欢迎来到ZeroCatNext! 👋🏻 | ||
</h5> | ||
<p class="mb-0"> | ||
请登录或创建您的账户 </p> | ||
</VCardText> | ||
</v-col></v-row> | ||
|
||
|
||
<VCardText> | ||
<VForm> | ||
<VRow> | ||
<!-- email --> | ||
<VCol cols="12"> | ||
<VTextField label="Username" type="text" v-model='username' variant="outlined"></VTextField> | ||
<VTextField label="Password" type="password" v-model='password' variant="outlined"></VTextField> | ||
</VCol> | ||
<VCol cols="9"> | ||
<div id="recaptcha-div"></div> | ||
</VCol> | ||
<VCol cols="3"> <v-btn @click="resetCaptcha()" variant="text">刷新</v-btn> </VCol> | ||
<!-- password --> | ||
<VCol cols="12"> | ||
|
||
<!-- remember me checkbox | ||
<div class="d-flex align-center justify-space-between flex-wrap "> | ||
<VCheckbox disabled label="Remember me" /> | ||
</div>--> | ||
|
||
<v-btn class="text-none" color="primary" rounded="xl" text="登录" variant="flat" size="large" @click="login" | ||
append-icon="mdi-arrow-right"></v-btn> <!-- login button --> | ||
|
||
</VCol> | ||
|
||
<!-- create account --> | ||
<VCol cols="12" class="text-center text-base"> | ||
<span>新用户?</span> | ||
<a class="text-primary ms-2" :href="BASE_API + '/user/login?redirect=new'"> | ||
注册账户 </a> | ||
</VCol> | ||
|
||
|
||
</VRow> | ||
</VForm> | ||
</VCardText> <v-card class="mx-auto bg-surface-light" :href="BASE_API + '/user/login?redirect=new'"> | ||
<template v-slot:prepend> | ||
<v-icon icon="mdi-web"></v-icon> | ||
</template> | ||
<template v-slot:append> | ||
<v-icon icon="mdi-arrow-right-circle"></v-icon> | ||
</template> | ||
<template v-slot:title> | ||
<span>在 ZeroCat 完成登录</span> </template><template v-slot:subtitle> | ||
<span>您将在 {{ BASE_API }} 完成登录</span> </template> | ||
</v-card> | ||
</VCard> | ||
</div> | ||
<LoadingDialog :show="loading" text='登录中' /> | ||
|
||
</template> | ||
|
||
<script> | ||
import { localuser } from '@/stores/user'; | ||
import CaptchaDialog from '@/components/CaptchaDialog.vue'; | ||
import request from "../../axios/axios"; | ||
import LoadingDialog from '@/components/LoadingDialog.vue'; | ||
import { initRecaptcha, getResponse, resetCaptcha } from '../../stores/useRecaptcha'; | ||
export default { | ||
components: { CaptchaDialog }, | ||
components: { LoadingDialog }, | ||
data() { | ||
return { | ||
BASE_API: import.meta.env.VITE_APP_BASE_API, | ||
username: '', | ||
password: '', | ||
tryinguser: {}, | ||
loading: false, | ||
initRecaptcha, | ||
getResponse, | ||
resetCaptcha, | ||
}; | ||
}, | ||
created() { | ||
if (localuser.islogin == true) { | ||
if (localuser.islogin.value == true) { | ||
this.$router.push("/"); | ||
} | ||
}, | ||
methods: { | ||
usecaptcha() { console.log(this.$refs.usecaptcha.get())} | ||
setup() { | ||
initRecaptcha('recaptcha-div'); | ||
}, | ||
methods: { | ||
async login() { | ||
this.loading = true | ||
this.tryinguser = await request({ | ||
url: '/user/login', | ||
method: 'post', | ||
data: { | ||
"re": getResponse(), | ||
"un": this.username, | ||
"pw": this.password | ||
} | ||
}) | ||
if (this.tryinguser.message != 'OK') { | ||
this.loading = false | ||
this.$toast.add({ severity: 'info', summary: 'info', detail: this.tryinguser.msg || this.tryinguser.message, life: 3000 }); | ||
return | ||
} | ||
//this.$toast.add({ severity: 'info', summary: 'info', detail: this.tryinguser.msg||this.tryinguser.message, life: 3000 }); | ||
localuser.setuser(this.tryinguser.token) | ||
console.log(this.tryinguser) | ||
this.loading = false | ||
if (this.tryinguser.msg || this.tryinguser.message == 'OK') { | ||
this.$router.push("/"); | ||
} | ||
}, | ||
addtoast(text) { | ||
this.$toast.add({ severity: 'info', summary: 'info', detail: text, life: 3000 }); | ||
} | ||
} | ||
}; | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,26 +1,25 @@ | ||
import { ref } from 'vue'; | ||
export function initRecaptcha(id) { | ||
const script = document.createElement("script"); | ||
script.src = | ||
import.meta.env.VITE_APP_REURL; | ||
script.async = true; | ||
script.defer = true; | ||
|
||
export default function useRecaptcha() { | ||
const recaptcha = ref(null); | ||
|
||
const initRecaptcha = () => { | ||
window.recaptcha = { | ||
siteKey: '1x00000000000000000000AA', | ||
document.head.appendChild(script); | ||
window.onloadCallback = function () { | ||
window.grecaptcha.render(`#${id}`, { | ||
sitekey: import.meta.env.VITE_APP_REKEY, | ||
callback: function (token) { | ||
console.log(`Challenge Success ${token}`); | ||
}, | ||
}; | ||
|
||
const script = document.createElement('script'); | ||
script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js?compat=recaptcha&onload=onloadCallback'; | ||
script.async = true; | ||
script.defer = true; | ||
|
||
document.head.appendChild(script); | ||
}); | ||
}; | ||
} | ||
|
||
return { | ||
recaptcha, | ||
initRecaptcha, | ||
}; | ||
export function getResponse() { | ||
return window.grecaptcha.getResponse(); | ||
} | ||
|
||
export function resetCaptcha() { | ||
window.grecaptcha.reset(); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,25 +1,84 @@ | ||
import { jwtDecode } from "jwt-decode" | ||
import { ref } from "vue" | ||
|
||
var token = ref(null) | ||
var user = ref({}) | ||
var islogin = ref(false) | ||
import { jwtDecode } from "jwt-decode"; | ||
import { ref } from "vue"; | ||
import request from "../axios/axios"; | ||
var token = ref(null); | ||
var user = ref({}); | ||
var islogin = ref(false); | ||
|
||
const loaduser = () => { | ||
if (localStorage.getItem("token")) { | ||
token.value = localStorage.getItem("token") | ||
user.value = jwtDecode(token.value) | ||
islogin.value = true | ||
} else { | ||
islogin.value = false | ||
user.value = {} | ||
} | ||
console.log("用户登录信息----------") | ||
console.log("token:" + token.value) | ||
console.log(user.value) | ||
console.log("是否登录:" + islogin.value) | ||
} | ||
//try { | ||
console.log("加载用户信息"); | ||
if (localStorage.getItem("token") && localStorage.getItem("token")!='{}') { | ||
token.value = localStorage.getItem("token"); | ||
console.log(token.value); | ||
user.value = jwtDecode(token.value); | ||
islogin.value = true; | ||
} else { | ||
islogin.value = false; | ||
user.value = {}; | ||
} | ||
console.log("用户登录信息----------"); | ||
console.log("token:" + token.value); | ||
console.log(user.value); | ||
console.log("是否登录:" + islogin.value); | ||
//} catch (error) { | ||
// console.log(error); | ||
//} | ||
}; | ||
//const refresh = async () => { | ||
//try { | ||
// console.log("刷新token"); | ||
// console.log(token.value); | ||
// if (localStorage.getItem("user")) { | ||
// await request({ | ||
// url: "/api/v1/auth/refresh", | ||
// method: "post", | ||
// data: { | ||
// clientId: "newlangs", | ||
// clientSecret: "p3n9mx0y3aPzcMWJQb6qvrEFusVDfyZN", | ||
// grantType: "refresh_token", | ||
// refreshToken: token.value.refreshToken, | ||
// }, | ||
// notauth: true, | ||
// }).then((res) => { | ||
// setuser(res.data); | ||
// console.log(res.data); | ||
// }); | ||
// } else { | ||
// islogin.value = false; | ||
// user.value = {}; | ||
// } | ||
// console.log("用户登录信息----------"); | ||
// console.log("token:" + token.value); | ||
// console.log(user.value); | ||
// console.log("是否登录:" + islogin.value); | ||
// } catch (error) { | ||
// console.log(error); | ||
// } | ||
//}; | ||
|
||
loaduser() | ||
//const checkexp = () => { | ||
// if (user.value.exp * 1000 < Date.now()) { | ||
// console.log("token expired!"); | ||
// refresh(); | ||
// } else { | ||
// console.log("token not expired!"); | ||
// } | ||
//}; | ||
const setuser = (data) => { | ||
localStorage.setItem("token",data); | ||
console.log("用户登录信息----------"); | ||
console.log(data); | ||
loaduser(); | ||
}; | ||
loaduser(); | ||
|
||
export const localuser = { token, user, islogin, loaduser } | ||
export const localuser = { | ||
token, | ||
user, | ||
islogin, | ||
loaduser, | ||
setuser, | ||
//refresh, | ||
//checkexp, | ||
}; |