├── .npmrc
├── src
    ├── app.css
    ├── routes
    │   ├── __layout.svelte
    │   ├── index.svelte
    │   ├── [room].svelte
    │   └── api
    │   │   └── get-access-token.ts
    ├── store.ts
    ├── app.html
    ├── services
    │   ├── user.ts
    │   └── chat.ts
    ├── app.d.ts
    └── components
    │   ├── LoggedUserHeader.svelte
    │   ├── LogoutIcon.svelte
    │   ├── ConversationInput.svelte
    │   ├── Message.svelte
    │   ├── Conversation.svelte
    │   ├── UserHeader.svelte
    │   ├── Logo.svelte
    │   └── RoomSelect.svelte
├── static
    ├── favicon.png
    ├── robots.txt
    ├── svelte-welcome.png
    └── svelte-welcome.webp
├── .prettierrc
├── postcss.config.cjs
├── .gitignore
├── tailwind.config.cjs
├── tests
    └── test.ts
├── .eslintignore
├── .prettierignore
├── playwright.config.ts
├── tsconfig.json
├── svelte.config.js
├── .eslintrc.cjs
├── package.json
└── README.md


/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | 


--------------------------------------------------------------------------------
/src/app.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;


--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/chat-hackathon/main/static/favicon.png


--------------------------------------------------------------------------------
/static/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/static/svelte-welcome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/chat-hackathon/main/static/svelte-welcome.png


--------------------------------------------------------------------------------
/static/svelte-welcome.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/chat-hackathon/main/static/svelte-welcome.webp


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"useTabs": true,
3 | 	"singleQuote": true,
4 | 	"trailingComma": "none",
5 | 	"printWidth": 100
6 | }
7 | 


--------------------------------------------------------------------------------
/postcss.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | .vercel
10 | .output
11 | package-lock.json
12 | 


--------------------------------------------------------------------------------
/tailwind.config.cjs:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | 	content: ['./src/**/*.{html,js,svelte,ts}'],
4 | 	theme: {
5 | 		extend: {}
6 | 	},
7 | 	plugins: []
8 | };
9 | 


--------------------------------------------------------------------------------
/tests/test.ts:
--------------------------------------------------------------------------------
1 | import { expect, test } from '@playwright/test';
2 | 
3 | test('about page has expected h1', async ({ page }) => {
4 | 	await page.goto('/about');
5 | 	expect(await page.textContent('h1')).toBe('About this app');
6 | });
7 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | 
10 | # Ignore files for PNPM, NPM and YARN
11 | pnpm-lock.yaml
12 | package-lock.json
13 | yarn.lock
14 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | 
10 | # Ignore files for PNPM, NPM and YARN
11 | pnpm-lock.yaml
12 | package-lock.json
13 | yarn.lock
14 | 


--------------------------------------------------------------------------------
/src/routes/__layout.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import Logo from '../components/Logo.svelte';
 3 | 
 4 | 	import '../app.css';
 5 | </script>
 6 | 
 7 | <main class="max-w-6xl m-auto px-4 relative">
 8 | 	<Logo />
 9 | 	<slot />
10 | </main>
11 | 


--------------------------------------------------------------------------------
/playwright.config.ts:
--------------------------------------------------------------------------------
 1 | import type { PlaywrightTestConfig } from '@playwright/test';
 2 | 
 3 | const config: PlaywrightTestConfig = {
 4 | 	webServer: {
 5 | 		command: 'npm run build && npm run preview',
 6 | 		port: 3000
 7 | 	}
 8 | };
 9 | 
10 | export default config;
11 | 


--------------------------------------------------------------------------------
/src/store.ts:
--------------------------------------------------------------------------------
 1 | import { writable } from "svelte/store";
 2 | 
 3 | type User = {
 4 |   avatar: string,
 5 |   userName: string,
 6 |   name: string,
 7 |   email: string,
 8 |   token: string
 9 | }
10 | 
11 | export const activeConversation = writable<any>(null)
12 | export const user = writable<User|null>(null)
13 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"extends": "./.svelte-kit/tsconfig.json",
 3 | 	"compilerOptions": {
 4 | 		"allowJs": true,
 5 | 		"checkJs": true,
 6 | 		"esModuleInterop": true,
 7 | 		"forceConsistentCasingInFileNames": true,
 8 | 		"resolveJsonModule": true,
 9 | 		"skipLibCheck": true,
10 | 		"sourceMap": true,
11 | 		"strict": true
12 | 	}
13 | }
14 | 


