first commit
This commit is contained in:
Kola92
443
src/app/pages/company-profile/company-profile.component.html
Normal file
443
src/app/pages/company-profile/company-profile.component.html
Normal file
@@ -0,0 +1,443 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user