<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700;900&family=Titillium+Web:wght@200;400;600;700;900&display=swap" rel="stylesheet"> <section id="banner" class="banner"> <div class="bg-color"> <nav class="navbar navbar-default navbar-fixed-top"> <div class="navbar-header"> <a class="navbar-brand" href="#"><img src="../assets/img/logo.png" class="img-responsive"></a> </div> <a class="contact-us btn-primary-green-on-dark learnMore" style="color: white;" href="#">Search firm Admin</a> </nav> <div class="container"> <div class="row"> <div class="banner-info"> <div class="banner-text text-center"> <h1 class="white">Firm Manager</h1> <hr> </div> </div> </div> </div> <div class="clearfix"></div> </div> </section> <div class="fis-workspace firm-form col-lg-4"> <h2 class="heading mb-0">Add Firm Admin!</h2> <p class="text-muted">Please fill the form below</p> <form class="fis-form" [formGroup]="addUser" (ngSubmit)="add_user()"> <div class="row"> <div class="col"> <div class="form-group"> <label for="entity_id"><sup class="error-message">*</sup>Entity ID</label> <!-- <input type="text" class="form-control" id="userid" name="userid"> --> <input type="text" class="form-control form-control-sm" id="entity_id " name="Entity ID" formControlName="entity_id" [ngClass]="{ 'is-invalid': submitted && a.entity_id.errors }"> <div *ngIf="submitted && a.entity_id.errors" > <div *ngIf="a.entity_id.errors.required" class="text-danger">Entity ID is required</div> </div> </div> <div class="form-group"> <label for="entity_name"><sup class="error-message">* </sup>Entity Name</label> <input type="text" class="form-control form-control-sm" id="entity_name" name="entity_name" formControlName="entity_name" [ngClass]="{ 'is-invalid': submitted && a.entity_name.errors }"> <div *ngIf="submitted && a.entity_name.errors" > <div *ngIf="a.entity_name.errors.required" class="text-danger">Entity Name is required</div> </div> </div> <div class="form-group"> <label for="userid"><sup class="error-message">* </sup>Hostname</label> <input type="text" class="form-control" id="userid" name="userid"> </div> <!-- <div class="form-group"> <label for="userid"><sup class="error-message">* </sup>Product</label> <select class="form-control form-control-sm" aria-placeholder="Select Product" id="entitystate"> <option class="special">Product 1</option> <option class="special">Product 2</option> <option class="special">Product 3</option> <option class="special">Product 4</option> </select> </div> --> <div class="form-group"> <label for="firm-name"><sup class="error-message">* </sup>Firm Name</label> <!-- <textarea class="form-control" style="height: auto;" id="exampleFormControlTextarea1" rows="3"></textarea> --> <input type="text" class="form-control form-control-sm" id="firm-name" placeholder="Firm Name" (blur)="get_profile();" name="firm-name" formControlName="firm_name" [ngClass]="{ 'is-invalid': submitted && a.firm_name.errors }"> <div *ngIf="submitted && a.firm_name.errors" > <div *ngIf="a.firm_name.errors.required" class="text-danger">Firm Name is required</div> </div> </div> <div class="form-group"> <label for="domain"><sup class="error-message">*</sup>Firm Legal Name</label> <input type="text" class="form-control form-control-sm" id="domain" placeholder="Firm Legal Name" name="domain" formControlName="firm_legal_name" [ngClass]="{ 'is-invalid': submitted && a.firm_legal_name.errors }"> <div *ngIf="submitted && a.firm_legal_name.errors" > <div *ngIf="a.firm_legal_name.errors.required" class="text-danger">Firm Legal Name is required</div> </div> </div> <div class="form-group"> <label for="first_name"><sup class="error-message">*</sup>First Name</label> <input type="text" class="form-control form-control-sm" id="first_name" placeholder="First Name" name="first_name" formControlName="first_name" [ngClass]="{ 'is-invalid': submitted && a.first_name.errors }"> <div *ngIf="submitted && a.first_name.errors" > <div *ngIf="a.first_name.errors.required" class="text-danger">First Name is required</div> </div> </div> <div class="form-group"> <label for="last_name"><sup class="error-message">*</sup>Last Name</label> <input type="text" class="form-control form-control-sm" id="last_name" placeholder="Last Name" name="last_name" formControlName="last_name" [ngClass]="{ 'is-invalid': submitted && a.last_name.errors }"> <div *ngIf="submitted && a.last_name.errors" > <div *ngIf="a.last_name.errors.required" class="text-danger">Last Name is required</div> </div> <div class="form-group"> <label for="domain"><sup class="error-message">*</sup>Login Name</label> <input type="text" class="form-control form-control-sm" id="login_name" placeholder="Login Name" name="login_name" formControlName="login_name" [ngClass]="{ 'is-invalid': submitted && a.login_name.errors }"> <div *ngIf="submitted && a.login_name.errors" > <div *ngIf="a.login_name.errors.required" class="text-danger">Login Name is required</div> </div> </div> <div class="form-group"> <label for="email_address"><sup class="error-message">*</sup>Email Address</label> <input type="email" class="form-control form-control-sm" id="email_address" placeholder="Email Address" name="email_address" formControlName="email_address" [ngClass]="{ 'is-invalid': submitted && a.email_address.errors }"> <div *ngIf="submitted && a.email_address.errors" > <div *ngIf="a.email_address.errors.required" class="text-danger">Email is required</div> </div> </div> <div class="form-group"> <label for="user_profile"><sup class="error-message">*</sup>User Profile</label> <select formControlName="user_profile" class="form-control form-control-sm" [ngClass]="{ 'is-invalid': submitted && a.user_profile.errors }"> <option value="">Choose...</option> <option *ngFor="let profile of userProfile" [value]="profile.name">{{profile.name}}</option> </select> <div *ngIf="submitted && a.user_profile.errors" > <div *ngIf="a.user_profile.errors.required" class="text-danger">User Profile is required</div> </div> </div> <hr> <div class="form-group"> <label for="epicroleid"><sup class="error-message">*</sup>Epic Role</label> <select disabled formControlName="epicroleid" class="form-control form-control-sm" [ngClass]="{ 'is-invalid': submitted && a.epicroleid.errors }"> <option value="">Choose...</option> <option value="1" >Admin</option> <!-- <option value="2">Non-admin</option> <option value="3">Not Required</option> --> </select> <div *ngIf="submitted && a.epicroleid.errors" > <div *ngIf="a.epicroleid.errors.required" class="text-danger">Epic Role is required</div> </div> </div> <hr> <div class="form-group"> <label for="bu_token"><sup class="error-message">*</sup>BU Token</label> <input type="text" class="form-control form-control-sm" id="UserProfile" placeholder="BU Token" name="user_profile" formControlName="bu_token" [ngClass]="{ 'is-invalid': submitted && a.bu_token.errors }"> <div *ngIf="submitted && a.bu_token.errors" > <div *ngIf="a.bu_token.errors.required" class="text-danger">BU Token is required</div> </div> </div> <div class="form-group"> <label for="user_profile"><sup class="error-message">*</sup>Sunguard Key</label> <input type="text" class="form-control form-control-sm" id="sunguard_token" placeholder="Sunguard Key" name="user_profile" formControlName="sunguard_token" [ngClass]="{ 'is-invalid': submitted && a.sunguard_token.errors }"> <div *ngIf="submitted && a.sunguard_token.errors" > <div *ngIf="a.sunguard_token.errors.required" class="text-danger">Sunguard Token is required</div> </div> </div> <div class="float-right"> <button type="button" class=" btn fis-outline-button fis-round-button">Cancel</button> <button type="submit" style="margin-left: 10px;" class="btn fis-filled-button fis-round-button">Create</button> </div> </div> </div> </form> </div>

