Add GitHub integration panel in profile page

korekto · May 14, 2024 · e3aedc3 · e3aedc3
1 parent 27e929f
commit e3aedc3
Show file tree

Hide file tree

Showing 5 changed files with 131 additions and 62 deletions.
diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -7,6 +7,7 @@ export type User = {
 	avatar_url: string;
 	admin: boolean;
 	teacher: boolean;
+	installation_id?: string;
 };
 
 export type ProfileInfo = {

diff --git a/src/routes/UserSide.svelte b/src/routes/UserSide.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import { UserStore } from '$lib/stores';
 </script>
 

diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
@@ -1,69 +1,14 @@
 <script lang="ts">
-	import * as yup from 'yup';
-	import { UserStore } from '$lib/stores';
-	import type { ProfileInfo } from '$lib/types';
-	import { createHeadlessForm } from '$lib/form';
-	import type { YupErrors } from '$lib/form';
-	import api from '$lib/api';
-
+	import ProfileForm from './ProfileForm.svelte';
+	import GitHubIntegration from './GitHubIntegration.svelte';
 	import '$css/form.css';
-	import '$css/grid.css';
-
-	const schema: yup.ObjectSchema<ProfileInfo> = yup.object({
-		firstname: yup.string().required(),
-		lastname: yup.string().required(),
-		school_group: yup.string().required(),
-		school_email: yup.string().required().email()
-	});
-
-	let errors: YupErrors = {};
-
-	const form = createHeadlessForm<ProfileInfo>(
-		schema,
-		api.saveProfile,
-		(err) => (errors = err),
-		$UserStore
-	);
 </script>
 
 <div class="text-column">
 	<h1>Profile</h1>
 
-	<form on:submit|preventDefault={form.submitHandler}>
-		<div class="row">
-			<label class="col-input" for="firstname">Firstname</label>
-			<input class="col-auto" type="text" id="firstname" bind:value={form.values.firstname} />
-			{#if errors.first_name}<div class="error">Required</div>
-				>{/if}
-		</div>
-		<div class="row">
-			<label class="col-input" for="lastname">Lastname</label>
-			<input class="col-auto" type="text" id="lastname" bind:value={form.values.lastname} />
-			{#if errors.lastname}<div class="error">Required</div>{/if}
-		</div>
-		<div class="row">
-			<label class="col-input" for="school_group">Class</label>
-			<input
-				class="col-auto"
-				type="text"
-				id="school_group"
-				bind:value={form.values.school_group}
-			/>
-			{#if errors.school_group}<div class="error">Required</div>{/if}
-		</div>
-		<div class="row">
-			<label class="col-input" for="school_email">School email</label>
-			<input
-				class="col-auto"
-				type="email"
-				id="school_email"
-				bind:value={form.values.school_email}
-			/>
-			{#if errors.school_email}<div class="error">Invalid</div>{/if}
-		</div>
-		<div class="row">
-			<div class="col-input" />
-			<button>Save</button>
-		</div>
-	</form>
+	<div class="row">
+		<ProfileForm />
+		<GitHubIntegration />
+	</div>
 </div>
diff --git a/src/routes/profile/GitHubIntegration.svelte b/src/routes/profile/GitHubIntegration.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { UserStore } from '$lib/stores';
+	import Icon from '@iconify/svelte';
+
+	const compute_installation_url = () => {
+		return `https://github.com/settings/installations/${$UserStore.installation_id}`;
+	};
+</script>
+
+<div class="card">
+	<h2>
+		GitHub Integration
+		{#if $UserStore.installation_id}
+			<Icon icon="icon-park:check-one" inline />
+		{:else}
+			<Icon icon="openmoji:cross-mark" inline />
+		{/if}
+	</h2>
+
+	{#if $UserStore.installation_id}
+		Installation ID: {$UserStore.installation_id} (<a
+			href={compute_installation_url()}
+			target="_blank"
+			rel="noopener noreferrer">configure</a
+		>)
+	{:else}
+		<div>
+			Please, install the <a
+				href="https://github.com/apps/korekto"
+				target="_blank"
+				rel="noopener noreferrer">Korekto GitHub app</a
+			> for integration with your GitHub repositories.
+		</div>
+		<hr />
+		<div>
+			Or try to <a href="/auth/gh/post_install">Refresh the integration process</a>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.card {
+		margin: 5px 200px;
+		flex: 1;
+	}
+
+	h2 {
+		font-size: 1.5rem;
+		font-weight: bold;
+	}
+</style>
diff --git a/src/routes/profile/ProfileForm.svelte b/src/routes/profile/ProfileForm.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+	import * as yup from 'yup';
+	import { UserStore } from '$lib/stores';
+	import type { ProfileInfo } from '$lib/types';
+	import { createHeadlessForm } from '$lib/form';
+	import type { YupErrors } from '$lib/form';
+	import api from '$lib/api';
+
+	import '$css/form.css';
+	import '$css/grid.css';
+
+	const schema: yup.ObjectSchema<ProfileInfo> = yup.object({
+		firstname: yup.string().required(),
+		lastname: yup.string().required(),
+		school_group: yup.string().required(),
+		school_email: yup.string().required().email()
+	});
+
+	let errors: YupErrors = {};
+
+	const form = createHeadlessForm<ProfileInfo>(
+		schema,
+		api.saveProfile,
+		(err) => (errors = err),
+		$UserStore
+	);
+</script>
+
+<form on:submit|preventDefault={form.submitHandler}>
+	<div class="row">
+		<label class="col-input" for="firstname">Firstname</label>
+		<input class="col-auto" type="text" id="firstname" bind:value={form.values.firstname} />
+		{#if errors.first_name}<div class="error">Required</div>
+			>{/if}
+	</div>
+	<div class="row">
+		<label class="col-input" for="lastname">Lastname</label>
+		<input class="col-auto" type="text" id="lastname" bind:value={form.values.lastname} />
+		{#if errors.lastname}<div class="error">Required</div>{/if}
+	</div>
+	<div class="row">
+		<label class="col-input" for="school_group">Class</label>
+		<input
+			class="col-auto"
+			type="text"
+			id="school_group"
+			bind:value={form.values.school_group}
+		/>
+		{#if errors.school_group}<div class="error">Required</div>{/if}
+	</div>
+	<div class="row">
+		<label class="col-input" for="school_email">School email</label>
+		<input
+			class="col-auto"
+			type="email"
+			id="school_email"
+			bind:value={form.values.school_email}
+		/>
+		{#if errors.school_email}<div class="error">Invalid</div>{/if}
+	</div>
+	<div class="row">
+		<div class="col-input" />
+		<button>Save</button>
+	</div>
+</form>
+
+<style>
+	form {
+		margin: 5px 200px;
+		flex: 1;
+	}
+</style>