funky-framadate-front/src/app/pages/visibility/visibility.component.html

<h1 i18n>
    {{"visibility.top_txt"|translate}}
</h1>
<section class="answers">

    <h2>
        {{"visibility.title"|translate}}
    </h2>
    <span>
    {{"visibility.visibility_want"|translate}}
    </span>
    <select
        name="visible_people"
        id="visible_people"
        [(ngModel)]="config.visibility"
    >
        <option value="link">
            {{"visibility.visibility_link"|translate}}
        </option>
        <option value="only_me">
            {{"visibility.visibility_nobody"|translate}}
        </option>
    </select>
    <span>
    {{"visibility.visibility_see"|translate}}
    </span>

</section>

<section class="possible_votes">
    <h2>
        {{"visibility.votes"|translate}}
    </h2>
    <label for="votes">
        {{"visibility.votes_possible"|translate}}
    </label>
    <select
        name="votes"
        id="votes"
        [(ngModel)]="config.visibility"
    >
        <option value="only_yes">
            {{"visibility.votes_possible_single"|translate}}
        </option>
        <option value="normal">
            {{"visibility.votes_possible_normal"|translate}}
        </option>
        <option value="full">
            {{"visibility.votes_possible_full"|translate}}
        </option>
    </select>
</section>
<section class="expiracy">
    <label for="expirationDate">
        {{"visibility.archiving"|translate}}
    </label>

    <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">
    <h2>
        {{"visibility.access"|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">
    {{"visibility.validate_btn"|translate}}
</a>