#banner { background: url('../../assets/img/banner-new2.png'); background-size: cover; min-height: 250px; position: relative; background-position: top; } .fis-form label { font-weight: bold; font-size: 15px; } .row.m-0 { padding: 5px 0px; } .fis-heading-green.p-2 { color: #00565b !important; padding: 15px 15px 5px 15px !important; font-weight: 700; } .fis-form { background: #f9f9f9; } .fis-form .row p { font-size: 14px; } .fis-workspace.firm-form * { font-family: 'Titillium Web', sans-serif, 'FontAwesome'!important; } a.contact-us.btn-primary-green-on-dark.learnMore { color: white; font-family: 'Source Sans Pro', sans-serif, 'FontAwesome'!important; font-weight: 400; line-height: 1.5; cursor: pointer; display: inline-block; text-align: center; padding: 8px 30px; border: 2px solid #4BCD3E; border-radius: 67px; text-decoration: none; } .contact-us.btn-primary-green-on-dark:hover { background-color: #4BCD3E !important; color: #fff; } .heading { font-family: 'Titillium Web', sans-serif, 'FontAwesome'!important; font-weight: 900!important; } .fis-workspace .fis-form { background: transparent; margin: 0px; padding: 0px; box-shadow: 0 0px 0px transparent; width: auto; } .fis-workspace .fis-form label { font-size: 13px!important; color: #4e4e4e!important; font-family: 'Titillium Web', sans-serif, 'FontAwesome'!important; margin-bottom: 5px!important; font-weight: bold; } .fis-workspace.firm-form { background: #FFF; padding: 30px 30px!important; font-family: 'Titillium Web', sans-serif, 'FontAwesome'!important; } .error-message { color: red; font-size: 12px !important; } a.contact-us.btn-primary-green-on-dark.learnMore { color: white; font-family: 'Source Sans Pro', sans-serif, 'FontAwesome'!important; font-weight: 400; line-height: 1.5; cursor: pointer; display: inline-block; text-align: center; padding: 8px 30px; border: 2px solid #4BCD3E; border-radius: 67px; text-decoration: none; } .fis-round-button { /* border-color: #4bcd3e; */ border-radius: 20px!important; font-weight: bold!important; color: #003b4d!important; font-size: 15px!important; padding: 7px!important; border: 2px solid #4BCD3E!important; height: auto!important; margin-left: 10px; min-width: 100px; } .fis-outline-button { } .fis-filled-button { background-color: #4bcd3e!important; color: #003b4d; } .fis-outline-button:hover { background-color: #4bcd3e!important; color: #fff!important; outline: none!important; } .fis-filled-button:hover { background-color: transparent!important; color: #003b4d!important; } .fis-workspace .fis-form .text-danger { font-size: 12px !important; } .mlr-5 { margin-left: 5px; margin-right: 5px; color: #777; border-radius: 20px; } // add-user .navbar { border-radius: 0px; } .navbar-default { background-color: transparent; border: 0px; } .navbar-default { padding: 20px 0; transition: all 0.3s; } .banner-info { padding-top: 190px; } .banner-info { padding-top: 50px; width: 100%; color: #fff; } h1.white { font-size: 30px!important; font-weight: bold; margin-bottom: 20px; font-family: 'Titillium Web', sans-serif, 'FontAwesome'!important; font-weight: 900!important; } .banner-text hr { margin-top: 30px; margin-bottom: 1rem; border: 0; border-top: 4px solid #4BCD3E; width: 5%; margin: auto; } .display-inline { display: inline; } .display-inline li { list-style-type: none; display: inline-block; } .nav-link.text-white:hover { color: #4bcd3e!important; } .dflex { display: flex; justify-content: flex-end; align-items: center; margin-top: 10px; } option:hover{ background-color:#00565b!important; } select.form-control[multiple], select.form-control[size] { height: auto!important; max-height: 120px!important; } .mb-20 { margin-bottom: 20px; } h4.section-title { font-size: 16px!important; color: #00565b!important; font-family: 'Titillium Web', sans-serif, 'FontAwesome'!important; margin-bottom: 5px!important; font-weight: 700; } @media (max-width:767px) { .display-inline.navList.right-menu { font-size: 12px!important; margin-top: 10px; } } .viewport { min-height: calc(100vh - 46px); }