archiva/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/modules/security/security-configuration/ldap-security/ldap-security.component.html

<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~ http://www.apache.org/licenses/LICENSE-2.0
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->

<form class="mt-3 mb-3" [formGroup]="userForm" (ngSubmit)="onSubmit()" autocomplete="new-password">
    <p class="row col-md-10">{{'security.config.ldap.explain'|translate}}</p>
    <div class="form-group row col-md-10"
         *ngFor="let attName of ['host_name','port','base_dn','groups_base_dn','bind_dn','bind_password']">
        <label class="col-md-3 col-form-label"
               for="{{attName}}"
               [openDelay]="500"
               [ngbTooltip]="'security.config.ldap.attdesc.'+attName|translate" placement="top"
        >{{'security.config.ldap.attributes.' + attName |translate}}</label>
        <div [attr.class]="attName=='port'?'col-md-2':'col-md-7'">
            <input [attr.type]="attName=='bind_password'?'password':'text'" formControlName="{{attName}}"
                   id="{{attName}}"
                   [ngClass]="getInputClasses(attName)"
                   autocomplete="new-password"
            >
        </div>
    </div>
    <div class="form-group row col-md-10">
        <label class="col-md-3 col-form-label"
               for="context_factory"
               [openDelay]="500" [ngbTooltip]="'security.config.ldap.attdesc.context_factory'|translate" placement="top"
        >{{'security.config.ldap.attributes.context_factory' |translate}}</label>
        <div class="col-md-7">
            <input type="text" formControlName="context_factory" id="context_factory"
                   [ngClass]="getInputClasses('context_factory')" [ngbTypeahead]="searchContextFactory"
                   [placement]="'top'"
            >
        </div>
    </div>
    <div class="form-group row col-md-10">
        <label class="col-md-3 col-form-label"
               for="authentication_method"
               [openDelay]="500" [ngbTooltip]="'security.config.ldap.attdesc.authentication_method'|translate" placement="top"
        >{{'security.config.ldap.attributes.authentication_method' |translate}}</label>
        <div class="col-md-2">
            <select formControlName="authentication_method" id="authentication_method" class="form-control">
                <option *ngFor="let method of authenticationMethods">{{method}}</option>
            </select>
        </div>
    </div>
    <div class="form-group row col-md-10">
        <div class="col-md-3">{{'security.config.ldap.flags'|translate}}</div>
        <div class="col-md-7">
            <div class="form-check pt-1 pb-1"
                 *ngFor="let flagName of ['writable','ssl_enabled','bind_authenticator_enabled','use_role_name_as_group']">
                <input class="form-check-input" type="checkbox" formControlName="{{flagName}}"
                       id="{{flagName}}">
                <label class="form-check-label " for="{{flagName}}"
                       [openDelay]="500" [ngbTooltip]="'security.config.ldap.attdesc.'+flagName|translate" placement="top"
                >
                    {{'security.config.ldap.attributes.' + flagName|translate}}
                </label>
            </div>
        </div>
    </div>
    <div class="form-group row col-md-10" >
        <div class="col-md-3"
             [openDelay]="500" [ngbTooltip]="'security.config.ldap.attdesc.properties'|translate" placement="top"
        >{{'security.config.ldap.attributes.properties'|translate}}</div>
        <div class="col-md-7 form-row">
            <input type="text" id="prop_key" formControlName="prop_key" class="form-control col" placeholder="{{'form.button.key'|translate}}"

            >
            <input type="prop_value" id="prop_value" formControlName="prop_value"
                   class="form-control col" placeholder="{{'form.button.value'|translate}}">
            <button type="button" class="ml-2 btn btn-primary col" (click)="addProperty()">{{'form.button.add'|translate}}</button>
        </div>
    </div>
    <div class="form-group row col-md-10" *ngIf="ldapProperties && ldapProperties.size>0">
        <div class="col-md-3"></div>
        <div class="col-md-7 pl-2 list-group">
                <div class="list-group-item" *ngFor="let propEntry of ldapProperties  |keyvalue">
                    <span class="float-left">{{propEntry.key}}={{propEntry.value}}</span>
                    <a class="float-right" [routerLink]="" (click)="removeProperty(propEntry.key)" ><i class="fas fa-trash-alt"></i></a>
                </div>
        </div>
    </div>


    <div class="row col-md-10 mt-5">
        <button class="btn btn-primary col-md-3" type="submit"
                [disabled]="checkProgress|| userForm.invalid || !userForm.dirty">{{'form.button.save'|translate}}</button>
        <button class="btn btn-primary col-md-3 offset-1" type="button" (click)="checkLdapConnection()"
                [disabled]="checkProgress||userForm.invalid">
            <span *ngIf="checkProgress" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
            <span *ngIf="checkProgress">&nbsp;{{'form.button.checking'|translate}}</span>
            <span *ngIf="!checkProgress">{{'form.button.check'|translate}}</span></button>
    </div>
    <div class="row  col-md-10 mt-2">
        <div class="alert col-md-6 ml-1 alert-success" role="alert"
             *ngIf="submitError">{{'security.config.ldap.submit_error'|translate:{error:submitError.toString()} }}</div>
        <div class="alert col-md-6 ml-1 alert-success" role="alert"
             *ngIf="checkResult=='success'">{{'security.config.ldap.check_success'|translate}}</div>
        <div class="alert col-md-6 ml-1 alert-warning" role="alert"
             *ngIf="checkResult=='error'">{{'security.config.ldap.check_failed'|translate}}</div>
    </div>


</form>