funky-framadate-front/src/app/features/administration/form/advanced-config/advanced-config.component.html

<form [formGroup]="form" class="form-advanced-config">
	<div class="box-well">
		<h3 class="title is-3">
			Saisissez la date de fin de votre sondage
		</h3>
		<p>
			Par défaut votre sondage prendra fin 30 jours après le dernier jour sélectionné dans vos propositions
		</p>
		<div class="date-expiracy">
			<div class="columns">
				<div class="column">
					<label for="expiracy">Date</label>
				</div>
				<div class="column">
					<span class="date-helper">JJ/MM/AAAA</span>
				</div>
			</div>
			<div class="columns">
				<div class="column">
					<input formControlName="expiracy" type="text" id="expiracy" />
				</div>
				<div class="column is-narrow">
					<img class="icon" src="assets/icons/calendar.svg" alt="icone calendrier" />
				</div>
			</div>
		</div>
	</div>
	<div class="columns">
		<div class="column is-narrow">
			<input type="checkbox" formControlName="limit_votants" id="limit_votants" />
			<img class="icon" src="assets/icons/users.svg" alt="icone utilisateurs" />
		</div>
		<div class="column">
			<label for="limit_votants">
				<h4 class="title is-4">
					Limiter le nombre de votants par proposition
				</h4>
				<p>
					Vous pouvez pour l'ensemble de vos options limiter le nombre de votants
				</p>
			</label>
		</div>
	</div>
	<hr />
	<fieldset>
		<br />

		<label for="custom_url">
			Url personnalisée pour les participants
		</label>
		<br />
		<button
			*ngIf="form.controls.custom_url.value"
			aria-label="Clear"
			(click)="form.patchValue({ custom_url: pollService.makeSlug(form) })"
		>
			<i class="fa fa-recycle"></i> régénérer
		</button>
		<input #custom_url matInput id="custom_url" placeholder="Url" formControlName="custom_url" required />
		<br />
		<div appearance="outline" class="is-not-flex">
			<mat-label
				>Nombre de jours avant expiration de la possibilité de voter, après le sondage reste consultable
			</mat-label>
			<input
				#expiresDaysDelay
				id="expiresDaysDelay"
				matInput
				type="number"
				formControlName="expiresDaysDelay"
				required
			/>
		</div>
		<mat-checkbox class="is-not-flex" formControlName="areResultsPublic">
			Les participants pourront consulter les résultats
		</mat-checkbox>
		<h3 class="title is-3">
			<i class="fa fa-lock"></i>
			Accès sécurisé
		</h3>

		<mat-checkbox class="is-not-flex" formControlName="isProtectedByPassword">
			Le sondage sera protégé par un mot de passe
		</mat-checkbox>
		<br />
		<div class="password-box" *ngIf="form.value.isProtectedByPassword">
			<input
				#password
				id="password"
				matInput
				[type]="displayClearPassword ? 'text' : 'password'"
				formControlName="password"
				required
			/>
			<button
				class="button"
				[ngClass]="{ 'is-primary': displayClearPassword, 'is-info': !displayClearPassword }"
				(click)="displayClearPassword = !displayClearPassword"
			>
				voir
				<i class="fa fa-eye" *ngIf="!displayClearPassword"></i>
				<i class="fa fa-eye-slash" *ngIf="displayClearPassword"></i>
			</button>
		</div>

		<h3 class="title is-3">
			<i class="fa fa-envelope-open"></i>
			Notifications
		</h3>
		<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewVote">
			Vous recevrez un mail à chaque nouvelle participation
		</mat-checkbox>
		<br />
		<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewComment">
			Vous recevrez un mail à chaque nouveau commentaire
		</mat-checkbox>
		<div class="proposed-answers">
			<h3 class="title is-3">
				<i class="fa fa-check-square"></i>
				Réponses proposées
			</h3>

			<mat-checkbox class="is-not-flex" formControlName="isYesAnswerAvailable">
				La réponse « oui » sera disponible
				<img class="image is-24x24 pull-right" src="assets/img/icon_voter_YES.svg" />
			</mat-checkbox>
			<br />
			<mat-checkbox class="is-not-flex" formControlName="isMaybeAnswerAvailable">
				La réponse « peut-être » sera disponible
				<img class="image is-24x24 pull-right" src="assets/img/icon_voter_MAYBE.svg" />
			</mat-checkbox>
			<br />
			<mat-checkbox class="is-not-flex" formControlName="isNoAnswerAvailable">
				La réponse « non » sera disponible
				<img class="image is-24x24 pull-right" src="assets/img/icon_voter_NO.svg" />
			</mat-checkbox>
		</div>
		<h3 class="title is-3">
			<i class="fa fa-user-secret"></i>
			Restrictions visiteurs
		</h3>
		<mat-checkbox class="is-not-flex" formControlName="allowComments">
			Autoriser les commentaires
		</mat-checkbox>
		<mat-checkbox class="is-not-flex" formControlName="hideResults">
			Cacher les résultats au public
		</mat-checkbox>
		<br />
		<mat-checkbox class="is-not-flex" formControlName="hasMaxCountOfAnswers">
			Nombre de réponses limitées à ce nombre.
		</mat-checkbox>
		<p>
			Utile pour réserver des places à un évènement.
		</p>
		<input
			*ngIf="form.value.hasMaxCountOfAnswers"
			#maxCountOfAnswers
			id="maxCountOfAnswers"
			matInput
			type="number"
			formControlName="maxCountOfAnswers"
			required
		/>
	</fieldset>

	<fieldset class="work-in-progress">
		<h2 class="title is-2">
			<i class="fa fa-wikidata"></i>
			Fonctionnalités pas encore disponibles:
		</h2>
		<div>
			<mat-checkbox class="is-not-flex" formControlName="useVoterUniqueLink">
				Lien unique de vote par email
			</mat-checkbox>
			<p>
				lister les email des participants et leur fournir un lien unique pour voter à chacun, au lieu d'un lien
				avec une clé permettant de voter pour n'importe qui ayant le lien. Nécessite: évolution de la BDD et de
				l'API
			</p>
			<textarea
				name="voterEmailList"
				id="voterEmailList"
				cols="30"
				rows="10"
				formControlName="voterEmailList"
			></textarea>
		</div>

		<mat-checkbox class="is-not-flex" formControlName="allowNewDateTime">
			Proposer un créneau
		</mat-checkbox>
		<p>
			Permettre au public de proposer un créneau de vote supplémentaire
		</p>
		<mat-checkbox class="is-not-flex" formControlName="isZeroKnoledge">
			Zéro knowledge
		</mat-checkbox>
		<p>
			Les informations du sondage seront chiffrées en base de données
		</p>
	</fieldset>
	<app-errors-list [form]="form"></app-errors-list>
</form>