feat: test-auth

docs/src/components/GitHubStats.svelte

@@ -31,15 +31,15 @@
 
 {#if !error && !loading}
   <div class="github">
-    <a class="category star" href="https://github.com/tomalaforge/angular-challenges">
+    <a class="category" href="https://github.com/tomalaforge/angular-challenges" target="_blank">
       <slot name="star"/>
       <div>{stargazersCount}</div>
     </a>
 
-    <div class="category">
+    <a class="category" href="https://github.com/tomalaforge/angular-challenges/fork" target="_blank">
       <slot name="fork"/>
       <div>{forksCount}</div>
-    </div>
+    </a>
   </div>
 {/if}
 
@@ -56,14 +56,11 @@
     align-items: center;
     font-size: 12px;
     gap: 0.25rem;
-  }
-
-  .star {
     color: var(--sl-color-text);
     text-decoration: none;
   }
 
-  .star:hover {
+  .category:hover {
     color: var(--sl-color-accent-high);
   }
 

docs/src/components/SiteTitle.astro

@@ -2,16 +2,18 @@
 import Default from '@astrojs/starlight/components/SiteTitle.astro';
 import GitHubStats from './GitHubStats.svelte';
 import MyIcon from './MyIcon.astro';
-
+import SignUp from './github/SignUp.svelte';
 ---
 
 <Default {...Astro.props}>
   <slot />
 </Default>
 
-<GitHubStats client:load >
-  <MyIcon name="star" slot="star" />
-  <MyIcon name="fork" viewBox="0 0 16 16" slot="fork"/>
-</GitHubStats>
+<SignUp client:load />
+
+<!--<GitHubStats client:load >-->
+<!--  <MyIcon name="star" slot="star" />-->
+<!--  <MyIcon name="fork" viewBox="0 0 16 16" slot="fork"/>-->
+<!--</GitHubStats>-->
 
 

docs/src/components/github/AnsweredUser.svelte

@@ -1,6 +1,6 @@
 <script>
   import { onMount } from 'svelte';
-  import { data, error, isLoaded, isLoading, totalCount } from './github-store';
+  import { data, error, isLoaded, isLoading, token, totalCount } from './github-store';
 
   export let challengeNumber;
 
@@ -36,18 +36,22 @@
 
 </script>
 
+token: {$token}
 {#if $isLoaded}
   <div class="solution-container" id="answers">
     <div>Answered by</div>
-    {#each $data as { user }}
+    {#each $data as { user, html_url }}
+      <a href={html_url} target="_blank">
       <img
         loading="lazy"
         src={user.avatar_url}
         width="30"
         height="30"
         alt=""
+        title={user.login}
         class="avatar"
       />
+      </a>
     {/each}
   </div>
 {/if}

docs/src/components/github/SignUp.svelte

@@ -0,0 +1,38 @@
+<script>
+  import { loadToken, test } from './github-store';
+  import { onMount } from 'svelte';
+
+  // Function to redirect the user to GitHub's signup page
+  async function redirectToGitHubSignup() {
+    // token.set('test-token');
+    // window.location.href = `/auth/authorize?redirect_uri=${window.location.href}&test=dklsfj`;
+    await fetch(`/auth/authorize?redirect_uri=${window.location.href}&state=jsqhd&client_id=Iv1.711903007f608691`)
+  }
+
+  onMount(() => {
+    loadToken();
+  });
+
+</script>
+
+{$test}
+<button on:click={redirectToGitHubSignup}>
+  Sign Up for GitHub
+</button>
+
+
+<style>
+  button {
+    background-color: #2ea44f;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    cursor: pointer;
+    font-size: 16px;
+    border-radius: 5px;
+  }
+
+  button:hover {
+    background-color: #218838;
+  }
+</style>

docs/src/components/github/github-store.ts

@@ -1,6 +1,6 @@
 import { derived, writable } from 'svelte/store';
 
-export const count = writable(0);
+export const token = writable<string | null>(null);
 
 export const isLoading = writable(true);
 export const error = writable(false);
@@ -11,3 +11,24 @@ export const isLoaded = derived(
   [isLoading, error],
   ([$isLoading, $error]) => !$isLoading && !$error,
 );
+
+const TOKEN_KEY = 'TOKEN';
+
+export function loadToken() {
+  // Get the current value from localStorage if it exists, otherwise use the startValue
+  const persistedValue = localStorage.getItem(TOKEN_KEY);
+  if (persistedValue) {
+    token.set(JSON.parse(persistedValue));
+    return;
+  }
+
+  token.set('API call');
+}
+
+token.subscribe((value) => {
+  if (value) {
+    localStorage.setItem(TOKEN_KEY, JSON.stringify(value));
+  }
+});
+
+export const test = writable('test');

docs/src/middleware.ts

@@ -0,0 +1,32 @@
+import { defineMiddleware } from 'astro/middleware';
+
+const GITHUB_OAUTH_AUTHORIZE_URL = 'https://github.com/login/oauth/authorize';
+
+export const onRequest = defineMiddleware((context, next) => {
+  console.log(context.url.pathname);
+  if (context.url.pathname !== '/auth') {
+    return next();
+  }
+
+  const appReturnUrl = context.request.url;
+  const url = new URL(context.request.url);
+
+  console.log('je rentre ici');
+  console.log(context.url);
+  console.log(context.site);
+  // console.dir(context.params);
+
+  // if (!appReturnUrl) {
+  //   res.status(400).json({ error: '`redirect_uri` is required.' });
+  //   return;
+  // }
+
+  // const { client_id } = env;
+  // const redirect_uri = `http://${context.headers.host}/api/oauth/authorized`;
+  // const state = await encodeState(appReturnUrl, env.encryption_password);
+  //
+  // const oauthParams = new URLSearchParams({ client_id, redirect_uri, state });
+  // context.redirect(`${GITHUB_OAUTH_AUTHORIZE_URL}?${oauthParams}`, 302);
+
+  return Response.redirect(new URL('/', context.url));
+});

docs/src/pages/auth/authorize.js

@@ -0,0 +1,11 @@
+const GITHUB_OAUTH_AUTHORIZE_URL = 'https://github.com/login/oauth/authorize';
+
+export async function GET({params, redirect}) {
+
+  console.log('Authorize request', params);
+
+  const redirect_uri = 'http://localhost:4321/auth/localized'
+
+  const oauthParams = new URLSearchParams({ client_id:'Iv1.711903007f608691' , redirect_uri, state: 'lqsksqd' });
+  return redirect(`${GITHUB_OAUTH_AUTHORIZE_URL}?${oauthParams}`, 302)
+}

docs/src/pages/auth/authorized.js

@@ -0,0 +1,12 @@
+const GITHUB_OAUTH_AUTHORIZE_URL = 'https://github.com/login/oauth/authorize';
+
+export async function GET({params, request}) {
+
+  console.log('Authorized', params);
+
+
+  return new Response({
+    status: 302,
+    path: `/`,
+  });
+}