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

refactor: 💄 improve miauth style

Browse Source
This commit is contained in:
ThatOneCalculator 2023-06-24 19:16:15 -07:00
parent 5ab80337db
commit dba594c55a
No known key found for this signature in database
GPG Key ID: 8703CACD01000000
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?" shareAccess: "Would you like to authorize \"{name}\" to access this account?"
shareAccessAsk: "Are you sure you want to authorize this application to access your shareAccessAsk: "Are you sure you want to authorize this application to access your
account?" account?"
permissionAsk: "This application requests the following permissions" permissionAsk: "This application requests the following permissions:"
pleaseGoBack: "Please go back to the application" pleaseGoBack: "Please go back to the application"
callback: "Returning to the application" callback: "Returning to the application"
denied: "Access denied" 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: _antennaSources:
all: "All posts" all: "All posts"
homeTimeline: "Posts from followed users" homeTimeline: "Posts from followed users"

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

@ -28,11 +28,38 @@
</div> </div>
<div class="_content"> <div class="_content">
<p>{{ i18n.ts._auth.permissionAsk }}</p> <p>{{ i18n.ts._auth.permissionAsk }}</p>
<ul> <div
<li v-for="p in _permissions" :key="p"> 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}`) }} {{ i18n.t(`_permissions.${p}`) }}
</li> </div>
</ul> </div>
</div> </div>
<div class="_footer"> <div class="_footer">
<MkButton inline @click="deny">{{ <MkButton inline @click="deny">{{
@ -71,6 +98,10 @@ const _permissions = props.permission.split(",");
let state = $ref<string | null>(null); let state = $ref<string | null>(null);
function getIcon(p: string) {
return p.includes("write") ? "pencil-simple" : "eye";
}
async function accept(): Promise<void> { async function accept(): Promise<void> {
state = "waiting"; state = "waiting";
await os.api("miauth/gen-token", { await os.api("miauth/gen-token", {
@ -107,4 +138,19 @@ function onLogin(res): void {
} }
</script> </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>