matrix-dimension/web/app/configs/irc/irc-config.component.html

<div class="config-wrapper">
    <img src="/img/close.svg" (click)="dialog.close()" class="close-icon">
    <div class="config-header">
        <img src="/img/avatars/irc.png">
        <h4>Configure IRC Bridge</h4>
    </div>
    <div class="config-content">
        <div class="alert alert-info">
            Bridging a channel requires authorization from a channel operator. When entering a channel below, a bot will
            join the channel to ensure it exists and has operators available.
        </div>
        <div *ngIf="!opsLoaded">
            <h6>Add a channel</h6>
            <div class="row form-group" style="margin-bottom: 0.1rem;">
                <label class="col-sm-2 col-form-label">Network</label>
                <div class="col-md-4">
                    <select class="form-control form-control-sm" [(ngModel)]="newChannel.network" [disabled]="loadingOps">
                        <option *ngFor="let network of integration.availableNetworks" [ngValue]="network.id">
                            {{ network.name }}
                        </option>
                    </select>
                </div>
            </div>
            <div class="row form-group" style="margin-bottom: 0.1rem;">
                <label class="col-sm-2 col-form-label">Channel</label>
                <div class="col-md-4 input-group input-group-sm">
                    <div class="input-group-addon">#</div>
                    <input type="text" class="form-control form-control-sm" [(ngModel)]="newChannel.channel" [disabled]="loadingOps">
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <p *ngIf="opsError" class="text-danger">{{ opsError }}</p>
                    <button type="button" class="btn btn-primary btn-sm" (click)="checkOps()" [disabled]="loadingOps">
                        Next <i class="fa fa-arrow-right"></i>
                    </button>
                </div>
            </div>
        </div>
        <div *ngIf="opsLoaded">
            <h6>Add a channel</h6>
            <div class="row form-group" style="margin-bottom: 0.1rem;">
                <label class="col-sm-2 col-form-label">Operator</label>
                <div class="col-md-4">
                    <select class="form-control form-control-sm" [(ngModel)]="newChannel.op" [disabled]="addingChannel">
                        <option *ngFor="let op of channelOps" [ngValue]="op">{{ op }}</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <p>A request to bridge #{{ newChannel.channel }} on {{ getNewChannelNetworkName() }} will be sent to {{ newChannel.op }}. Once they accept, the channel will show up below.</p>
                    <button type="button" class="btn btn-primary btn-sm" (click)="addChannel()" [disabled]="addingChannel">
                        <i class="fa fa-plus-circle"></i> Request Bridge
                    </button>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top: 40px;">
            <div class="col-md-12">
                <h6>Linked channels</h6>
                <p *ngIf="channelLinks.length <= 0">No linked channels.</p>
            </div>
            <div class="col-md-12" *ngFor="let link of channelLinks">
                <strong>{{ link.displayName }}</strong>
                <div *ngFor="let channel of link.channels" style="padding-left: 10px;">
                    {{ channel }}
                    <button type="button" class="btn btn-outline-danger btn-sm" (click)="removeChannelLink(link, channel)" [disabled]="link.beingRemoved.indexOf(channel) !== -1">
                        <i class="fa fa-times"></i> Unlink
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>