167 lines
9.3 KiB
C#
167 lines
9.3 KiB
C#
@page
|
|
@attribute [Authorize(Roles = "Profiles")]
|
|
@{
|
|
ViewData["Title"] = "My Profile";
|
|
}
|
|
|
|
<div id="app" v-cloak>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="grid-container">
|
|
<div ref="mainGridRef"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" ref="mainModalRef" id="MainModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
|
|
<div class="modal-dialog modal-dialog-centered modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">{{ state.mainTitle }}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input type="hidden" v-model="state.userId" id="UserId" name="UserId" />
|
|
<form id="MainForm">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5>Main Info</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row mb-0">
|
|
<div class="col-md-6">
|
|
<label for="FirstName">First Name</label>
|
|
<input ref="firstNameRef" v-model="state.firstName" type="text" class="form-control" placeholder="">
|
|
<label class="text-danger">{{ state.errors.firstName }}</label>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="LastName">Last Name</label>
|
|
<input ref="lastNameRef" v-model="state.lastName" type="text" class="form-control" placeholder="">
|
|
<label class="text-danger">{{ state.errors.lastName }}</label>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-0">
|
|
<div class="col-12">
|
|
<label for="CompanyName">Company Name</label>
|
|
<textarea ref="companyNameRef" v-model="state.companyName" class="form-control" rows="3"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
<button type="button"
|
|
id="MainSaveButton"
|
|
class="btn"
|
|
v-bind:class="state.deleteMode ? 'btn-danger' : 'btn-primary'"
|
|
v-on:click="handler.handleSubmit"
|
|
v-bind:disabled="state.isSubmitting">
|
|
<span class="spinner-border spinner-border-sm me-2" v-if="state.isSubmitting" role="status" aria-hidden="true"></span>
|
|
<span v-if="!state.isSubmitting">{{ state.deleteMode ? 'Delete' : 'Save' }}</span>
|
|
<span v-else>{{ state.deleteMode ? 'Deleting...' : 'Saving...' }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal untuk Change Password -->
|
|
<div class="modal fade" ref="changePasswordModalRef" id="ChangePasswordModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
|
|
<div class="modal-dialog modal-dialog-centered modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">{{ state.changePasswordTitle }}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input type="hidden" v-model="state.userId" id="UserId" name="UserId" />
|
|
<form id="ChangePasswordForm">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header bg-primary text-white">
|
|
Old Password
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="OldPassword">Old Password</label>
|
|
<input ref="oldPasswordRef" v-model="state.oldPassword" type="password" class="form-control" placeholder="Enter old password">
|
|
<label class="text-danger">{{ state.errors.oldPassword }}</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header bg-success text-white">
|
|
New Password
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="NewPassword">New Password</label>
|
|
<input ref="newPasswordRef" v-model="state.newPassword" type="password" class="form-control" placeholder="Enter new password">
|
|
<label class="text-danger">{{ state.errors.newPassword }}</label>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="ConfirmNewPassword">Confirm New Password</label>
|
|
<input ref="confirmNewPasswordRef" v-model="state.confirmNewPassword" type="password" class="form-control" placeholder="Confirm new password">
|
|
<label class="text-danger">{{ state.errors.confirmNewPassword }}</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
<button type="button" id="ChangePasswordSaveButton" class="btn btn-primary" v-on:click="handler.handleChangePassword">
|
|
<span class="spinner-border spinner-border-sm me-2" v-if="state.isSubmitting" role="status" aria-hidden="true"></span>
|
|
<span v-if="!state.isSubmitting">Save</span>
|
|
<span v-else>Saving...</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal untuk Change Avatar -->
|
|
<div class="modal fade" ref="changeAvatarModalRef" id="ChangeAvatarModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
|
|
<div class="modal-dialog modal-dialog-centered modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">{{ state.changeAvatarTitle }}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input type="hidden" v-model="state.userId" id="UserId" name="UserId" />
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5>Uploader Area</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form ref="imageUploadRef" id="ImageUpload" class="dropzone"></form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@section scripts {
|
|
<script src="~/FrontEnd/Pages/Profiles/MyProfile.cshtml.js"></script>
|
|
} |