Skip to content

Commit

Permalink
1
Browse files Browse the repository at this point in the history
  • Loading branch information
@SunWuyuan
SunWuyuan committed Aug 6, 2024
1 parent 2f904cf commit ecede22
Show file tree
Hide file tree
Showing 6 changed files with 259 additions and 92 deletions.
21 changes: 0 additions & 21 deletions src/components/CaptchaDialog.vue
View file

This file was deleted.

44 changes: 44 additions & 0 deletions src/components/LoadingDialog.vue
View file
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>
9 changes: 0 additions & 9 deletions src/pages/account/callback.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,15 +50,6 @@ export default {
console.log('无token')
}
},
methods: {
async getproject() {
this.project = await request({
url: '/api/projectinfo?id=' + this.$route.params.id,
method: 'get',
})
console.log(this.project)
},
}
}
Expand Down
139 changes: 117 additions & 22 deletions src/pages/account/login.vue
View file
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>
37 changes: 18 additions & 19 deletions src/stores/useRecaptcha.js
View file
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();
}
101 changes: 80 additions & 21 deletions src/stores/user.js
View file
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,
};

0 comments on commit ecede22

Please sign in to comment.