twitch-widget/src/views/stream/_modal-create-stream.html.twig at 8462cdab6408eb3fbd7a67814eafdee69bc7a8a4 · HelloAsso/twitch-widget · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
{# ── Modal création stream ──
   Variables attendues : isAdmin, events, ownerEmail, currentUser,
                         organizationSlug, formSlug, title
#}
<div class="modal fade" id="createStreamModal" tabindex="-1">
	<div class="modal-dialog modal-lg modal-dialog-centered">
		<div class="modal-content border-0 shadow-lg">
			<div class="modal-header border-bottom border-secondary px-4 py-3">
				<div class="d-flex align-items-center gap-2">
					<span class="fs-4">🎮</span>
					<h5 class="modal-title fw-bold mb-0">Nouveau stream</h5>
				</div>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body px-4 py-4">

				{# Sélection du mode via cartes cliquables #}
				<p class="text-muted small mb-3">Comment souhaitez-vous créer ce stream ?</p>
				<div class="row g-3 mb-4" id="modeSelectorCards">
					<div class="col-6">
					<div class="stream-mode-card card h-100 border border-secondary rounded-3 p-3 text-center cursor-pointer"
						id="cardManuel" onclick="selectStreamMode('manuel')">
							<div class="fs-2 mb-2">⌨️</div>
							<div class="fw-semibold">Manuellement</div>
							<div class="text-muted small mt-1">Renseignez les slugs vous-même</div>
						</div>
					</div>
					<div class="col-6">
					<div class="stream-mode-card card h-100 border border-secondary rounded-3 p-3 text-center cursor-pointer active"
						id="cardAsso" onclick="selectStreamMode('asso')">
							<div class="fs-2 mb-2">🔗</div>
							<div class="fw-semibold">Depuis mon association</div>
							<div class="text-muted small mt-1">Importez via votre compte HelloAsso</div>
						</div>
					</div>
				</div>

				{# == MODE MANUEL == #}
				<div id="modeManuel" style="display:none">
					<form action="/admin/stream" method="POST" class="needs-validation" novalidate>
						{% if events %}
							<div class="mb-3">
								<label for="parent_event" class="form-label fw-semibold">
									<span class="me-1">📅</span> Évènement parent
									<span class="text-muted fw-normal small ms-1">(optionnel)</span>
								</label>
								<select class="form-select" id="parent_event" name="parent_event">
									<option value="">— Aucun évènement —</option>
									{% for event in events %}
										<option value="{{ event.id }}">{{ event.title }}</option>
									{% endfor %}
								</select>
							</div>
							<div class="mb-3 p-3 rounded-3 bg-body-tertiary">
								<div class="form-check form-switch mb-0">
									<input class="form-check-input" type="checkbox" role="switch" id="parent_style" name="parent_style">
									<label for="parent_style" class="form-check-label">
										Appliquer le même style que l'évènement parent ?
									</label>
								</div>
							</div>
						{% endif %}

						{# Email : visible pour admin, hidden pour user #}
						{% if isAdmin %}
							<div class="mb-3">
								<label for="owner_email" class="form-label fw-semibold">
									<span class="me-1">📧</span> Email du propriétaire
								</label>
								<input type="email" class="form-control" id="owner_email" name="owner_email"
									value="{{ ownerEmail }}" placeholder="utilisateur@exemple.com" required>
								<div class="invalid-feedback">Veuillez saisir un email valide.</div>
							</div>
						{% else %}
							<input type="hidden" name="owner_email" value="{{ currentUser.email }}">
						{% endif %}

						<div class="mb-3">
							<label for="organization_slug" class="form-label fw-semibold">
								<span class="me-1">🏢</span> Slug de l'association
							</label>
							<div class="input-group">
								<span class="input-group-text text-muted small">helloasso.com/associations/</span>
								<input type="text" class="form-control" id="organization_slug" name="organization_slug"
									value="{{ organizationSlug }}" placeholder="mon-association" required>
							</div>
							<div class="invalid-feedback">Le slug de l'association est requis.</div>
						</div>
						<div class="mb-3">
							<label for="form_id" class="form-label fw-semibold">
								<span class="me-1">📋</span> Slug du formulaire
							</label>
							<div class="input-group">
								<span class="input-group-text text-muted small" id="manual_form_prefix">…/formulaires/don/</span>
								<input type="text" class="form-control" id="form_id" name="form_slug"
									value="{{ formSlug }}" placeholder="mon-formulaire" required>
							</div>
							<div class="invalid-feedback">Le slug du formulaire est requis.</div>
						</div>
						<div class="mb-3">
							<label for="form_type" class="form-label fw-semibold">
								<span class="me-1">📦</span> Type de formulaire
							</label>
							<select class="form-select" id="form_type" name="form_type" onchange="updateManualFormPrefix()">
								<option value="Donation" selected>Formulaire de don</option>
								<option value="CrowdFunding">Crowdfunding</option>
							</select>
						</div>
						<div class="mb-4">
							<label for="title" class="form-label fw-semibold">
								<span class="me-1">🎯</span> Titre du stream
							</label>
							<input type="text" class="form-control" id="title" name="title"
								value="{{ title }}" placeholder="ex : Stream caritatif Juin 2025" required>
							<div class="invalid-feedback">Le titre est requis.</div>
						</div>
						<div class="d-grid">
							<button type="submit" class="btn btn-success btn-lg fw-semibold" name="create_charity_stream">
								✅ Créer le stream
							</button>
						</div>
					</form>
				</div>

				{# == MODE DEPUIS MON ASSO == #}
				<div id="modeAsso">

					{# Stepper #}
					<div class="d-flex align-items-center mb-4" id="assoStepper">
						<div class="asso-step active" id="assoStep1Indicator">
							<div class="step-bubble">1</div>
							<div class="step-label">Connexion</div>
						</div>
						<div class="step-line flex-grow-1"></div>
						<div class="asso-step" id="assoStep2Indicator">
							<div class="step-bubble">2</div>
							<div class="step-label">Formulaire</div>
						</div>
					</div>

					{# Étape 1 : connexion OAuth #}
					<div id="stepConnect" class="text-center py-2">
						<div class="mb-3 p-4 rounded-3 bg-body-tertiary">
							<div class="fs-1 mb-2">🔑</div>
							<p class="text-muted mb-0">Connectez votre association HelloAsso pour récupérer automatiquement vos formulaires de don et de crowdfunding.</p>
						</div>
						<button type="button" class="btn btn-primary btn-lg px-5 fw-semibold" id="connectAssoBtn" onclick="connectAsso()">
							Connecter mon asso
						</button>
						<div id="connectSpinner" class="mt-3" style="display:none">
							<div class="spinner-border spinner-border-sm text-primary" role="status" aria-hidden="true"></div>
							<span class="ms-2 text-muted small">Ouverture de la fenêtre d'autorisation…</span>
						</div>
					</div>

					{# Étape 2 : sélection du formulaire #}
					<div id="stepForms" style="display:none">
						<form action="/admin/stream" method="POST" class="needs-validation" novalidate>

							<div class="alert alert-success d-flex align-items-center gap-2 mb-4 py-2">
								<span class="fs-5">✅</span>
								<span>Association connectée : <strong id="assoSlugDisplay"></strong></span>
							</div>

							{% if events %}
								<div class="mb-3">
									<label for="asso_parent_event" class="form-label fw-semibold">
										<span class="me-1">📅</span> Évènement parent
										<span class="text-muted fw-normal small ms-1">(optionnel)</span>
									</label>
									<select class="form-select" id="asso_parent_event" name="parent_event">
										<option value="">— Aucun évènement —</option>
										{% for event in events %}
											<option value="{{ event.id }}">{{ event.title }}</option>
										{% endfor %}
									</select>
								</div>
								<div class="mb-3 p-3 rounded-3 bg-body-tertiary">
									<div class="form-check form-switch mb-0">
										<input class="form-check-input" type="checkbox" role="switch" id="asso_parent_style" name="parent_style">
										<label for="asso_parent_style" class="form-check-label">
											Appliquer le même style que l'évènement parent ?
										</label>
									</div>
								</div>
							{% endif %}

							{# Email : visible pour admin, hidden pour user #}
							{% if isAdmin %}
								<div class="mb-3">
									<label for="asso_owner_email" class="form-label fw-semibold">
										<span class="me-1">📧</span> Email du propriétaire
									</label>
									<input type="email" class="form-control" id="asso_owner_email" name="owner_email"
										value="{{ currentUser.email }}" placeholder="utilisateur@exemple.com" required>
									<div class="invalid-feedback">Veuillez saisir un email valide.</div>
								</div>
							{% else %}
								<input type="hidden" name="owner_email" value="{{ currentUser.email }}">
							{% endif %}

							<input type="hidden" id="asso_organization_slug" name="organization_slug">
						<input type="hidden" id="asso_form_type" name="form_type" value="Donation">

							<div class="mb-3">
								<label for="asso_form_slug" class="form-label fw-semibold">
									<span class="me-1">📋</span> Formulaire
								</label>
								<select class="form-select" id="asso_form_slug" name="form_slug" required>
									<option value="">— Sélectionner un formulaire —</option>
								</select>
								<div class="form-text text-muted small" id="asso_form_type_hint"></div>
								<div class="invalid-feedback">Veuillez sélectionner un formulaire.</div>
							</div>

							<div class="mb-4">
								<label for="asso_title" class="form-label fw-semibold">
									<span class="me-1">🎯</span> Titre du stream
								</label>
								<input type="text" class="form-control" id="asso_title" name="title"
									placeholder="ex : Stream caritatif Juin 2025" required>
								<div class="form-text text-muted small">Pré-rempli à partir du formulaire sélectionné.</div>
								<div class="invalid-feedback">Le titre est requis.</div>
							</div>

							<div class="d-grid">
								<button type="submit" class="btn btn-success btn-lg fw-semibold" name="create_charity_stream">
									✅ Créer le stream
								</button>
							</div>
						</form>
					</div>

				</div>

			</div>
		</div>
	</div>
</div>