Fix: Retrait de asyncio.run() pour le constructeur Twitch

Le constructeur de la classe Twitch n'est pas une coroutine et ne doit pas être appelé avec asyncio.run(). Cela causait une ValueError lors de la demande de token Twitch.

Co-authored-by: Cursor <cursoragent@cursor.com>

webapp/static/css/mvp.css

@@ -1,603 +0,0 @@
-/* MVP.css v1.17.2 - https://github.com/andybrewer/mvp */
-
-:root {
-	--active-brightness: 0.85;
-	--border-radius: 5px;
-	--box-shadow: 2px 2px 10px;
-	--color-accent: #118bee15;
-	--color-bg: #fff;
-	--color-bg-secondary: #e9e9e9;
-	--color-link: #118bee;
-	--color-secondary: #920de9;
-	--color-secondary-accent: #920de90b;
-	--color-shadow: #f4f4f4;
-	--color-table: #118bee;
-	--color-text: #000;
-	--color-text-secondary: #999;
-	--color-scrollbar: #cacae8;
-	--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-	--hover-brightness: 1.2;
-	--justify-important: center;
-	--justify-normal: left;
-	--line-height: 1.5;
-	--width-card: 285px;
-	--width-card-medium: 460px;
-	--width-card-wide: 800px;
-	--width-content: 1080px;
-}
-
-@media (prefers-color-scheme: dark) {
-	:root[color-mode="user"] {
-		--color-accent: #0097fc4f;
-		--color-bg: #333;
-		--color-bg-secondary: #555;
-		--color-link: #0097fc;
-		--color-secondary: #e20de9;
-		--color-secondary-accent: #e20de94f;
-		--color-shadow: #bbbbbb20;
-		--color-table: #0097fc;
-		--color-text: #f7f7f7;
-		--color-text-secondary: #aaa;
-	}
-}
-
-html {
-	scroll-behavior: smooth;
-}
-
-@media (prefers-reduced-motion: reduce) {
-	html {
-		scroll-behavior: auto;
-	}
-}
-
-/* Layout */
-article aside {
-	background: var(--color-secondary-accent);
-	border-left: 4px solid var(--color-secondary);
-	padding: 0.01rem 0.8rem;
-}
-
-body {
-	background: var(--color-bg);
-	color: var(--color-text);
-	font-family: var(--font-family);
-	line-height: var(--line-height);
-	margin: 0;
-	overflow-x: hidden;
-	padding: 0;
-}
-
-footer,
-header,
-main {
-	margin: 0 auto;
-	max-width: var(--width-content);
-	/* padding: 3rem 1rem; */
-	padding: 1rem 1rem;
-}
-
-hr {
-	background-color: var(--color-bg-secondary);
-	border: none;
-	height: 1px;
-	margin: 4rem 0;
-	width: 100%;
-}
-
-section {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: var(--justify-important);
-}
-
-section img,
-article img {
-	max-width: 100%;
-}
-
-section pre {
-	overflow: auto;
-}
-
-section aside {
-	border: 1px solid var(--color-bg-secondary);
-	border-radius: var(--border-radius);
-	box-shadow: var(--box-shadow) var(--color-shadow);
-	margin: 1rem;
-	padding: 1.25rem;
-	width: var(--width-card);
-}
-
-section aside:hover {
-	box-shadow: var(--box-shadow) var(--color-bg-secondary);
-}
-
-[hidden] {
-	display: none;
-}
-
-/* Headers */
-article header,
-div header,
-main header {
-	padding-top: 0;
-}
-
-header {
-	text-align: var(--justify-important);
-}
-
-header a b,
-header a em,
-header a i,
-header a strong {
-	margin-left: 0.5rem;
-	margin-right: 0.5rem;
-}
-
-/* header nav img {
-  margin: 1rem 0;
-} */
-
-section header {
-	padding-top: 0;
-	width: 100%;
-}
-
-/* Nav */
-nav {
-	align-items: center;
-	display: flex;
-	font-weight: bold;
-	justify-content: space-between;
-	/* margin-bottom: 7rem; */
-}
-
-nav ul {
-	list-style: none;
-	padding: 0;
-}
-
-nav ul li {
-	display: inline-block;
-	margin: 0 0.5rem;
-	position: relative;
-	text-align: left;
-}
-
-/* Nav Dropdown */
-nav ul li:hover ul {
-	display: block;
-}
-
-nav ul li ul {
-	background: var(--color-bg);
-	border: 1px solid var(--color-bg-secondary);
-	border-radius: var(--border-radius);
-	box-shadow: var(--box-shadow) var(--color-shadow);
-	display: none;
-	height: auto;
-	left: -2px;
-	padding: 0.5rem 1rem;
-	position: absolute;
-	top: 1.7rem;
-	white-space: nowrap;
-	width: auto;
-	z-index: 1;
-}
-
-nav ul li ul::before {
-	/* fill gap above to make mousing over them easier */
-	content: "";
-	position: absolute;
-	left: 0;
-	right: 0;
-	top: -0.5rem;
-	height: 0.5rem;
-}
-
-nav ul li ul li,
-nav ul li ul li a {
-	display: block;
-}
-
-/* Nav for Mobile */
-@media (max-width: 768px) {
-	nav {
-		flex-wrap: wrap;
-	}
-
-	nav ul li {
-		width: calc(100% - 1em);
-	}
-
-	nav ul li ul {
-		border: none;
-		box-shadow: none;
-		display: block;
-		position: static;
-	}
-}
-
-/* Typography */
-code,
-samp {
-	background-color: var(--color-accent);
-	border-radius: var(--border-radius);
-	color: var(--color-text);
-	display: inline-block;
-	margin: 0 0.1rem;
-	padding: 0 0.5rem;
-}
-
-details {
-	margin: 1.3rem 0;
-}
-
-details summary {
-	font-weight: bold;
-	cursor: pointer;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-	line-height: var(--line-height);
-	text-wrap: balance;
-}
-
-mark {
-	padding: 0.1rem;
-}
-
-ol li,
-ul li {
-	padding: 0.2rem 0;
-}
-
-p {
-	margin: 0.75rem 0;
-	padding: 0;
-	width: 100%;
-}
-
-pre {
-	margin: 1rem 0;
-	max-width: var(--width-card-wide);
-	padding: 1rem 0;
-}
-
-pre code,
-pre samp {
-	display: block;
-	max-width: var(--width-card-wide);
-	padding: 0.5rem 2rem;
-	white-space: pre-wrap;
-}
-
-small {
-	color: var(--color-text-secondary);
-}
-
-sup {
-	background-color: var(--color-secondary);
-	border-radius: var(--border-radius);
-	color: var(--color-bg);
-	font-size: xx-small;
-	font-weight: bold;
-	margin: 0.2rem;
-	padding: 0.2rem 0.3rem;
-	position: relative;
-	top: -2px;
-}
-
-/* Links */
-a {
-	color: var(--color-link);
-	display: inline-block;
-	font-weight: bold;
-	text-decoration: underline;
-}
-
-a:hover {
-	filter: brightness(var(--hover-brightness));
-}
-
-a:active {
-	filter: brightness(var(--active-brightness));
-}
-
-a b,
-a em,
-a i,
-a strong,
-button,
-input[type="submit"] {
-	border-radius: var(--border-radius);
-	display: inline-block;
-	font-size: medium;
-	font-weight: bold;
-	line-height: var(--line-height);
-	margin: 0.5rem 0;
-	padding: 1rem 2rem;
-}
-
-button,
-input[type="submit"] {
-	font-family: var(--font-family);
-}
-
-button:hover,
-input[type="submit"]:hover {
-	cursor: pointer;
-	filter: brightness(var(--hover-brightness));
-}
-
-button:active,
-input[type="submit"]:active {
-	filter: brightness(var(--active-brightness));
-}
-
-a b,
-a strong,
-button,
-input[type="submit"] {
-	background-color: var(--color-link);
-	border: 2px solid var(--color-link);
-	color: var(--color-bg);
-}
-
-a em,
-a i {
-	border: 2px solid var(--color-link);
-	border-radius: var(--border-radius);
-	color: var(--color-link);
-	display: inline-block;
-	padding: 1rem 2rem;
-}
-
-article aside a {
-	color: var(--color-secondary);
-}
-
-/* Images */
-figure {
-	margin: 0;
-	padding: 0;
-}
-
-figure img {
-	max-width: 100%;
-}
-
-figure figcaption {
-	color: var(--color-text-secondary);
-}
-
-/* Forms */
-button:disabled,
-input:disabled {
-	background: var(--color-bg-secondary);
-	border-color: var(--color-bg-secondary);
-	color: var(--color-text-secondary);
-	cursor: not-allowed;
-}
-
-button[disabled]:hover,
-input[type="submit"][disabled]:hover {
-	filter: none;
-}
-
-form {
-	border: 1px solid var(--color-bg-secondary);
-	border-radius: var(--border-radius);
-	box-shadow: var(--box-shadow) var(--color-shadow);
-	display: block;
-	max-width: var(--width-card-wide);
-	min-width: var(--width-card);
-	padding: 1.5rem;
-	text-align: var(--justify-normal);
-}
-
-form header {
-	margin: 1.5rem 0;
-	padding: 1.5rem 0;
-}
-
-input,
-label,
-select,
-textarea {
-	display: block;
-	font-size: inherit;
-	max-width: var(--width-card-wide);
-}
-
-input[type="checkbox"],
-input[type="radio"] {
-	display: inline-block;
-}
-
-input[type="checkbox"]+label,
-input[type="radio"]+label {
-	display: inline-block;
-	font-weight: normal;
-	position: relative;
-	top: 1px;
-}
-
-input[type="range"] {
-	padding: 0.4rem 0;
-}
-
-input,
-select,
-textarea {
-	border: 1px solid var(--color-bg-secondary);
-	border-radius: var(--border-radius);
-	margin-bottom: 1rem;
-	padding: 0.4rem 0.8rem;
-}
-
-input[type="text"],
-input[type="password"],
-input[type="email"],
-textarea {
-	width: calc(100% - 1.6rem);
-}
-
-input[readonly],
-textarea[readonly] {
-	background-color: var(--color-bg-secondary);
-}
-
-label {
-	font-weight: bold;
-	margin-bottom: 0.2rem;
-}
-
-/* Popups */
-dialog {
-	max-width: 90%;
-	max-height: 85dvh;
-	margin: auto;
-	padding-block: 0;
-	padding-inline: 20px;
-	border: 1px solid var(--color-bg-secondary);
-	border-radius: 0.5rem;
-	overscroll-behavior: contain;
-	scroll-behavior: smooth;
-	scrollbar-width: none;
-	/* Hide scrollbar for Firefox */
-	-ms-overflow-style: none;
-	/* Hide scrollbar for IE and Edge */
-	scrollbar-color: transparent transparent;
-	animation: bottom-to-top 0.25s ease-in-out forwards;
-}
-
-dialog::-webkit-scrollbar {
-	width: 0;
-	display: none;
-}
-
-dialog::-webkit-scrollbar-track {
-	background: transparent;
-}
-
-dialog::-webkit-scrollbar-thumb {
-	background-color: transparent;
-}
-
-@media (min-width: 650px) {
-	dialog {
-		max-width: 39rem;
-	}
-}
-
-dialog::backdrop {
-	background-color: rgba(0, 0, 0, 0.5);
-}
-
-@keyframes bottom-to-top {
-	0% {
-		opacity: 0;
-		transform: translateY(10%);
-	}
-
-	100% {
-		opacity: 1;
-		transform: translateY(0);
-	}
-}
-
-dialog hr {
-	margin-block: 1rem;
-}
-
-/* Tables */
-table {
-	border: 1px solid var(--color-bg-secondary);
-	border-radius: var(--border-radius);
-	border-spacing: 0;
-	display: inline-block;
-	max-width: 100%;
-	overflow-x: auto;
-	padding: 0;
-	white-space: nowrap;
-}
-
-table td,
-table th,
-table tr {
-	padding: 0.4rem 0.8rem;
-	text-align: var(--justify-important);
-}
-
-table thead {
-	background-color: var(--color-table);
-	border-collapse: collapse;
-	border-radius: var(--border-radius);
-	color: var(--color-bg);
-	margin: 0;
-	padding: 0;
-}
-
-table thead tr:first-child th:first-child {
-	border-top-left-radius: var(--border-radius);
-}
-
-table thead tr:first-child th:last-child {
-	border-top-right-radius: var(--border-radius);
-}
-
-table thead th:first-child,
-table tr td:first-child {
-	text-align: var(--justify-normal);
-}
-
-table tr:nth-child(even) {
-	background-color: var(--color-accent);
-}
-
-/* Quotes */
-blockquote {
-	display: block;
-	font-size: x-large;
-	line-height: var(--line-height);
-	margin: 1rem auto;
-	max-width: var(--width-card-medium);
-	padding: 1.5rem 1rem;
-	text-align: var(--justify-important);
-}
-
-blockquote footer {
-	color: var(--color-text-secondary);
-	display: block;
-	font-size: small;
-	line-height: var(--line-height);
-	padding: 1.5rem 0;
-}
-
-/* Scrollbars */
-* {
-	scrollbar-width: thin;
-	scrollbar-color: var(--color-scrollbar) transparent;
-}
-
-*::-webkit-scrollbar {
-	width: 5px;
-	height: 5px;
-}
-
-*::-webkit-scrollbar-track {
-	background: transparent;
-}
-
-*::-webkit-scrollbar-thumb {
-	background-color: var(--color-scrollbar);
-	border-radius: 10px;
-}

