end visibilty fields link with poll config

src/app/config/PollConfig.ts

@@ -56,8 +56,11 @@ export class PollConfig {
     // access
     visibility = 'link_only'; // visible to anyone with the link:
     voteChoices = 'only_yes'; // possible answers to a vote choice: only "yes", "yes, maybe, no"
+    expirationDate = ''; // expiracy date
+    passwordAccess = 0;
     password = '';
     customUrl = '';
+    canModifyAnswers =1;// everybody, self, nobody (= just admin)
     whoCanChangeAnswers = 'everybody';// everybody, self, nobody (= just admin)
     dateList: DateOption[] = defaultDates; // sets of days as strings, config to set identical time for days in a special days poll
     timeList: DateOption[] = timeOfDay; // ranges of time expressed as strings

src/app/pages/visibility/visibility.component.html

@@ -31,9 +31,9 @@
     <h2>
         {{"visibility.votes"|translate}}
     </h2>
-    <span>
-    {{"visibility.votes_possible"|translate}}
-    </span>
+    <label for="votes">
+        {{"visibility.votes_possible"|translate}}
+    </label>
     <select
         name="votes"
         id="votes"
@@ -51,26 +51,93 @@
     </select>
 </section>
 <section class="expiracy">
-    <span>
+    <label for="expirationDate">
         {{"visibility.archiving"|translate}}
-    </span>
+    </label>
 
-    {{"visibility.archiving_start"|translate}}
-    {{"visibility.archiving_can"|translate}}
-    {{"visibility.archiving_can_not"|translate}}
-    {{"visibility.archiving_end"|translate}}
+    <input type="date"
+           id="expirationDate"
+           [(ngModel)]="config.expirationDate">
+    <div class="modification">
+        <label for="modificationAbility">
+            {{"visibility.archiving_start"|translate}}
+        </label>
+        <select
+            name="modificationAbility"
+            id="modificationAbility"
+            [(ngModel)]="config.canModifyAnswers">
+            <option value="1">
+                {{"visibility.archiving_can"|translate}}
+            </option>
+            <option value="0">
+                {{"visibility.archiving_can_not"|translate}}
+            </option>
+        </select>
+        <label for="modificationScope">
+            {{"visibility.archiving_end"|translate}}
+        </label>
+
+        <select
+            name="modificationScope"
+            id="modificationScope"
+            [(ngModel)]="config.canModifyAnswers">
+            <option value="self">
+                {{"visibility.modfiy_their"|translate}}
+            </option>
+            <option value="everybody">
+                {{"visibility.modfiy_everyone"|translate}}
+            </option>
+        </select>
+
+    </div>
 
 
 </section>
 <section class="access">
-    <h1>
+    <h2>
         {{"visibility.access"|translate}}
-    </h1>
-    {{"visibility.access_want"|translate}}
-    {{"visibility.access_want_yes"|translate}}
-    {{"visibility.access_want_no"|translate}}
-    {{"visibility.access_protect"|translate}}
+    </h2>
+    <label for="url">
+        {{"visibility.access_url"|translate}}
+        <br>
+        {{"visibility.access_url_key"|translate}}
+    </label>
+    <input type="text"
+           name="url"
+           id="url"
+           [(ngModel)]="config.customUrl">
 
+    <sub class="instructions">
+        {{"visibility.access_instructions"|translate}}
+    </sub>
+    {{"visibility.access_want"|translate}}
+    <select name="passwordAccess" id="passwordAccess" [(ngModel)]="config.passwordAccess">
+        <option value="0">  {{"visibility.access_want_no"|translate}}</option>
+        <option value="1">  {{"visibility.access_want_yes"|translate}}</option>
+    </select>
+
+    <label for="password">
+        {{"visibility.access_protect"|translate}}
+    </label>
+
+    <input type="password"
+           name="password"
+           id="password"
+           min="8"
+           *ngIf="!showCustomPassword"
+           [(ngModel)]="config.password">
+    <input type="password"
+           name="password_visible"
+           id="password_visible"
+           min="8"
+           *ngIf="showCustomPassword"
+           [(ngModel)]="config.password">
+    <button class="btn btn--default" (click)="showCustomPassword = !showCustomPassword">
+        {{"visibility.see_pass"|translate}}
+    </button>
 </section>
 
-<a [routerLink]="'/step/end'" class="btn btn--primary" i18n="@@confirm">C'est parfait!</a>
+<a [routerLink]="'/step/end'"
+   class="btn btn--primary">
+    {{"visibility.validate_btn"|translate}}
+</a>

src/app/pages/visibility/visibility.component.ts

@@ -8,12 +8,24 @@ import {ConfigService} from '../../config.service';
     styleUrls: ['./visibility.component.scss']
 })
 export class VisibilityComponent extends BaseComponent implements OnInit {
+    showCustomPassword = false;
 
     constructor(public config: ConfigService) {
         super(config);
     }
 
     ngOnInit() {
+        this.config.customUrl = this.makeUuid();
+    }
+
+    /**
+     * generate unique id to have a default url for future poll
+     */
+    makeUuid() {
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+            var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+            return v.toString(16);
+        });
     }
 
 }

src/assets/i18n/fr.json

@@ -84,12 +84,15 @@
         "modfiy_their": "leur vote",
         "modfiy_everyone": "tous les votes",
         "access": "Accès au sondage",
+        "access_url": "Les votants pourront  y accéder via cette adresse :",
+        "access_url_key": "URL",
+        "see_pass": "voir",
+        "access_instructions": "peut contenir des lettres, chiffres et des tirets",
         "access_want": "Je",
         "access_want_yes": "souhaite",
         "access_want_no": "n'ai pas besoin",
         "access_protect": "qu’il soit protégé par un mot de passe.",
-        "access_url": "Les votants pourront  y accéder via cette adresse :",
-        "access_url_key": "URL"
+        "validate_btn": "Créer ce sondage !"
     },
     "admin": {
         "deletion": "Tout supprimer",