Kola92
444 lines
16 KiB
HTML
444 lines
16 KiB
HTML
<div class="companyProfile content">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<div class="card">
|
|
<div class="card-header"><h5 class="title">Edit Profile</h5></div>
|
|
<div class="card-body companyProfileBody">
|
|
<form
|
|
(ngSubmit)="updateInfo()"
|
|
[formGroup]="updateInfoForm"
|
|
novalidate
|
|
>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="form-group mb-5">
|
|
<div
|
|
class="institutionDashboard__editInfoFormGroup input-group inputField__uploadFile"
|
|
>
|
|
<input
|
|
type="file"
|
|
name="companyLogo"
|
|
|
|
style="display: none"
|
|
id="avatar-image"
|
|
accept="image/*"
|
|
(change)="onFileChange($event)"
|
|
/>
|
|
<label
|
|
for="avatar-image"
|
|
style="
|
|
background: linear-gradient(
|
|
rgb(72, 0, 72, 0.8),
|
|
rgb(192, 72, 72, 0.8)
|
|
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
background-size: cover;
|
|
border-radius: 50%;
|
|
padding: 2px;
|
|
width: 90px;
|
|
height: 90px;
|
|
filter: drop-shadow(2px 4px 6px black);
|
|
"
|
|
>
|
|
<!-- <img
|
|
class="image-avatar"
|
|
style="
|
|
height: 85px;
|
|
width: 85px;
|
|
border-radius: 50%;
|
|
"
|
|
[src]="imgSrc ? imgSrc : institutionData.image"
|
|
alt="avatar"
|
|
/> -->
|
|
|
|
<img
|
|
class="image-avatar"
|
|
style="height: 85px; width: 85px; border-radius: 50%"
|
|
[src]="imgSrc"
|
|
alt="avatar"
|
|
/>
|
|
<div
|
|
class="upload__icon"
|
|
style="
|
|
position: absolute;
|
|
left: 32%;
|
|
bottom: 24%;
|
|
color: white;
|
|
filter: opacity(0.85);
|
|
"
|
|
>
|
|
<i
|
|
class="bi bi-upload fw-bolder"
|
|
style="font-size: 2.2rem"
|
|
></i>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="companyEditForm--error">
|
|
<ng-container
|
|
*ngIf="
|
|
formControls.companyLogo.touched &&
|
|
formControls.companyLogo.invalid
|
|
"
|
|
class="alert alert-danger"
|
|
>
|
|
<div *ngIf="formControls.companyLogo.errors?.required">
|
|
Image file is required
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-container
|
|
*ngIf="imgFormatError"
|
|
class="alert alert-danger"
|
|
>
|
|
<div
|
|
id="imageError"
|
|
aria-live="assertive"
|
|
style="color: crimson; font-weight: 700"
|
|
>
|
|
File type not supported.
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="fileSizeError">
|
|
<div
|
|
id="imageError"
|
|
style="color: crimson; font-weight: 700"
|
|
>
|
|
File size must be less than 2 MB.
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 pr-md-1">
|
|
<div class="form-group">
|
|
<label for="companyName"> Company (disabled) </label>
|
|
<input
|
|
class="form-control"
|
|
disabled=""
|
|
id="companyName"
|
|
type="text"
|
|
formControlName="companyName"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 px-md-1">
|
|
<div class="form-group">
|
|
<label for="companyUsername"> Username </label>
|
|
<input
|
|
class="form-control"
|
|
disabled=""
|
|
type="text"
|
|
id="companyUsername"
|
|
formControlName="companyUsername"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 pr-md-1">
|
|
<div class="form-group">
|
|
<label for="companyName"> Company Name </label>
|
|
<input
|
|
id="companyName"
|
|
class="form-control"
|
|
placeholder="Company"
|
|
type="text"
|
|
formControlName="companyName"
|
|
/>
|
|
</div>
|
|
|
|
<div class="companyEditForm--error">
|
|
<ng-container
|
|
*ngIf="
|
|
formControls.companyName.touched &&
|
|
formControls.companyName.errors?.minlength
|
|
"
|
|
>
|
|
<div id="instituionNameError" aria-live="assertive">
|
|
<i class="bi bi-exclamation-octagon"></i>
|
|
<span>Company Name must be at least 6 characters</span>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-container
|
|
*ngIf="
|
|
formControls.companyName.errors?.required &&
|
|
formControls.companyName?.touched
|
|
"
|
|
>
|
|
<div id="institutionNameError" aria-live="assertive">
|
|
<i class="bi bi-x"></i>
|
|
<span>Company Name Required</span>
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 pl-md-1">
|
|
<div class="form-group">
|
|
<label for="companyEmail"> Email Address </label>
|
|
<input
|
|
id="companyEmail"
|
|
class="form-control"
|
|
placeholder="Company Email"
|
|
type="email"
|
|
formControlName="companyEmail"
|
|
/>
|
|
</div>
|
|
|
|
<div class="companyEditForm--error mt-1">
|
|
<ng-container
|
|
*ngIf="
|
|
formControls.companyEmail.invalid &&
|
|
(formControls.companyEmail.dirty ||
|
|
formControls.companyEmail.touched)
|
|
"
|
|
>
|
|
<div id="emailError" aria-live="assertive">
|
|
<i class="bi bi-x"> </i>
|
|
<span>Email Required</span>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-container
|
|
*ngIf="formControls.companyEmail.errors?.pattern"
|
|
>
|
|
<div id="emailError" aria-live="assertive">
|
|
<i class="bi bi-exclamation-octagon"></i>
|
|
<span>Please enter a valid email</span>
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="form-group">
|
|
<label for="companyAddress"> Enter Address </label>
|
|
<input
|
|
class="form-control"
|
|
placeholder="Company Address"
|
|
type="text"
|
|
id="companyAddress"
|
|
formControlName="companyAddress"
|
|
/>
|
|
</div>
|
|
|
|
<div class="companyEditForm--error">
|
|
<ng-container
|
|
*ngIf="
|
|
formControls.companyAddress.touched &&
|
|
formControls.companyAddress.errors?.minlength
|
|
"
|
|
>
|
|
<div id="addressError" aria-live="assertive">
|
|
<i class="bi bi-exclamation-octagon"></i>
|
|
<span>Company Address must be at least 6 characters</span>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-container
|
|
*ngIf="
|
|
formControls.companyAddress.invalid &&
|
|
(formControls.companyAddress.dirty ||
|
|
formControls.companyAddress.touched)
|
|
"
|
|
>
|
|
<div id="addressError" aria-live="assertive">
|
|
<i class="bi bi-x"></i>
|
|
<span>Company Address Required</span>
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 pr-md-1">
|
|
<div class="form-group">
|
|
<label for="companyPhone">Phone </label>
|
|
<input
|
|
class="form-control"
|
|
placeholder="Company Phone Number"
|
|
type="text"
|
|
id="companyPhone"
|
|
formControlName="companyPhone"
|
|
/>
|
|
</div>
|
|
|
|
<div class="companyEditForm--error mt-1">
|
|
<ng-container
|
|
*ngIf="
|
|
formControls.companyPhone.errors?.required &&
|
|
formControls.companyPhone?.touched
|
|
"
|
|
class="alert alert-danger"
|
|
>
|
|
<div id="phoneNumberError" aria-live="assertive">
|
|
<i class="bi bi-x"> </i>
|
|
<span>Phone Number Required</span>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-container
|
|
*ngIf="formControls.companyPhone.errors?.minlength"
|
|
>
|
|
<div id="phoneNumberError" aria-live="assertive">
|
|
<i class="bi bi-exclamation-octagon"></i>
|
|
<span>Phone number must be at least 11 characters</span>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-container
|
|
*ngIf="formControls.companyPhone.errors?.pattern"
|
|
>
|
|
<div id="phoneNumberError" aria-live="assertive">
|
|
<i class="bi bi-x"> </i>
|
|
<span
|
|
>Please enter a valid phone number (e.g.
|
|
090321...)</span
|
|
>
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 pl-md-1">
|
|
<div class="form-group">
|
|
<label for="companyCity"> City </label>
|
|
<input
|
|
class="form-control"
|
|
placeholder="City"
|
|
type="text"
|
|
id="companyCity"
|
|
formControlName="companyCity"
|
|
/>
|
|
</div>
|
|
|
|
<div class="companyEditForm--error">
|
|
<ng-container
|
|
*ngIf="
|
|
formControls.companyCity.touched &&
|
|
formControls.companyCity.errors?.minlength
|
|
"
|
|
>
|
|
<div id="addressError" aria-live="assertive">
|
|
<i class="bi bi-exclamation-octagon"></i>
|
|
<span>Company City must be at least 6 characters</span>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-container
|
|
*ngIf="
|
|
formControls.companyCity.invalid &&
|
|
(formControls.companyCity.dirty ||
|
|
formControls.companyCity.touched)
|
|
"
|
|
>
|
|
<div id="addressError" aria-live="assertive">
|
|
<i class="bi bi-x"></i>
|
|
<span>Company City Required</span>
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<div class="form-group">
|
|
<label for="companyDescription"> About Company </label>
|
|
<textarea
|
|
class="form-control"
|
|
placeholder="Company description"
|
|
id="companyDescription"
|
|
rows="4"
|
|
formControlName="companyDescription"
|
|
>
|
|
</textarea>
|
|
</div>
|
|
|
|
<div class="companyEditForm--error">
|
|
<ng-container
|
|
*ngIf="
|
|
formControls.companyDescription.touched &&
|
|
formControls.companyDescription.errors?.minlength
|
|
"
|
|
>
|
|
<div id="descError" aria-live="assertive">
|
|
<i class="bi bi-exclamation-octagon"></i>
|
|
<span>
|
|
Institution Description must be at least 10 characters
|
|
</span>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-container
|
|
*ngIf="
|
|
formControls.companyDescription.errors?.required &&
|
|
formControls.companyDescription?.touched
|
|
"
|
|
>
|
|
<div id="descError" aria-live="assertive">
|
|
<i class="bi bi-x"></i>
|
|
<span>Company Description Required</span>
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="updateSaveBtn">
|
|
<button class="btn btn-fill btn-save" type="submit">
|
|
Save
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card card-user">
|
|
<div class="card-body">
|
|
<p class="card-text"></p>
|
|
<div class="author">
|
|
<div class="block block-one"></div>
|
|
<div class="block block-two"></div>
|
|
<div class="block block-three"></div>
|
|
<div class="block block-four"></div>
|
|
<a href="javascript:void(0)">
|
|
<img alt="..." class="avatar" src="assets/img/emilyz.jpg" />
|
|
|
|
<h5 class="title">Mike Andrew</h5>
|
|
</a>
|
|
<p class="description">Ceo/Co-Founder</p>
|
|
</div>
|
|
<div class="card-description">
|
|
Do not be scared of the truth because we need to restart the human
|
|
foundation in truth And I love you like Kanye loves Kanye I love
|
|
Rick Owens’ bed design but the back is...
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="button-container">
|
|
<button class="btn btn-icon btn-round btn-facebook" href="#">
|
|
<i class="bi bi-facebook"> </i>
|
|
</button>
|
|
<button class="btn btn-icon btn-round btn-twitter" href="#">
|
|
<i class="bi bi-twitter"> </i>
|
|
</button>
|
|
<button class="btn btn-icon btn-round btn-linkedin" href="#">
|
|
<i class="bi bi-linkedin"> </i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|