-
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
105 additions
and
39 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
7 changes: 7 additions & 0 deletions
7
frontend/src/routes/(authenticated)/authorize/[email protected]
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| <script> | ||
| import { Layout } from '$lib/layout'; | ||
| </script> | ||
|
|
||
| <Layout hideToolbar> | ||
| <slot /> | ||
| </Layout> |
79 changes: 67 additions & 12 deletions
79
frontend/src/routes/(authenticated)/authorize/+page.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,73 @@ | ||
| <script lang="ts"> | ||
| import ProjectTypeIcon from '$lib/components/ProjectType/ProjectTypeIcon.svelte'; | ||
| import { ProjectType } from '$lib/gql/types'; | ||
| import { AuthenticatedUserIcon } from '$lib/icons'; | ||
| import type {PageData} from './$types'; | ||
| import Icon from '$lib/icons/Icon.svelte'; | ||
| import type { PageData } from './$types'; | ||
| export let data: PageData; | ||
| </script> | ||
|
|
||
| <form method="post" action="/api/login/open-id-auth"> | ||
|
|
||
| <p>Do you want to permit "{data.appName}" to access your data? (scopes: {data.scope})</p> | ||
| {#each Object.entries(data.postback) as [key, value]} | ||
| <!--parameters required to resume the auth process--> | ||
| <input type="hidden" name={key} value={value}/> | ||
| {/each} | ||
| <input type="submit" class="btn whitespace-nowrap btn-primary" name="submit.accept" value="Approve"/> | ||
| <input type="submit" class="btn whitespace-nowrap btn-secondary" name="submit.deny" value="Deny"/> | ||
| </form> | ||
|
|
||
| <div class="flex flex-col items-center grow"> | ||
| <div class="flex flex-col justify-center grow max-w-lg"> | ||
| <div class="flex-grow"></div> | ||
| <form method="post" action="/api/login/open-id-auth" class="flex flex-col items-center"> | ||
| <div class="mb-6 grid gap-x-3 gap-y-1 items-center" style="grid-template-columns: auto 1fr"> | ||
| <div class="row-span-2"> | ||
| <Icon icon="i-mdi-approval" color="text-success" size="text-5xl" /> | ||
| </div> | ||
| <h2 class="text-3xl"> | ||
| Authorize "{data.appName}" | ||
| </h2> | ||
| <div> | ||
| {data.appName} wants to access your account. | ||
| </div> | ||
| </div> | ||
| <div class="bg-base-200/50 py-5 px-8"> | ||
| <div class="grid gap-x-3 gap-y-5" style="grid-template-columns: auto 1fr"> | ||
| {#each data.scope?.split(' ') ?? [] as scope} | ||
| {#if scope === 'profile'} | ||
| <div class="grid grid-cols-subgrid col-span-full items-center"> | ||
| <AuthenticatedUserIcon size="text-4xl" /> | ||
| <div> | ||
| <div class="font-bold">Personal user data</div> | ||
| <div>Name, email address and/or username (read-only)</div> | ||
| </div> | ||
| </div> | ||
| {/if} | ||
| {#if scope === 'profile'} | ||
| <div class="grid grid-cols-subgrid col-span-full items-center"> | ||
| <ProjectTypeIcon type={ProjectType.FlEx} size="h-8" /> | ||
| <div> | ||
| <div class="font-bold">Projects</div> | ||
| <div>Project membership and roles (read-only)</div> | ||
| </div> | ||
| </div> | ||
| {/if} | ||
| {/each} | ||
| </div> | ||
| </div> | ||
| <div> | ||
| {#each Object.entries(data.postback) as [key, value]} | ||
| <!--parameters required to resume the auth process--> | ||
| <input type="hidden" name={key} {value} /> | ||
| {/each} | ||
| </div> | ||
| <div class="mt-4 flex items-center gap-2"> | ||
| {data.appName} is trusted by Language Depot | ||
| <Icon icon="i-mdi-shield-check" color="text-info" size="text-xl" /> | ||
| </div> | ||
| <div class="w-full flex max-sm:flex-col justify-center gap-4 mt-6"> | ||
| <input type="submit" class="btn whitespace-nowrap btn-secondary" name="submit.deny" value="Deny" /> | ||
| <input | ||
| type="submit" | ||
| class="btn whitespace-nowrap btn-success" | ||
| name="submit.accept" | ||
| value="Authorize {data.appName}" | ||
| /> | ||
| </div> | ||
| </form> | ||
| <div class="flex-grow-[2]"></div> | ||
| </div> | ||
| </div> |