refactor: 💄 improve miauth style
This commit is contained in:
parent
5ab80337db
commit
dba594c55a
2 changed files with 54 additions and 7 deletions
|
@ -1548,11 +1548,12 @@ _auth:
|
|||
shareAccess: "Would you like to authorize \"{name}\" to access this account?"
|
||||
shareAccessAsk: "Are you sure you want to authorize this application to access your
|
||||
account?"
|
||||
permissionAsk: "This application requests the following permissions"
|
||||
permissionAsk: "This application requests the following permissions:"
|
||||
pleaseGoBack: "Please go back to the application"
|
||||
callback: "Returning to the application"
|
||||
denied: "Access denied"
|
||||
copyAsk: "Please paste the following authorization code to the application"
|
||||
copyAsk: "Please paste the following authorization code to the application:"
|
||||
allPermissions: "Full account access"
|
||||
_antennaSources:
|
||||
all: "All posts"
|
||||
homeTimeline: "Posts from followed users"
|
||||
|
|
|
@ -28,11 +28,38 @@
|
|||
</div>
|
||||
<div class="_content">
|
||||
<p>{{ i18n.ts._auth.permissionAsk }}</p>
|
||||
<ul>
|
||||
<li v-for="p in _permissions" :key="p">
|
||||
<div
|
||||
v-if="_permissions.length === 32"
|
||||
:class="[$style.permissions]"
|
||||
>
|
||||
<div
|
||||
:class="[$style.permission]"
|
||||
style="
|
||||
background-color: var(--error);
|
||||
color: var(--fgOnAccent);
|
||||
"
|
||||
>
|
||||
<i
|
||||
class="ph-shield-warning ph-bold ph-xl"
|
||||
style="margin-right: 0.5rem"
|
||||
></i>
|
||||
{{ i18n.ts._permissions.allPermissions }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else :class="[$style.permissions]">
|
||||
<div
|
||||
v-for="p in _permissions"
|
||||
:key="p"
|
||||
:class="[$style.permission, $style.permission]"
|
||||
>
|
||||
<i
|
||||
:class="[`ph-${getIcon(p)}`]"
|
||||
class="ph-bold ph-xl"
|
||||
style="margin-right: 0.5rem"
|
||||
></i>
|
||||
{{ i18n.t(`_permissions.${p}`) }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="_footer">
|
||||
<MkButton inline @click="deny">{{
|
||||
|
@ -71,6 +98,10 @@ const _permissions = props.permission.split(",");
|
|||
|
||||
let state = $ref<string | null>(null);
|
||||
|
||||
function getIcon(p: string) {
|
||||
return p.includes("write") ? "pencil-simple" : "eye";
|
||||
}
|
||||
|
||||
async function accept(): Promise<void> {
|
||||
state = "waiting";
|
||||
await os.api("miauth/gen-token", {
|
||||
|
@ -107,4 +138,19 @@ function onLogin(res): void {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" module>
|
||||
.permissions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.permission {
|
||||
display: inline-flex;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: var(--radius);
|
||||
background-color: var(--buttonBg);
|
||||
color: var(--fg);
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in a new issue