webapp/static/css/style.css

@@ -1,19 +0,0 @@
-header nav img {
-	border-radius: 50%;
-}
-
-table th,
-table td {
-	text-align: left;
-	vertical-align: top;
-	overflow: hidden;
-	white-space: normal;
-}
-
-table.live-alert tr td:last-child {
-	white-space: nowrap;
-}
-
-a.icon {
-	text-decoration: none;
-}

webapp/templates/twitch-aide.html

@@ -1,35 +1,92 @@
 {% extends "template.html" %}
 
 {% block content %}
-<h1>Procédure de configuration de Twitch</h1>
+<div class="mb-6">
-<p>
+	<h1 class="text-2xl font-semibold text-slate-800 dark:text-white mb-1">Configuration Twitch</h1>
-	<strong>Avant toute chose, activez l'authentification à deux facteurs (2FA) :</strong>
+	<p class="text-sm text-slate-600 dark:text-slate-400">
-	<a href="https://help.twitch.tv/s/article/two-factor-authentication?language=en_US" target="_blank">Guide officiel
+		Guide étape par étape pour configurer l'API Twitch.
-		Twitch pour la 2FA</a>
+	</p>
-</p>
+</div>
-<p>
-	Rendez-vous sur <a href="https://dev.twitch.tv/console" target="_blank">la console d'applications Twitch</a> et
-	ajoutez une application. Renseignez :
-<ul>
-	<li>URL de redirection : {{token_redirect_url}}</li>
-	<li>Catégorie : Chat Bot</li>
-</ul>
-</p>
 
