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>
|