Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: ♻️ Migrate auth.vue to composition API

Browse Source
This commit is contained in:
Kainoa Kanter 2023-09-03 21:18:38 +00:00
parent 2e1f5c6c8e
commit 12ff93baea
1 changed files with 82 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
packages/client/src/pages/auth.vue
View File

@ -45,61 +45,48 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import XForm from "./auth.form.vue";
import MkSignin from "@/components/MkSignin.vue";
import MkKeyValue from "@/components/MkKeyValue.vue";
import * as os from "@/os";
import { login } from "@/account";
import { i18n } from "@/i18n";
import { $i } from "@/account";
export default defineComponent({
components: {
XForm,
MkSignin,
MkKeyValue,
const props = defineProps<{
token: string;
}>();
const state = ref("");
const session = ref();
const fetching = ref(true);
const auth_code = ref("");
onMounted(() => {
if (!$i) return;
os.api("auth/session/show", { token: props.token })
.then((sess: any) => {
session.value = sess;
fetching.value = false;
if (session.value.app.isAuthorized) {
os.api("auth/accept", { token: session.value.token }).then(
() => {
accepted();
},
props: ["token"],
data() {
return {
state: null,
session: null,
fetching: true,
i18n,
auth_code: null,
};
},
mounted() {
if (!this.$i) return;
// Fetch session
os.api("auth/session/show", {
token: this.token,
})
.then((session) => {
this.session = session;
this.fetching = false;
// 既に連携していた場合
if (this.session.app.isAuthorized) {
os.api("auth/accept", {
token: this.session.token,
}).then(() => {
this.accepted();
});
);
} else {
this.state = "waiting";
state.value = "waiting";
}
})
.catch((error) => {
this.state = "fetch-session-error";
this.fetching = false;
state.value = "fetch-session-error";
fetching.value = false;
});
},
methods: {
accepted() {
this.state = "accepted";
});
const getUrlParams = () =>
window.location.search
.substring(1)
@ -109,50 +96,46 @@ export default defineComponent({
result[k] = decodeURI(v);
return result;
}, {});
const accepted = () => {
state.value = "accepted";
const isMastodon = !!getUrlParams().mastodon;
if (this.session.app.callbackUrl && isMastodon) {
if (session.value.app.callbackUrl && isMastodon) {
const redirectUri = decodeURIComponent(getUrlParams().redirect_uri);
if (!this.session.app.callbackUrl.split('\n').some(p => p === redirectUri)){
this.state = "fetch-session-error";
this.fetching = false;
throw new Error("callback uri doesn't match registered app");
}
const callbackUrl = new URL(redirectUri)
callbackUrl.searchParams.append("code", this.session.token);
if (getUrlParams().state)
callbackUrl.searchParams.append(
"state",
getUrlParams().state,
);
location.href = callbackUrl.toString();
} else if (this.session.app.callbackUrl) {
const url = new URL(this.session.app.callbackUrl);
if (
[
"javascript:",
"file:",
"data:",
"mailto:",
"tel:",
].includes(url.protocol)
)
throw new Error("invalid url");
if (
this.session.app.callbackUrl === "urn:ietf:wg:oauth:2.0:oob"
!session.value.app.callbackUrl
.split("\n")
.some((p) => p === redirectUri)
) {
this.auth_code = this.session.token;
state.value = "fetch-session-error";
fetching.value = false;
throw new Error("Callback URI doesn't match registered app");
}
const callbackUrl = new URL(redirectUri);
callbackUrl.searchParams.append("code", session.value.token);
if (getUrlParams().state)
callbackUrl.searchParams.append("state", getUrlParams().state);
location.href = callbackUrl.toString();
} else if (session.value.app.callbackUrl) {
const url = new URL(session.value.app.callbackUrl);
if (
["javascript:", "file:", "data:", "mailto:", "tel:"].includes(
url.protocol,
)
) {
throw new Error("Invalid URL");
}
if (session.value.app.callbackUrl === "urn:ietf:wg:oauth:2.0:oob") {
auth_code.value = session.value.token;
} else {
location.href = `${this.session.app.callbackUrl}?token=${
this.session.token
}&code=${this.session.token}&state=${
getUrlParams().state || ""
}`;
location.href = `${session.value.app.callbackUrl}?token=${
session.value.token
}&code=${session.value.token}&state=${getUrlParams().state || ""}`;
}
}
},
onLogin(res) {
};
const onLogin = (res) => {
login(res.i);
},
},
});
};
</script>