-<img src="/static/img/twitch-api-01.jpg">
+<div class="space-y-4">
+	<div class="bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 overflow-hidden">
+		<div class="px-5 py-4 border-b border-slate-200 dark:border-slate-700">
+			<div class="flex items-center gap-3">
+				<span class="w-6 h-6 rounded-full bg-slate-200 dark:bg-slate-700 flex items-center justify-center text-slate-600 dark:text-slate-400 text-xs font-medium">1</span>
+				<h2 class="font-medium text-slate-800 dark:text-white">Activer l'authentification à deux facteurs (2FA)</h2>
+			</div>
+		</div>
+		<div class="p-5">
+			<p class="text-sm text-slate-600 dark:text-slate-400 mb-4">
+				Avant de créer une application Twitch, vous devez activer la 2FA sur votre compte.
+			</p>
+			<a href="https://help.twitch.tv/s/article/two-factor-authentication?language=en_US" target="_blank" class="inline-flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-white">
+				<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
+				Guide officiel Twitch
+			</a>
+		</div>
+	</div>
 
-<p>
+	<div class="bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 overflow-hidden">
-	Créez le bot. Puis, de retour à la liste, éditez-le en cliquant sur Gérer. Puis cliquez sur <strong>Nouveau
+		<div class="px-5 py-4 border-b border-slate-200 dark:border-slate-700">
-		Secret</strong>. Vous trouverez ici le <strong>Client ID</strong> et le <strong>Client Secret</strong>.
+			<div class="flex items-center gap-3">
-</p>
+				<span class="w-6 h-6 rounded-full bg-slate-200 dark:bg-slate-700 flex items-center justify-center text-slate-600 dark:text-slate-400 text-xs font-medium">2</span>
+				<h2 class="font-medium text-slate-800 dark:text-white">Créer une application Twitch</h2>
+			</div>
+		</div>
+		<div class="p-5 space-y-4">
+			<p class="text-sm text-slate-600 dark:text-slate-400">
+				Rendez-vous sur la console Twitch et créez une nouvelle application :
+			</p>
+			<a href="https://dev.twitch.tv/console" target="_blank" class="inline-flex items-center gap-2 px-3 py-1.5 bg-slate-800 dark:bg-slate-700 text-white text-sm rounded-lg hover:bg-slate-700 dark:hover:bg-slate-600 transition-colors">
+				Console Twitch
+			</a>
 