--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 7 | 		%sveltekit.head%
 8 | 	</head>
 9 | 	<body>
10 | 		<div>%sveltekit.body%</div>
11 | 	</body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/src/services/user.ts:
--------------------------------------------------------------------------------
 1 | export const getAccessToken = async ({ token }: { token: string}) => {
 2 |   const res = await fetch('/api/get-access-token', {
 3 |     headers: {
 4 |       jwt: token
 5 |     }
 6 |   })
 7 | 
 8 |   if (!res.ok) throw new Error('Error getting access token')
 9 | 
10 |   const { accessToken } = await res.json()
11 |   return accessToken
12 | }


--------------------------------------------------------------------------------
/src/app.d.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="@sveltejs/kit" />
 2 | 
 3 | // See https://kit.svelte.dev/docs/types#app
 4 | // for information about these interfaces
 5 | // and what to do when importing types
 6 | declare namespace App {
 7 | 	interface Locals {
 8 | 		userid: string;
 9 | 	}
10 | 
11 | 	// interface Platform {}
12 | 
13 | 	// interface Session {}
14 | 
15 | 	// interface Stuff {}
16 | }
17 | 


--------------------------------------------------------------------------------
/src/routes/index.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { user } from '../store';
 3 | 	import UserHeader from '../components/UserHeader.svelte';
 4 | 	import RoomSelect from '../components/RoomSelect.svelte';
 5 | </script>
 6 | 
 7 | <svelte:head>
 8 | 	<title>secret chat 🥷</title>
 9 | 	<meta name="description" content="El chat secreto!" />
