limepotato/jormungandr-bite
1
0
Fork 0
mirror of https://iceshrimp.dev/limepotato/jormungandr-bite.git synced 2024-11-22 01:47:39 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: 💄 improve miauth style

Browse source
This commit is contained in:
ThatOneCalculator 2023-06-24 19:16:15 -07:00
parent b8e273217c
commit d1efef1353
2 changed files with 54 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
locales/en-US.yml
View file

@ -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"

56
packages/client/src/pages/miauth.vue
View file

@ -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>