-<img src="/static/img/twitch-api-02.jpg">
+			<div class="bg-slate-50 dark:bg-slate-700/50 rounded-lg p-4 space-y-2 text-sm">
+				<div><span class="text-slate-500 dark:text-slate-400">URL de redirection :</span> <code class="ml-1 px-1.5 py-0.5 bg-slate-200 dark:bg-slate-600 rounded text-xs">{{ token_redirect_url }}</code></div>
+				<div><span class="text-slate-500 dark:text-slate-400">Catégorie :</span> <span class="ml-1 text-slate-800 dark:text-white">Chat Bot</span></div>
+			</div>
 
-<p>
+			<div class="rounded-lg overflow-hidden border border-slate-200 dark:border-slate-700">
-	Ensuite, retournez sur la page de <a href="{{url_for('openConfigurations')}}">Configuration</a>, après avoir
+				<img src="/static/img/twitch-api-01.jpg" alt="Création d'application Twitch" class="w-full">
-	enregistré le <strong>Client ID</strong> et le <strong>Client Secret</strong>, cliquez sur le lien <strong>Obtenir
+			</div>
-		token et refresh token</strong>. Si tout se passe bien les champs <strong>Access Token</strong> et
+		</div>
-	<strong>Refresh Token</strong> sont remplis.
+	</div>
-</p>
 