10 | </svelte:head>
11 | 
12 | <UserHeader />
13 | {#if $user}<RoomSelect />{/if}
14 | 


--------------------------------------------------------------------------------
/src/components/LoggedUserHeader.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { user } from '../store';
 3 | 	import LogoutIcon from '../components/LogoutIcon.svelte';
 4 | </script>
 5 | 
 6 | {#if $user}
 7 | 	<strong class="text-zinc-700">{$user.name}</strong>
 8 | 	<img class="rounded-full h-8 w-8" alt={$user.name} src={$user.avatar} />
 9 | 	<button class="leading-none py-2 flex items-center gap-1 hover:underline">
10 | 		<LogoutIcon />
11 | 		Cerrar sesión
12 | 	</button>
13 | {/if}
14 | 


--------------------------------------------------------------------------------
/src/routes/[room].svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { activeConversation } from '../store';
 3 | 
 4 | 	import Conversation from '../components/Conversation.svelte';
 5 | 	import ConversationInput from '../components/ConversationInput.svelte';
 6 | </script>
 7 | 
 8 | {#if $activeConversation?.uniqueName}
 9 | 	<div class="max-w-6xl mx-auto py-2 relative">
10 | 		<h2 class="text-3xl">
11 | 			{$activeConversation.uniqueName}
12 | 		</h2>
13 | 		<Conversation />
14 | 		<ConversationInput />
15 | 	</div>
16 | {/if}
17 | 


--------------------------------------------------------------------------------
/src/components/LogoutIcon.svelte:
--------------------------------------------------------------------------------
 1 | <svg
 2 | 	class="w-5 h-5"
 3 | 	stroke-width="1.5"
 4 | 	viewBox="0 0 24 24"
 5 | 	fill="none"
 6 | 	xmlns="http://www.w3.org/2000/svg"
 7 | >
 8 | 	<path
 9 | 		d="M12 12H19M19 12L16 15M19 12L16 9"
10 | 		stroke="currentColor"
11 | 		stroke-linecap="round"
12 | 		stroke-linejoin="round"
13 | 	/>
14 | 	<path
15 | 		d="M19 6V5C19 3.89543 18.1046 3 17 3H7C5.89543 3 5 3.89543 5 5V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V18"
16 | 		stroke="currentColor"
17 | 		stroke-linecap="round"
18 | 		stroke-linejoin="round"
19 | 	/>
20 | </svg>
21 | 


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import adapter from '@sveltejs/adapter-auto';
 2 | import preprocess from 'svelte-preprocess';
 3 | 
 4 | /** @type {import('@sveltejs/kit').Config} */
 5 | const config = {
 6 | 	// Consult https://github.com/sveltejs/svelte-preprocess
 7 | 	// for more information about preprocessors
 8 | 	preprocess: preprocess({
 9 | 		postcss: true
10 | 	}),
11 | 
12 | 	kit: {
13 | 		adapter: adapter(),
14 | 
15 | 		// Override http methods in the Todo forms
16 | 		methodOverride: {
17 | 			allowed: ['PATCH', 'DELETE']
18 | 		}
19 | 	}
20 | };
21 | 
22 | export default config;
23 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	root: true,
 3 | 	parser: '@typescript-eslint/parser',
 4 | 	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
 5 | 	plugins: ['svelte3', '@typescript-eslint'],
 6 | 	ignorePatterns: ['*.cjs'],
 7 | 	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
 8 | 	settings: {
 9 | 		'svelte3/typescript': () => require('typescript')
10 | 	},
11 | 	parserOptions: {
12 | 		sourceType: 'module',
13 | 		ecmaVersion: 2020
14 | 	},
15 | 	env: {
16 | 		browser: true,
17 | 		es2017: true,
18 | 		node: true
19 | 	}
20 | };
21 | 


--------------------------------------------------------------------------------
/src/components/ConversationInput.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { activeConversation } from '../store';
 3 | 
 4 | 	let message = '';
 5 | 
 6 | 	const handleKeyDown = (event: KeyboardEvent) => {
 7 | 		if (event.key === 'Enter') {
 8 | 			$activeConversation.sendMessage(message);
 9 | 			message = '';
10 | 		}
11 | 	};
12 | </script>
13 | 
14 | <svelte:window on:keydown={handleKeyDown} />
15 | 
16 | <div class="mt-5">
17 | 	<input
18 | 		class="p-2 border-gray-700 w-full border-2"
19 | 		type="text"
20 | 		bind:value={message}
21 | 		placeholder="Escribe tu mensaje aquí"
22 | 	/>
23 | </div>
24 | 


--------------------------------------------------------------------------------
/src/components/Message.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { user } from '../store';
 3 | 
 4 | 	export let message: { body: string; author: string };
 5 | 
 6 | 	const { body, author } = message;
 7 | 
 8 | 	let userOrigin = message.author === $user?.userName ? 'local' : 'remote';
 9 | </script>
10 | 
11 | <div class={`m-2 w-3/6 ${userOrigin}`}>
12 | 	<p class="m-0 p-0">{body}</p>
13 | 	<small class="text-xs">{author}</small>
14 | </div>
15 | 
16 | <style>
17 | 	.local {
18 | 		text-align: right;
19 | 		margin-left: 40%;
20 | 	}
21 | 
22 | 	.remote {
23 | 		text-align: left;
24 | 		margin-right: 40%;
25 | 	}
26 | </style>
27 | 


--------------------------------------------------------------------------------
/src/components/Conversation.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { onMount, afterUpdate } from 'svelte';
 3 | 	import { activeConversation } from '../store';
 4 | 	import Message from './Message.svelte';
 5 | 
 6 | 	let div: HTMLDivElement;
 7 | 	let messages: Array<{ body: string; author: string }> = [];
 8 | 
 9 | 	onMount(async () => {
10 | 		const paginator = await $activeConversation.getMessages();
11 | 		messages = paginator.items;
12 | 
13 | 		$activeConversation.on('messageAdded', (message: { body: string; author: string }) => {
14 | 			messages = [...messages, message];
15 | 		});
16 | 	});
17 | 
18 | 	afterUpdate(() => {
19 | 		window.scrollTo(0, div.scrollHeight);
20 | 	});
21 | </script>
22 | 
23 | <div bind:this={div}>
24 | 	{#each messages as message}
25 | 		<Message {message} />
26 | 	{/each}
27 | </div>
28 | 


--------------------------------------------------------------------------------
/src/services/chat.ts:
--------------------------------------------------------------------------------
 1 | import { Client } from '@twilio/conversations'
 2 | 
 3 | export const createOrJoinConversation = async (
 4 |   { room, accessToken } : { room: string, accessToken: string }
 5 |   ) => {
 6 |     const client = new Client(accessToken)
 7 | 
 8 |     return new Promise(resolve => {
 9 |       client.on('stateChanged', async state => {
10 |         if (state === 'initialized') {
11 |           let conversation
12 | 
13 |           try {
14 |             conversation = await client.createConversation({ uniqueName: room })
15 | 
16 |             // await conversation?.add('ma')
17 |             // await conversation?.add('mb')
18 | 
19 |           } catch (e) {
20 |             console.error(e)
21 |             
22 |             try {
23 |               conversation = await client.getConversationByUniqueName(room)
24 | 
25 |               // await conversation?.add('ma')
26 |               // await conversation?.add('mb')
27 |             } catch (e) {
28 |               console.error(e)
29 |             }
30 |           }
31 | 
32 |           console.log(conversation)
33 | 
34 |           resolve(conversation)          
35 |         }
36 |       })
37 |     })
38 |   }


--------------------------------------------------------------------------------
/src/components/UserHeader.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { user } from '../store';
 3 | 	import LoggedUserHeader from './LoggedUserHeader.svelte';
 4 | 
 5 | 	let anonymousName = '';
 6 | 	let showAnonymousInput = false;
 7 | 
 8 | 	function handleAnonymousLogin(e: SubmitEvent) {
 9 | 		e.preventDefault();
10 | 		console.log(anonymousName);
11 | 		// guardamos el anonymousName
12 | 		user.set({
13 | 			name: anonymousName,
14 | 			avatar: `https://i.pravatar.cc/150?u=${anonymousName}`,
15 | 			email: 'a@a.com',
16 | 			token: `anonymous_${anonymousName}`,
17 | 			userName: anonymousName
18 | 		});
19 | 	}
20 | 
21 | 	function handleToggleAnonymous() {
22 | 		showAnonymousInput = !showAnonymousInput;
23 | 	}
24 | </script>
25 | 
26 | <header class="flex justify-center items-center gap-x-4">
27 | 	{#if $user}
28 | 		<LoggedUserHeader />
29 | 	{:else if showAnonymousInput}
30 | 		<form on:submit={handleAnonymousLogin}>
31 | 			<input
32 | 				class="border-2 p-2"
33 | 				bind:value={anonymousName}
34 | 				type="text"
35 | 				placeholder="Indica tu nombre anónimo"
36 | 			/>
37 | 		</form>
38 | 	{:else}
39 | 		<button on:click={handleToggleAnonymous} class="py-2 flex items-center gap-1 hover:underline">
40 | 			Entrar como anónimo
41 | 		</button>
42 | 	{/if}
43 | </header>
44 | 


--------------------------------------------------------------------------------
/src/components/Logo.svelte:
--------------------------------------------------------------------------------
 1 | <h1
 2 | 	class="text-center pt-4 mx-auto mb-4 text-4xl font-black bg-clip-text text-transparent bg-gradient-to-r from-slate-900 via-slate-800 to-zinc-900 xl:pt-6 sm:text-[6rem] leading-none flex items-center justify-center"
 3 | >
 4 | 	<svg class="w-20 h-20"
 5 | 		><path
 6 | 			fill="#D0CFCE"
 7 | 			d="M15.042 14.976a4 4 0 0 0-4 4V30.76l-.002 4.531c0 .28.328.434.543.253l5.026-4.39a1 1 0 0 1 .644-.234h30.956a4 4 0 0 0 4-4v-7.944a4 4 0 0 0-4-4H15.042z"
 8 | 		/><path
 9 | 			fill="#9B9B9A"
10 | 			d="M60.51 60.544a.33.33 0 0 0 .542-.252l-.002-4.27h.001V44.076a4 4 0 0 0-4-4H24.103a4 4 0 0 0-4 4v7.944a4 4 0 0 0 4 4h30.858a1 1 0 0 1 .644.235l4.905 4.288z"
11 | 		/><g
12 | 			><path
13 | 				fill="none"
14 | 				stroke="#000"
15 | 				stroke-miterlimit="10"
16 | 				stroke-width="2"
17 | 				d="M15.042 14.976a4 4 0 0 0-4 4V30.76l-.002 4.531c0 .28.328.434.543.253l5.026-4.39a1 1 0 0 1 .644-.234h30.956a4 4 0 0 0 4-4v-7.944a4 4 0 0 0-4-4H15.042zM60.51 60.544a.33.33 0 0 0 .542-.252l-.002-4.27h.001V44.076a4 4 0 0 0-4-4H24.103a4 4 0 0 0-4 4v7.944a4 4 0 0 0 4 4h30.858a1 1 0 0 1 .644.235l4.905 4.288z"
18 | 			/><circle cx="31.997" cy="48.059" r="2" /><circle cx="40.008" cy="48.059" r="2" /><circle
19 | 				cx="48.02"
20 | 				cy="48.059"
21 | 				r="2"
22 | 			/></g
23 | 		></svg
24 | 	>
25 | 	secretchat
26 | </h1>
27 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "secret-chat",
 3 | 	"version": "0.0.1",
 4 | 	"scripts": {
 5 | 		"dev": "svelte-kit dev",
 6 | 		"build": "svelte-kit build",
 7 | 		"package": "svelte-kit package",
 8 | 		"preview": "svelte-kit preview",
 9 | 		"prepare": "svelte-kit sync",
10 | 		"test": "playwright test",
11 | 		"check": "svelte-check --tsconfig ./tsconfig.json",
12 | 		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
13 | 		"lint": "prettier --check --plugin-search-dir=. . && eslint .",
14 | 		"format": "prettier --write --plugin-search-dir=. ."
15 | 	},
16 | 	"devDependencies": {
17 | 		"@playwright/test": "1.22.2",
18 | 		"@sveltejs/adapter-auto": "next",
19 | 		"@sveltejs/kit": "next",
20 | 		"@types/cookie": "0.5.1",
21 | 		"@typescript-eslint/eslint-plugin": "5.27.0",
22 | 		"@typescript-eslint/parser": "5.27.0",
23 | 		"autoprefixer": "^10.4.7",
24 | 		"eslint": "8.16.0",
25 | 		"eslint-config-prettier": "8.3.0",
26 | 		"eslint-plugin-svelte3": "4.0.0",
27 | 		"postcss": "^8.4.14",
28 | 		"prettier": "2.6.2",
29 | 		"prettier-plugin-svelte": "2.7.0",
30 | 		"svelte": "3.46.0",
31 | 		"svelte-check": "2.7.1",
32 | 		"svelte-preprocess": "^4.10.6",
33 | 		"tailwindcss": "^3.1.4",
34 | 		"tslib": "2.3.1",
35 | 		"typescript": "4.7.2"
36 | 	},
37 | 	"type": "module",
38 | 	"dependencies": {
39 | 		"@twilio/conversations": "^2.1.0",
40 | 		"twilio": "^3.78.0"
41 | 	}
42 | }
43 | 


--------------------------------------------------------------------------------
/src/components/RoomSelect.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { goto } from '$app/navigation';
 3 | 
 4 | 	import { getAccessToken } from '../services/user';
 5 | 	import { createOrJoinConversation } from '../services/chat';
 6 | 	import { activeConversation, user } from '../store';
 7 | 
 8 | 	let room = '';
 9 | 
10 | 	async function handleSubmit(e: SubmitEvent) {
11 | 		e.preventDefault();
12 | 
13 | 		if (!$user || $user?.token == null) return;
14 | 
15 | 		const accessToken = await getAccessToken({ token: $user.token });
16 | 		const conversation = await createOrJoinConversation({ room, accessToken });
17 | 
18 | 		if (conversation) {
19 | 			activeConversation.set(conversation);
20 | 			goto(`/${room}`);
21 | 		}
22 | 	}
23 | </script>
24 | 
25 | <div class="flex flex-col max-w-md mx-auto mt-10">
26 | 	<form on:submit={handleSubmit}>
27 | 		<label for="room-select" class="block mb-2 text-sm font-medium text-gray-700">
28 | 			Introduce la sala del chat a la que quieres entrar
29 | 		</label>
30 | 		<input
31 | 			id="room-select"
32 | 			bind:value={room}
33 | 			type="text"
34 | 			class="block p-4 w-full text-gray-900 bg-gray-50 rounded-lg border border-gray-300 sm:text-md focus:ring-blue-500 focus:border-blue-500 uppercase text-center text-2xl"
35 | 		/>
36 | 		<button
37 | 			type="submit"
38 | 			class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 mt-2"
39 | 			>¡Entrar!</button
40 | 		>
41 | 	</form>
42 | </div>
43 | 


--------------------------------------------------------------------------------
/src/routes/api/get-access-token.ts:
--------------------------------------------------------------------------------
 1 | import type { RequestHandler } from '@sveltejs/kit'
 2 | import twilio from 'twilio'
 3 | 
 4 | const TWILIO_ACCOUNT_SID = import.meta.env.VITE_PUBLIC_TWILIO_ACCOUNT_SID
 5 | const TWILIO_API_KEY = import.meta.env.VITE_PUBLIC_TWILIO_API_KEY
 6 | const TWILIO_API_SECRET = import.meta.env.VITE_PUBLIC_TWILIO_API_SECRET
 7 | const SERVICE_SID = import.meta.env.VITE_PUBLIC_SERVICE_SID
 8 | 
 9 | console.log({
10 |   TWILIO_ACCOUNT_SID,
11 |   TWILIO_API_KEY,
12 |   TWILIO_API_SECRET,
13 |   SERVICE_SID,
14 | })
15 | 
16 | export const get: RequestHandler = async ({ request }) => {
17 |   const jwt = request.headers.get('jwt')
18 |   if (jwt == null) return { status: 401 }
19 | 
20 |   // This is temporal as we're allowing anonymous users
21 |   const identity = jwt.startsWith('anonymous')
22 |     ? jwt.split('_')[1]
23 |     : null
24 | 
25 |   // Lo que haríamos de verdad
26 |   // const user = await supabase.auth.api.getUser(jwt)
27 |   // const identity = user.data.user_metadata.user_name
28 |   // console.log({identity})
29 | 
30 |   if (identity == null) return { status: 401 }
31 | 
32 |   const { AccessToken } = twilio.jwt
33 |   const { ChatGrant } = AccessToken
34 | 
35 |   const accessToken = new AccessToken(
36 |     TWILIO_ACCOUNT_SID,
37 |     TWILIO_API_KEY,
38 |     TWILIO_API_SECRET, {
39 |       identity
40 |     })
41 | 
42 |   const conversationsGrant = new ChatGrant({
43 |     serviceSid: SERVICE_SID
44 |   })
45 | 
46 |   accessToken.addGrant(conversationsGrant)
47 | 
48 |   console.log(accessToken.toJwt())
49 | 
50 |   return {
51 |     status: 200,
52 |     body: {
53 |       accessToken: accessToken.toJwt()
54 |     }
55 |   }
56 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 | 
 3 |   <img width="200" src="https://user-images.githubusercontent.com/1561955/177315611-490d347e-1201-4aff-b09c-d2ea9f453173.png" /><br />
 4 |   <strong>HACKATHON JULIO 2022 - TWILIO + CHAT SECRETO 🚀</strong>
 5 | 
 6 | **🗓️ Fecha límite -> 20 de julio en Twitch.**<br />
 7 | 📹 Directo del 1 de julio con explicaciones -> https://www.twitch.tv/videos/1519558242<br />
 8 | 
 9 | </div>
10 | 
11 | ## - 🎁 PREMIOS para los 3 primeros:
12 | 
13 | - [1] Keychron K3 Ultra-slim Wireless Mechanical Keyboard - Version 2 (Si no se puede enviar, se pagará lo que cueste el teclado con PayPal).
14 | - [2] 40€ en Redbubble.
15 | - [3] 20€ en Redbubble.
16 | 
17 | ## - ⚠️ Requisitos:
18 | 
19 | - **[1] Registrarse en Twilio -> https://www.twilio.com/referral/xdppiQ 🥰 **
20 | - [2] Crea un chat secreto dónde sólo la gente que tú quieras pueda hablar **usando los servicios de Twilio Conversations.**
21 | - [3] La app/web debe estar **desplegada** para que la podamos ver.
22 | - [4] **El repositorio de código debe ser abierto** y el **README** debe indicar que participa en la hackathon.
23 | - [5] :date: Enviar el repositorio + deploy en este canal, en este hilo: https://discord.com/channels/741237973663612969/992476955792375928/992478015164518520
24 | 
25 | ## - 👀 Consideraciones:
26 | - Se tendrá en cuenta: ejecución del código (estructura...), look and feel (experiencia del usuario, diseño...), no puedes pillar una plantilla CSS de una aplicación que ya exista, que sea responsive y que funcione para móvil (mobile-first).
27 | - Se puede hacer con lo que quieras: Vanilla, Angular, React, Vue, Svelte, Nextjs, Nuxtjs, Remix... 
28 | - Se puede hacer equipo :partying_face::partying_face:.
29 | - 💅 Te puedes inspirar en el diseño: https://dribbble.com/
30 | 
31 | [🐙 Muchos más servicios disponibles en Twilio](https://www.twilio.com/referral/xdppiQ)
32 | 


--------------------------------------------------------------------------------