From 7d0d04954c46521c86dd8be43b8f1d4a6d61f16c Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Tue, 15 Feb 2022 14:04:41 +0100
Subject: [PATCH] form and radio button

---
 .../language-selector.component.html          | 123 ++++++++++--------
 .../language-selector.component.scss          |   7 +-
 .../language-selector.component.ts            |   2 +-
 3 files changed, 76 insertions(+), 56 deletions(-)

diff --git a/src/app/shared/components/selectors/language-selector/language-selector.component.html b/src/app/shared/components/selectors/language-selector/language-selector.component.html
index 2367b200..1bcb7856 100644
--- a/src/app/shared/components/selectors/language-selector/language-selector.component.html
+++ b/src/app/shared/components/selectors/language-selector/language-selector.component.html
@@ -15,62 +15,77 @@
 			{{ 'LANGUAGES.' + currentLang.toUpperCase() | translate }}
 		</span>
 	</button>
-	<p-dialog
-		[modal]="true"
-		[(visible)]="display_lang_dialog"
-		[breakpoints]="{ '960px': '75vw' }"
-		[style]="{ width: '75vw' }"
-		[draggable]="false"
-		[showHeader]="false"
-		[resizable]="true"
-		[attr.aria-labelledby]="'popup.languages.title' | translate"
-		role="dialog"
-		id="lang_selector_modale"
-	>
-		<ng-template pTemplate="titlebar">
-			<div class="columns">
-				<div class="column">
-					<div class="top">
-						<button
-							id="close_dialog{{ idSuffix }}"
-							class="button cancel-button-reject pull-right img-marged-left"
-							lang="{{ currentLang }}"
-							(click)="focusOnCancelButton()"
-						>
-							{{ 'SENTENCES.Close' | translate }}
-							<img class="icon" src="assets/icons/x_blue.svg" />
-						</button>
+
+	<form action="#/administration/step/{{ pollService.step_current }}">
+		<p-dialog
+			[modal]="true"
+			[(visible)]="display_lang_dialog"
+			[breakpoints]="{ '960px': '75vw' }"
+			[style]="{ width: '75vw' }"
+			[draggable]="false"
+			[showHeader]="false"
+			[resizable]="true"
+			[attr.aria-labelledby]="'popup.languages.title' | translate"
+			role="dialog"
+			id="lang_selector_modale"
+		>
+			<ng-template pTemplate="titlebar">
+				<div class="columns">
+					<div class="column">
+						<div class="top">
+							<button
+								id="close_dialog{{ idSuffix }}"
+								class="button cancel-button-reject pull-right img-marged-left"
+								lang="{{ currentLang }}"
+								(click)="focusOnCancelButton()"
+							>
+								{{ 'SENTENCES.Close' | translate }}
+								<img class="icon" src="assets/icons/x_blue.svg" />
+							</button>
+						</div>
 					</div>
 				</div>
-			</div>
-			<h1 class="title is-2 has-text-left" id="lang_selector_modale_title">
-				{{ 'popup.languages.title' | translate }}
-			</h1>
+				<h1 class="title is-2 has-text-left" id="lang_selector_modale_title">
+					{{ 'popup.languages.title' | translate }}
+				</h1>
 
-			<div class="list-of-langs">
-				<button
-					class="lang-element button"
-					[ngClass]="{ 'is-primary': language_to_apply === language, 'is-current': language === currentLang }"
-					*ngFor="let language of availableLanguages"
-					value="{{ language }}"
-					(click)="language_to_apply = language"
-				>
-					<!--				{{ language }} - -->
-					{{ language }} -
-					{{ 'LANGUAGES.' + language.toUpperCase() | translate }}
-				</button>
-			</div>
-		</ng-template>
+				<div class="list-of-langs">
+					<div *ngFor="let language of availableLanguages" (click)="language_to_apply = language">
+						<label
+							[attr.for]="'#lang_' + language"
+							class="lang-element button"
+							[ngClass]="{
+								'is-primary': language_to_apply === language,
+								'is-current': language === currentLang
+							}"
+						>
+							<input
+								class="pull-left"
+								type="radio"
+								value="{{ language }}"
+								name="lang_to_apply"
+								lang="{{ language }}"
+								[(ngModel)]="language_to_apply"
+								[attr.id]="'#lang_' + language"
+								(click)="language_to_apply = language"
+							/>
+							{{ language }} -
+							{{ 'LANGUAGES.' + language.toUpperCase() | translate }}
+						</label>
+					</div>
+				</div>
+			</ng-template>
 
-		<ng-template pTemplate="footer">
-			<div class="buttons-bottom">
-				<button class="button" (click)="applyLangAndClosePopup()" lang="{{ currentLang }}">
-					{{ 'SENTENCES.Cancel' | translate }}
-				</button>
-				<button class="button is-primary" (click)="applyLangAndClosePopup()" lang="{{ currentLang }}">
-					{{ 'nav.save' | translate }}
-				</button>
-			</div>
-		</ng-template>
-	</p-dialog>
+			<ng-template pTemplate="footer">
+				<div class="buttons-bottom">
+					<button class="button" (click)="applyLangAndClosePopup()" lang="{{ currentLang }}">
+						{{ 'SENTENCES.Cancel' | translate }}
+					</button>
+					<button class="button is-primary" (click)="applyLangAndClosePopup()" lang="{{ currentLang }}">
+						{{ 'nav.save' | translate }}
+					</button>
+				</div>
+			</ng-template>
+		</p-dialog>
+	</form>
 </div>
diff --git a/src/app/shared/components/selectors/language-selector/language-selector.component.scss b/src/app/shared/components/selectors/language-selector/language-selector.component.scss
index b0227386..0e728634 100644
--- a/src/app/shared/components/selectors/language-selector/language-selector.component.scss
+++ b/src/app/shared/components/selectors/language-selector/language-selector.component.scss
@@ -39,9 +39,14 @@
 	border: 0;
 	border-radius: 2rem;
 	padding: 0.5rem 0.25rem;
+	padding-right: 1rem;
 
 	&:hover {
-		background: $d-neutral;
+		background: $primary_color;
+		color: $white;
+	}
+	input {
+		height: 1.5rem;
 	}
 }
 
diff --git a/src/app/shared/components/selectors/language-selector/language-selector.component.ts b/src/app/shared/components/selectors/language-selector/language-selector.component.ts
index 71e2f625..916a8ca7 100644
--- a/src/app/shared/components/selectors/language-selector/language-selector.component.ts
+++ b/src/app/shared/components/selectors/language-selector/language-selector.component.ts
@@ -17,7 +17,7 @@ export class LanguageSelectorComponent implements OnInit {
 	public availableLanguages: any = ['FR', 'EN', 'ES'];
 	language: string;
 	language_to_apply: string;
-	display_lang_dialog: boolean = false;
+	display_lang_dialog: boolean = true;
 
 	constructor(
 		private languageService: LanguageService,