-{% endblock %}
+	<div class="bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 overflow-hidden">
+		<div class="px-5 py-4 border-b border-slate-200 dark:border-slate-700">
+			<div class="flex items-center gap-3">
+				<span class="w-6 h-6 rounded-full bg-slate-200 dark:bg-slate-700 flex items-center justify-center text-slate-600 dark:text-slate-400 text-xs font-medium">3</span>
+				<h2 class="font-medium text-slate-800 dark:text-white">Récupérer les identifiants</h2>
+			</div>
+		</div>
+		<div class="p-5 space-y-4">
+			<p class="text-sm text-slate-600 dark:text-slate-400">
+				Cliquez sur <strong class="text-slate-800 dark:text-white">Gérer</strong> puis <strong class="text-slate-800 dark:text-white">Nouveau Secret</strong> pour obtenir le Client ID et Client Secret.
+			</p>
+			<div class="rounded-lg overflow-hidden border border-slate-200 dark:border-slate-700">
+				<img src="/static/img/twitch-api-02.jpg" alt="Récupération des identifiants" class="w-full">
+			</div>
+		</div>
+	</div>
+
+	<div class="bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 overflow-hidden">
+		<div class="px-5 py-4 border-b border-slate-200 dark:border-slate-700">
+			<div class="flex items-center gap-3">
+				<span class="w-6 h-6 rounded-full bg-slate-200 dark:bg-slate-700 flex items-center justify-center text-slate-600 dark:text-slate-400 text-xs font-medium">4</span>
+				<h2 class="font-medium text-slate-800 dark:text-white">Configurer Mamie Henriette</h2>
+			</div>
+		</div>
+		<div class="p-5 space-y-4">
+			<ol class="list-decimal list-inside space-y-1 text-sm text-slate-600 dark:text-slate-400">
+				<li>Entrez le Client ID et Client Secret</li>
+				<li>Cliquez sur Enregistrer</li>
+				<li>Cliquez sur "Obtenir token et refresh token"</li>
+			</ol>
+			<a href="{{ url_for('openConfigurations') }}" class="inline-flex items-center gap-2 px-3 py-1.5 bg-slate-800 dark:bg-slate-700 text-white text-sm rounded-lg hover:bg-slate-700 dark:hover:bg-slate-600 transition-colors">
+				Aller à la Configuration
+			</a>
+		</div>
+	</div>
+</div>
+{% endblock %}

webapp/twitch_auth.py

@@ -27,7 +27,7 @@ def twitchConfigurationHelp():
 def twitchRequestToken():
 	global auth
 	helper = ConfigurationHelper()
-	twitch = asyncio.run(Twitch(helper.getValue('twitch_client_id'), helper.getValue('twitch_client_secret')))
+	twitch = Twitch(helper.getValue('twitch_client_id'), helper.getValue('twitch_client_secret'))
 	auth = UserAuthenticator(twitch, USER_SCOPE, url=_buildUrl())
 	return redirect(auth.return_auth_url())