From 81fc3faf7acecf53eda13f7c2565ad19e60e58d9 Mon Sep 17 00:00:00 2001
From: Muammer Top <muammer@visiosoft.com.tr>
Date: Mon, 12 Apr 2021 09:47:42 +0300
Subject: [PATCH] edited profile page in base theme

---
 .../resources/assets/css/profile-nav.scss     |   4 +
 .../resources/assets/css/profile.scss         |  34 +-
 .../resources/assets/js/profile.js            |  19 +-
 .../resources/images/camera.svg               |  20 +
 .../resources/images/detail2.svg              |  19 +-
 .../resources/views/profile/detail.twig       | 362 ++++++------------
 .../views/profile/partials/navigation.twig    |  10 +
 .../resources/views/profile/password.twig     |  66 ++++
 .../resources/views/profile/profile.twig      |  99 +++++
 .../Http/Controller/MyProfileController.php   |  11 +-
 .../src/Profile/User/UserFormBuilder.php      |   1 +
 .../src/ProfileModuleServiceProvider.php      |   8 +
 .../resources/js/upload.js                    |  10 +-
 13 files changed, 417 insertions(+), 246 deletions(-)
 create mode 100644 addons/default/visiosoft/profile-module/resources/images/camera.svg
 create mode 100644 addons/default/visiosoft/profile-module/resources/views/profile/password.twig
 create mode 100644 addons/default/visiosoft/profile-module/resources/views/profile/profile.twig

diff --git a/addons/default/visiosoft/profile-module/resources/assets/css/profile-nav.scss b/addons/default/visiosoft/profile-module/resources/assets/css/profile-nav.scss
index ee7d447f4..5b2993b64 100644
--- a/addons/default/visiosoft/profile-module/resources/assets/css/profile-nav.scss
+++ b/addons/default/visiosoft/profile-module/resources/assets/css/profile-nav.scss
@@ -66,6 +66,10 @@
       margin-right: .75rem;
       width: 1.5rem;
       height: 1.5rem;
+
+      path {
+        fill: rgb(80, 80, 80);
+      }
     }
 
     p {
diff --git a/addons/default/visiosoft/profile-module/resources/assets/css/profile.scss b/addons/default/visiosoft/profile-module/resources/assets/css/profile.scss
index 7f4046095..969aa6755 100644
--- a/addons/default/visiosoft/profile-module/resources/assets/css/profile.scss
+++ b/addons/default/visiosoft/profile-module/resources/assets/css/profile.scss
@@ -60,10 +60,10 @@
 		}
 
 		img {
-			width: 165px;
+			width: 130px;
 			height: 130px;
 			object-fit: cover;
-			border-radius: 20px;
+			border-radius: 50%;
 			@media (max-width: 992px) {
 				display: flex;
 				justify-content: center;
@@ -113,6 +113,36 @@
 				height: 34px;
 			}
 		}
+
+		form {
+			.new-profile-image {
+				position: relative;
+				bottom: 25px;
+				right: 30px;
+				cursor: pointer;
+
+				@media (max-width: 992px) {
+					bottom: 120px;
+					left: 100px;
+					top: auto;
+				}
+
+				@media (max-width: 576px) {
+					bottom: auto;
+					left: auto;
+					top: 10px;
+				}
+			}
+			.file-field {
+				visibility: hidden;
+				height: 0;
+				width: 0;
+
+				#file-modal {
+					visibility: visible;
+				}
+			}
+		}
 	}
 
 	#nav-details {
diff --git a/addons/default/visiosoft/profile-module/resources/assets/js/profile.js b/addons/default/visiosoft/profile-module/resources/assets/js/profile.js
index e33e21fce..c3a99ce4d 100644
--- a/addons/default/visiosoft/profile-module/resources/assets/js/profile.js
+++ b/addons/default/visiosoft/profile-module/resources/assets/js/profile.js
@@ -1 +1,18 @@
-phoneMask("input[name='gsm_phone'],input[name='office_phone'],input[name='land_phone']")
\ No newline at end of file
+phoneMask("input[name='gsm_phone'],input[name='office_phone'],input[name='land_phone']")
+
+$('.new-profile-image').on('click', () => {
+    $('#file').parent().find('a').click()
+})
+
+//Listen to your custom event
+window.addEventListener('uploadedSingleField', function (e) {
+    $('.uploaded .btn-success').on('click',function(e){
+        e.preventDefault();
+
+        let id_selected = $(this).attr('data-file');
+        $.get(REQUEST_ROOT_PATH + '/streams/media-field_type/selected?uploaded=' +id_selected, function(data) {
+            let profile_image_preview_url = $('.file-rows-table').html(data).find('img').attr('src');
+            $('.profile-image img').attr('src', profile_image_preview_url);
+        })
+    })
+});
\ No newline at end of file
diff --git a/addons/default/visiosoft/profile-module/resources/images/camera.svg b/addons/default/visiosoft/profile-module/resources/images/camera.svg
new file mode 100644
index 000000000..5bc280fa2
--- /dev/null
+++ b/addons/default/visiosoft/profile-module/resources/images/camera.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <g id="Group_42352" data-name="Group 42352" transform="translate(20838 -6482.5)">
+    <g id="Ellipse_372" data-name="Ellipse 372" transform="translate(-20838 6482.5)" fill="#fff" stroke="#f3f5f6" stroke-width="1">
+      <circle cx="16" cy="16" r="16" stroke="none"/>
+      <circle cx="16" cy="16" r="15.5" fill="none"/>
+    </g>
+    <g id="photo-camera" transform="translate(-20829.498 6491.217)">
+      <g id="Group_41900" data-name="Group 41900" transform="translate(0 0)">
+        <g id="Group_41899" data-name="Group 41899">
+          <path id="Path_12815" data-name="Path 12815" d="M14.412,33.846A.586.586,0,0,0,15,33.26V29.452a2.346,2.346,0,0,0-2.343-2.343h-.889a.586.586,0,0,1-.555-.4l-.177-.521A1.757,1.757,0,0,0,9.369,25H5.626a1.762,1.762,0,0,0-1.653,1.161l-.2.562a.587.587,0,0,1-.551.387H2.343A2.346,2.346,0,0,0,0,29.452v6.737a2.346,2.346,0,0,0,2.343,2.343H12.654A2.346,2.346,0,0,0,15,36.189a.586.586,0,0,0-1.172,0,1.173,1.173,0,0,1-1.172,1.172H2.343a1.173,1.173,0,0,1-1.172-1.172V29.452a1.173,1.173,0,0,1,1.172-1.172H3.22A1.762,1.762,0,0,0,4.873,27.12l.2-.562a.587.587,0,0,1,.551-.387H9.369a.586.586,0,0,1,.555.4l.177.521a1.757,1.757,0,0,0,1.664,1.191h.889a1.173,1.173,0,0,1,1.172,1.172V33.26A.586.586,0,0,0,14.412,33.846Z" transform="translate(0 -25)" fill="#505050"/>
+        </g>
+      </g>
+      <g id="Group_41902" data-name="Group 41902" transform="translate(3.867 3.867)">
+        <g id="Group_41901" data-name="Group 41901" transform="translate(0 0)">
+          <path id="Path_12816" data-name="Path 12816" d="M135.661,157a3.661,3.661,0,1,0,3.661,3.661A3.666,3.666,0,0,0,135.661,157Zm0,6.151a2.49,2.49,0,1,1,2.49-2.49A2.493,2.493,0,0,1,135.661,163.151Z" transform="translate(-132 -157)" fill="#505050"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/default/visiosoft/profile-module/resources/images/detail2.svg b/addons/default/visiosoft/profile-module/resources/images/detail2.svg
index 8e883c42d..763832a55 100644
--- a/addons/default/visiosoft/profile-module/resources/images/detail2.svg
+++ b/addons/default/visiosoft/profile-module/resources/images/detail2.svg
@@ -1,3 +1,18 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="17.372" height="19.384" viewBox="0 0 17.372 19.384">
-  <path id="Path_6076" data-name="Path 6076" d="M6892.426,1441.155a.756.756,0,0,1-.183-.749l.905-2.98a.76.76,0,0,1,.189-.316l4.157-4.148a2.272,2.272,0,0,1,3.212,3.213l-4.148,4.14a.752.752,0,0,1-.333.194l-3.056.847a.756.756,0,0,1-.744-.2Zm2.116-3.107-.449,1.481,1.537-.426,2.789-2.783-1.071-1.071Zm4.023-4.014-.146.146,1.071,1.071.146-.146a.757.757,0,0,0-1.071-1.071Zm-11.537,7.35a3.033,3.033,0,0,1-3.029-3.028v-13.326a3.033,3.033,0,0,1,3.029-3.029h9.31a3.032,3.032,0,0,1,3.028,3.029v4.657a.757.757,0,0,1-1.515,0v-4.657a1.516,1.516,0,0,0-1.514-1.515h-9.31a1.517,1.517,0,0,0-1.515,1.515v13.326a1.516,1.516,0,0,0,1.515,1.514h2.532a.757.757,0,0,1,0,1.514Zm.753-7.269a.757.757,0,0,1,0-1.514h4.736a.757.757,0,0,1,0,1.514Zm0-3.029a.757.757,0,0,1,0-1.515h7.8a.757.757,0,1,1,0,1.515Zm0-3.029a.757.757,0,0,1,0-1.514h7.8a.757.757,0,1,1,0,1.514Z" transform="translate(-6883.999 -1422)" fill="#505050"/>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17.221" height="17.807" viewBox="0 0 17.221 17.807">
+  <defs>
+    <clipPath id="clip-path">
+      <rect width="17.221" height="17.807" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="view-details" clip-path="url(#clip-path)">
+    <g id="view-details-2" data-name="view-details" transform="translate(-0.219)">
+      <g id="Group_42347" data-name="Group 42347" transform="translate(0.219)">
+        <path id="Path_13048" data-name="Path 13048" d="M14.812,13.96a2.814,2.814,0,1,0-1.069,1.071l.683-.228.106-.233Zm-1.27-.2a1.724,1.724,0,0,1-2.376,0,1.681,1.681,0,1,1,2.376,0Z" transform="translate(-0.493 -0.287)" fill="#b9c0cf"/>
+        <path id="Path_13049" data-name="Path 13049" d="M12.946,15.821H1.809A.319.319,0,0,1,1.49,15.5V1.59a.319.319,0,0,1,.319-.319H12.946a.318.318,0,0,1,.318.319v7.1a3.329,3.329,0,0,1,1.271.579V1.59A1.591,1.591,0,0,0,12.946,0H1.809A1.592,1.592,0,0,0,.219,1.59V15.5a1.592,1.592,0,0,0,1.59,1.589H12.946c.665,0,.979-.157,1.216-.738l-.577-.577A1.674,1.674,0,0,1,12.946,15.821Z" transform="translate(-0.219 0)" fill="#b9c0cf"/>
+        <path id="Path_13050" data-name="Path 13050" d="M-22492.854,6325.425l2.533,2.746" transform="translate(22506.482 -6311.424)" fill="none" stroke="#b9c0cf" stroke-linecap="round" stroke-width="1.5"/>
+        <path id="Path_13051" data-name="Path 13051" d="M-22503.641,6315.707h6.539" transform="translate(22506.803 -6311.138)" fill="none" stroke="#b9c0cf" stroke-linecap="round" stroke-width="1.5"/>
+        <path id="Path_13052" data-name="Path 13052" d="M-22503.641,6315.707h6.539" transform="translate(22506.803 -6307.943)" fill="none" stroke="#b9c0cf" stroke-linecap="round" stroke-width="1.5"/>
+      </g>
+    </g>
+  </g>
 </svg>
diff --git a/addons/default/visiosoft/profile-module/resources/views/profile/detail.twig b/addons/default/visiosoft/profile-module/resources/views/profile/detail.twig
index 9d20e64b4..cb832fd1f 100644
--- a/addons/default/visiosoft/profile-module/resources/views/profile/detail.twig
+++ b/addons/default/visiosoft/profile-module/resources/views/profile/detail.twig
@@ -18,246 +18,130 @@
 
             <div class="row px-3">
 
-                <!-- User Profile Form Section-->
-                <div class="col-md-12 bg-light profile-section pb-4">
-                    <nav>
-                        <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
-                            <a class="nav-item nav-link active text-dark d-flex justify-content-center align-items-center" id="nav-profile-tab" data-toggle="tab"
-                               href="#nav-profile"
-                               role="tab" aria-controls="nav-profile" aria-selected="true">
-                                {{ img('visiosoft.module.profile::images/profile2.svg').data|raw }}
-                                {{ trans('visiosoft.module.profile::field.profile.name') }}
-                            </a>
-                            <a class="nav-item nav-link text-dark d-flex justify-content-center align-items-center" id="nav-details-tab" data-toggle="tab"
-                               href="#nav-details"
-                               role="tab" aria-controls="nav-details" aria-selected="false">
-                                {{ img('visiosoft.module.profile::images/detail2.svg').data|raw }}
-                                {{ trans('visiosoft.module.profile::field.details.name') }}
-                            </a>
-                            <a class="nav-item nav-link text-dark d-flex justify-content-center align-items-center" id="nav-password-tab" data-toggle="tab"
-                               href="#nav-password"
-                               role="tab" aria-controls="nav-password" aria-selected="false">
-                                {{ img('visiosoft.module.profile::images/password2.svg').data|raw }}
-                                {{ trans('visiosoft.module.profile::field.password.name') }}
-                            </a>
-                            {{ addBlock('profile/detail/content-tab')|raw }}
-                        </div>
-                    </nav>
+				<!-- User Profile Form Section-->
+				<div class="col-md-12 bg-light profile-section py-4 px-5">
+					<div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
+						<div class="tab-pane fade show active" id="nav-details" role="tabpanel"
+						     aria-labelledby="nav-details-tab">
+							{% set profileForm = form('profile').entry(user.id).get() %}
+							{{ profileForm.open({ 'id': 'profile-detail' })|raw }}
+							<div class="row">
+								<div class="col-md-6">
+									<div class=" form-group">
+										<label class="control-label font-weight-bold">{{ trans("visiosoft.module.profile::field.identification_number.name") }}</label>
+										{{ profileForm.fields.identification_number.input|raw }}
+									</div>
+								</div>
+								<div class="col-md-6">
+									<div class="form-group required-profile-phone-field">
+										<label class="control-label font-weight-bold">
+											{{ profileForm.fields.gsm_phone.label }}
+										</label>
+										{{ profileForm.fields.gsm_phone.setAttributes({'maxlength': '14'}).input|raw }}
+									</div>
+								</div>
+								<div class="col-md-6">
+									<div class="form-group required-profile-phone-field">
+										<label class="control-label font-weight-bold">
+											{{ profileForm.fields.office_phone.label }}
+										</label>
+										{{ profileForm.fields.office_phone.setAttributes({'maxlength': '14'}).input|raw }}
+									</div>
+								</div>
+								<div class="col-md-6">
+									<div class="form-group required-profile-phone-field">
+										<label class="control-label font-weight-bold">
+											{{ profileForm.fields.land_phone.label }}
+										</label>
+										{{ profileForm.fields.land_phone.setAttributes({'maxlength': '14'}).input|raw }}
+									</div>
+								</div>
+								<div class="col-md-12">
+									<div class="form-group birthday-field">
+										<label class="control-label font-weight-bold">
+											{{ trans("visiosoft.module.profile::field.birthday.name") }}
+										</label>
+										{{ profileForm.fields.birthday.configSet('date_format','Y-m-d').setPlaceholder(now|date(config_get('streams::datetime.date_format'))).input|raw }}
+									</div>
+								</div>
+								<div class="col-md-6">
+									<div class="form-group facebook_address-field">
+										<label class="control-label font-weight-bold">
+											{{ trans("visiosoft.module.profile::field.facebook_address.name") }}
+										</label>
+										{{ profileForm.fields.facebook_address.input|raw }}
+									</div>
+								</div>
+								<div class="col-md-6">
+									<div class="form-group google_address-field">
+										<label class="control-label font-weight-bold">
+											{{ trans("visiosoft.module.profile::field.google_address.name") }}
+										</label>
+										{{ profileForm.fields.google_address.input|raw }}
+									</div>
+								</div>
+								{% if setting_value('visiosoft.module.profile::show_education_profession') %}
+									<div class="col-md-12">
+										<div class="form-group education-field">
+											<label class="control-label font-weight-bold">
+												{{ trans("visiosoft.module.profile::field.education.name") }}
+											</label>
+											{{ profileForm.fields.education.setPlaceholder(trans('visiosoft.module.profile::field.choose_an_option')).input|raw }}
+										</div>
+									</div>
+									<div class="col-md-12">
+										<div class="form-group education-part-field">
+											<label class="control-label font-weight-bold">
+												{{ trans("visiosoft.module.profile::field.education_part.name") }}
+											</label>
+											{{ profileForm.fields.education_part.setPlaceholder(trans('visiosoft.module.profile::field.choose_an_option')).input|raw }}
+										</div>
+									</div>
+									<div class="col-md-12">
+										<div class="form-group profession-field">
+											<label class="control-label font-weight-bold">
+												{{ trans("visiosoft.module.profile::field.profession.name") }}
+											</label>
+											<select name="profession" class="custom-select form-control"
+											        data-field="profession" data-field_name="profession"
+											        data-provides="anomaly.field_type.select" id="profession">
+												<option value="">
+													{{ trans('visiosoft.module.profile::field.choose_an_option') }}
+												</option>
+												{% for profession in setting_value('visiosoft.module.profile::profession') %}
+													<option value="{{ profession }}"
+														{{ profileForm.fields.profession.value == profession ? 'selected' }}>
+														{{ profession }}
+													</option>
+												{% endfor %}
+											</select>
+										</div>
+									</div>
+								{% endif %}
+								<div class="col-md-12{{ setting_value('visiosoft.module.profile::hide_register_type_profile') ? ' d-none' }}">
+									<div class="form-group">
+										<label class="control-label font-weight-bold">
+											{{ trans("visiosoft.module.profile::field.register_type.name") }}
+										</label>
+										{{ profileForm.fields.register_type.setPlaceholder(trans('visiosoft.module.profile::field.choose_an_option')).input|raw }}
+									</div>
+								</div>
+								<div class="col-md-12 text-right">
+									<div class="form-group d-flex align-items-center justify-content-end">
+										{{ addBlock('profile/detail/profile-detail-form/actions')|raw }}
 
-                    <div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
-                        <div class="tab-pane fade show active" id="nav-profile" role="tabpanel"
-                             aria-labelledby="nav-profile-tab">
-                            <div>
-                                {% set userForm = form('userProfile').entry(user.id).get() %}
-                                {{ userForm.open()|raw }}
-                                <div class="mt-4 d-flex profile--desc flex-column flex-lg-row">
-                                    <div class="d-flex d-sm-block m-auto m-sm-0 mr-sm-3">
-                                        <img src="{{ profile_photo }}">
-                                    </div>
-                                    <div class="pt-2 d-flex flex-column flex-sm-row d-sm-block m-auto m-sm-0">
-                                        <p class="mb-1 username">{{ user.name }}</p>
-                                        <p class="mb-1 last-login d-flex d-sm-block m-auto m-sm-0">
-                                            {{ auth_user().last_login_at|date(config_get('streams::datetime.date_format') ~ ' - ' ~ config_get('streams::datetime.time_format')) }}
-                                        </p>
-                                    </div>
-                                </div>
-                                <div class="mt-4">
-                                    <div class="profile--form--area">
-                                        <div class="form-group">
-                                            <label class="control-label font-weight-bold">
-                                                {{ trans("visiosoft.module.profile::field.first_name.name") }}
-                                            </label>
-                                            {{ userForm.fields.first_name.input|raw }}
-
-                                        </div>
-                                        <div class="form-group">
-                                            <label class="control-label font-weight-bold">
-                                                {{ trans("visiosoft.module.profile::field.last_name.name") }}
-                                            </label>
-                                            {{ userForm.fields.last_name.input|raw }}
-                                        </div>
-                                        <div class="form-group">
-                                            <label class="control-label font-weight-bold">
-                                                {{ trans("visiosoft.module.profile::field.email.name") }}
-                                            </label>
-                                            {{ userForm.fields.email.input|raw }}
-                                        </div>
-                                    </div>
-                                    <div class="form-group text-right">
-                                        {{ userForm.actions|raw }}
-                                    </div>
-
-                                    <div class="account--disable--content d-flex align-item-center justify-content-center mx-auto">
-                                        <div class="d-flex justify-content-center align-items-center">
-                                            <p class="mb-0 mr-4">
-                                                {{ trans('visiosoft.module.profile::message.disable_account') }}
-                                            </p>
-                                            <a href="{{ url_route("visiosoft.module.profile::profile_close_account") }}" class="btn btn-danger account-freeze text-white">
-                                                {{ trans("visiosoft.module.profile::field.disable_account.name") }}
-                                            </a>
-                                        </div>
-                                    </div>
-                                </div>
-                                {{ userForm.close()|raw }}
-                            </div>
-                        </div>
-                        <div class="tab-pane fade" id="nav-details" role="tabpanel"
-                             aria-labelledby="nav-details-tab">
-                            {% set profileForm = form('profile').entry(user.id).get() %}
-                            {{ profileForm.open({ 'id': 'profile-detail' })|raw }}
-                            <div class="row">
-                                <div class="col-md-12 profile-pic">
-                                    {% if setting_value('visiosoft.module.profile::upload_avatar') %}
-                                        <div class="form-group">
-                                            {{ profileForm.fields.file|raw }}
-                                        </div>
-                                    {% endif %}
-                                </div>
-                                <div class="col-md-6">
-                                    <div class=" form-group">
-                                        <label class="control-label font-weight-bold">{{ trans("visiosoft.module.profile::field.identification_number.name") }}</label>
-                                        {{ profileForm.fields.identification_number.input|raw }}
-                                    </div>
-                                </div>
-                                <div class="col-md-6">
-                                    <div class="form-group required-profile-phone-field">
-                                        <label class="control-label font-weight-bold">
-                                            {{ profileForm.fields.gsm_phone.label }}
-                                        </label>
-                                        {{ profileForm.fields.gsm_phone.setAttributes({'maxlength': '14'}).input|raw }}
-                                    </div>
-                                </div>
-                                <div class="col-md-6">
-                                    <div class="form-group required-profile-phone-field">
-                                        <label class="control-label font-weight-bold">
-                                            {{ profileForm.fields.office_phone.label }}
-                                        </label>
-                                        {{ profileForm.fields.office_phone.setAttributes({'maxlength': '14'}).input|raw }}
-                                    </div>
-                                </div>
-                                <div class="col-md-6">
-                                    <div class="form-group required-profile-phone-field">
-                                        <label class="control-label font-weight-bold">
-                                            {{ profileForm.fields.land_phone.label }}
-                                        </label>
-                                        {{ profileForm.fields.land_phone.setAttributes({'maxlength': '14'}).input|raw }}
-                                    </div>
-                                </div>
-                                <div class="col-md-12">
-                                    <div class="form-group birthday-field">
-                                        <label class="control-label font-weight-bold">
-                                            {{ trans("visiosoft.module.profile::field.birthday.name") }}
-                                        </label>
-                                        {{ profileForm.fields.birthday.configSet('date_format','Y-m-d').setPlaceholder(now|date(config_get('streams::datetime.date_format'))).input|raw }}
-                                    </div>
-                                </div>
-                                <div class="col-md-6">
-                                    <div class="form-group facebook_address-field">
-                                        <label class="control-label font-weight-bold">
-                                            {{ trans("visiosoft.module.profile::field.facebook_address.name") }}
-                                        </label>
-                                        {{ profileForm.fields.facebook_address.input|raw }}
-                                    </div>
-                                </div>
-                                <div class="col-md-6">
-                                    <div class="form-group google_address-field">
-                                        <label class="control-label font-weight-bold">
-                                            {{ trans("visiosoft.module.profile::field.google_address.name") }}
-                                        </label>
-                                        {{ profileForm.fields.google_address.input|raw }}
-                                    </div>
-                                </div>
-                                {% if setting_value('visiosoft.module.profile::show_education_profession') %}
-                                    <div class="col-md-12">
-                                        <div class="form-group education-field">
-                                            <label class="control-label font-weight-bold">
-                                                {{ trans("visiosoft.module.profile::field.education.name") }}
-                                            </label>
-                                            {{ profileForm.fields.education.setPlaceholder(trans('visiosoft.module.profile::field.choose_an_option')).input|raw }}
-                                        </div>
-                                    </div>
-                                    <div class="col-md-12">
-                                    <div class="form-group education-part-field">
-                                            <label class="control-label font-weight-bold">
-                                                {{ trans("visiosoft.module.profile::field.education_part.name") }}
-                                            </label>
-                                            {{ profileForm.fields.education_part.setPlaceholder(trans('visiosoft.module.profile::field.choose_an_option')).input|raw }}
-                                        </div>
-                                    </div>
-                                    <div class="col-md-12">
-                                        <div class="form-group profession-field">
-                                            <label class="control-label font-weight-bold">
-                                                {{ trans("visiosoft.module.profile::field.profession.name") }}
-                                            </label>
-                                            <select name="profession" class="custom-select form-control"
-                                                    data-field="profession" data-field_name="profession"
-                                                    data-provides="anomaly.field_type.select" id="profession">
-                                                <option value="">
-                                                    {{ trans('visiosoft.module.profile::field.choose_an_option') }}
-                                                </option>
-                                                {% for profession in setting_value('visiosoft.module.profile::profession') %}
-                                                    <option value="{{ profession }}"
-                                                            {{ profileForm.fields.profession.value == profession ? 'selected' }}>
-                                                        {{ profession }}
-                                                    </option>
-                                                {% endfor %}
-                                            </select>
-                                        </div>
-                                    </div>
-                                {% endif %}
-                                <div class="col-md-12{{ setting_value('visiosoft.module.profile::hide_register_type_profile') ? ' d-none' }}">
-                                    <div class="form-group">
-                                        <label class="control-label font-weight-bold">
-                                            {{ trans("visiosoft.module.profile::field.register_type.name") }}
-                                        </label>
-                                        {{ profileForm.fields.register_type.setPlaceholder(trans('visiosoft.module.profile::field.choose_an_option')).input|raw }}
-                                    </div>
-                                </div>
-                                <div class="col-md-12 text-right">
-                                    <div class="form-group d-flex align-items-center justify-content-end">
-                                        {{ addBlock('profile/detail/profile-detail-form/actions')|raw }}
-
-                                        {{ profileForm.actions|raw }}
-                                    </div>
-                                </div>
-                            </div>
-                            {{ profileForm.close()|raw }}
-                        </div>
-                        <div class="tab-pane fade" id="nav-password" role="tabpanel" aria-labelledby="nav-password-tab">
-                            {% set passwordForm = form('updatePassword').get() %}
-
-                            {{ passwordForm.open()|raw }}
-                            <div class="row">
-                                <div class="col-12">
-                                    <div class="form-group">
-                                        <label class="font-weight-bold">{{ trans("visiosoft.module.profile::field.old_password.name") }}</label>
-                                        {{ passwordForm.fields.old_password.input|raw }}
-                                    </div>
-                                </div>
-                                <div class="col-md-6">
-                                    <div class="form-group">
-                                        <label class="font-weight-bold">{{ trans("visiosoft.module.profile::field.new_password.name") }}</label>
-                                        {{ passwordForm.fields.new_password.input|raw }}
-                                    </div>
-                                </div>
-                                <div class="col-md-6">
-                                    <div class="form-group">
-                                        <label class="font-weight-bold">{{ trans("visiosoft.module.profile::field.re_new_password.name") }}</label>
-                                        {{ passwordForm.fields.re_new_password.input|raw }}
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="form-group text-right">
-                                {{ passwordForm.actions|raw }}
-                            </div>
-                        </div>
-                        {{ passwordForm.close|raw }}
-                        {{ addBlock('profile/detail/content')|raw }}
-                    </div>
-                    <!-- User Profile Form Section-->
-                </div>
-            </div>
-            <script>
+										{{ profileForm.actions|raw }}
+									</div>
+								</div>
+							</div>
+							{{ profileForm.close()|raw }}
+						</div>
+						{{ addBlock('profile/detail/content')|raw }}
+					</div>
+					<!-- User Profile Form Section-->
+				</div>
+			</div>
+			<script>
                 var choose_an_option = "{{ trans('visiosoft.module.profile::field.choose_an_option') }}"
             </script>
         {% endblock %}
diff --git a/addons/default/visiosoft/profile-module/resources/views/profile/partials/navigation.twig b/addons/default/visiosoft/profile-module/resources/views/profile/partials/navigation.twig
index 6feed3884..0ca96c345 100644
--- a/addons/default/visiosoft/profile-module/resources/views/profile/partials/navigation.twig
+++ b/addons/default/visiosoft/profile-module/resources/views/profile/partials/navigation.twig
@@ -16,6 +16,11 @@
         {{ img('visiosoft.module.profile::images/social-media.svg').data|raw }}
         <p>{{ trans('visiosoft.module.profile::addon.title') }}</p>
     </a>
+    <a href="{{ url_route('profile::detail') }}"
+       class="px-3 link-unstyled{{ app.request.pathinfo == '/profile/detail' ? ' active' : '' }}">
+        {{ img('visiosoft.module.profile::images/detail2.svg').data|raw }}
+        <p>{{ trans('visiosoft.module.profile::field.details.name') }}</p>
+    </a>
     {% set marketPlace = setting_value('visiosoft.module.advs::market_place') %}
     {% if marketPlace %}
         <a href="{{ url_route('profile::ads') }}"
@@ -32,6 +37,11 @@
 
     {{ addBlock('profile/navigation',{'marketPlace':marketPlace})|raw }}
 
+    <a href="{{ url_route('profile::password') }}"
+       class="px-3 link-unstyled{{ app.request.pathinfo == '/profile/password' ? ' active' : '' }}">
+        {{ img('visiosoft.module.profile::images/password2.svg').data|raw }}
+        <p>{{ trans('visiosoft.module.profile::field.password.name') }}</p>
+    </a>
     <a href="{{ url('logout') }}"
        class="px-3 link-unstyled d-flex d-md-none">
         {{ img('visiosoft.module.profile::images/logout.svg').data|raw }}
diff --git a/addons/default/visiosoft/profile-module/resources/views/profile/password.twig b/addons/default/visiosoft/profile-module/resources/views/profile/password.twig
new file mode 100644
index 000000000..aa71f8402
--- /dev/null
+++ b/addons/default/visiosoft/profile-module/resources/views/profile/password.twig
@@ -0,0 +1,66 @@
+{% extends "theme::layouts/default" %}
+
+{% block styles %}
+	<style>
+		{{ asset_inline("visiosoft.module.profile::assets/css/profile.scss") }}
+	</style>
+{% endblock %}
+
+{% block content %}
+	{% embed 'visiosoft.module.profile::profile/index' %}
+		{% block detail %}
+			{% set profile_photo = user.file %}
+			{% if profile_photo %}
+				{% set profile_photo = file(profile_photo.id).url %}
+			{% else %}
+				{% set profile_photo = img('visiosoft.module.profile::images/profile-default.png').url %}
+			{% endif %}
+
+			<div class="row px-3">
+
+				<!-- User Profile Form Section-->
+				<div class="col-md-12 bg-light profile-section py-4 px-5">
+					<div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
+						<div class="tab-pane fade show active" id="nav-password" role="tabpanel" aria-labelledby="nav-password-tab">
+							{% set passwordForm = form('updatePassword').get() %}
+
+							{{ passwordForm.open()|raw }}
+							<div class="row">
+								<div class="col-12">
+									<div class="form-group">
+										<label class="font-weight-bold">{{ trans("visiosoft.module.profile::field.old_password.name") }}</label>
+										{{ passwordForm.fields.old_password.input|raw }}
+									</div>
+								</div>
+								<div class="col-md-6">
+									<div class="form-group">
+										<label class="font-weight-bold">{{ trans("visiosoft.module.profile::field.new_password.name") }}</label>
+										{{ passwordForm.fields.new_password.input|raw }}
+									</div>
+								</div>
+								<div class="col-md-6">
+									<div class="form-group">
+										<label class="font-weight-bold">{{ trans("visiosoft.module.profile::field.re_new_password.name") }}</label>
+										{{ passwordForm.fields.re_new_password.input|raw }}
+									</div>
+								</div>
+							</div>
+							<div class="form-group text-right">
+								{{ passwordForm.actions|raw }}
+							</div>
+						</div>
+						{{ passwordForm.close|raw }}
+						{{ addBlock('profile/detail/content')|raw }}
+					</div>
+					<!-- User Profile Form Section-->
+				</div>
+			</div>
+			<script>
+                var choose_an_option = "{{ trans('visiosoft.module.profile::field.choose_an_option') }}"
+			</script>
+		{% endblock %}
+	{% endembed %}
+
+	{{ asset_script("visiosoft.module.profile::assets/js/education.js") }}
+	{{ asset_add("scripts.js", "visiosoft.module.profile::assets/js/profile.js") }}
+{% endblock %}
\ No newline at end of file
diff --git a/addons/default/visiosoft/profile-module/resources/views/profile/profile.twig b/addons/default/visiosoft/profile-module/resources/views/profile/profile.twig
new file mode 100644
index 000000000..e2c2ee060
--- /dev/null
+++ b/addons/default/visiosoft/profile-module/resources/views/profile/profile.twig
@@ -0,0 +1,99 @@
+{% extends "theme::layouts/default" %}
+
+{% block styles %}
+    <style>
+        {{ asset_inline("visiosoft.module.profile::assets/css/profile.scss") }}
+    </style>
+{% endblock %}
+
+{% block content %}
+    {% embed 'visiosoft.module.profile::profile/index' %}
+        {% block detail %}
+            {% set profile_photo = user.file %}
+            {% if profile_photo %}
+                {% set profile_photo = file(profile_photo.id).url %}
+            {% else %}
+                {% set profile_photo = img('visiosoft.module.profile::images/profile-default.png').url %}
+            {% endif %}
+
+            <div class="row px-3">
+
+                <!-- User Profile Form Section-->
+                <div class="col-md-12 bg-light profile-section pb-4 px-5">
+                    <div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
+                        <div class="tab-pane fade show active" id="nav-profile" role="tabpanel"
+                             aria-labelledby="nav-profile-tab">
+                            <div>
+                                {% set userForm = form('userProfile').entry(user.id).get() %}
+                                {{ userForm.open()|raw }}
+                                <div class="mt-4 d-flex profile--desc flex-column flex-lg-row">
+                                    <div class="profile-image d-flex d-sm-block m-auto m-sm-0 mr-sm-3">
+                                        <img src="{{ profile_photo }}">
+                                        <i class="new-profile-image">{{ img('visiosoft.module.profile::images/camera.svg').data|raw }}</i>
+                                        {% if setting_value('visiosoft.module.profile::upload_avatar') %}
+                                            <div class="form-group">
+                                                {{ userForm.fields.file|raw }}
+                                            </div>
+                                        {% endif %}
+                                    </div>
+                                    <div class="pt-2 d-flex flex-column flex-sm-row d-sm-block m-auto m-sm-0">
+                                        <p class="mb-1 username">{{ user.name }}</p>
+                                        <p class="mb-1 last-login d-flex d-sm-block m-auto m-sm-0">
+                                            {{ auth_user().last_login_at|date(config_get('streams::datetime.date_format') ~ ' - ' ~ config_get('streams::datetime.time_format')) }}
+                                        </p>
+                                    </div>
+                                </div>
+                                <div class="mt-4">
+                                    <div class="profile--form--area">
+                                        <div class="form-group">
+                                            <label class="control-label font-weight-bold">
+                                                {{ trans("visiosoft.module.profile::field.first_name.name") }}
+                                            </label>
+                                            {{ userForm.fields.first_name.input|raw }}
+
+                                        </div>
+                                        <div class="form-group">
+                                            <label class="control-label font-weight-bold">
+                                                {{ trans("visiosoft.module.profile::field.last_name.name") }}
+                                            </label>
+                                            {{ userForm.fields.last_name.input|raw }}
+                                        </div>
+                                        <div class="form-group">
+                                            <label class="control-label font-weight-bold">
+                                                {{ trans("visiosoft.module.profile::field.email.name") }}
+                                            </label>
+                                            {{ userForm.fields.email.input|raw }}
+                                        </div>
+                                    </div>
+                                    <div class="form-group text-right">
+                                        {{ userForm.actions|raw }}
+                                    </div>
+
+                                    <div class="account--disable--content d-flex align-item-center justify-content-center mx-auto">
+                                        <div class="d-flex justify-content-center align-items-center">
+                                            <p class="mb-0 mr-4">
+                                                {{ trans('visiosoft.module.profile::message.disable_account') }}
+                                            </p>
+                                            <a href="{{ url_route("visiosoft.module.profile::profile_close_account") }}" class="btn btn-danger account-freeze text-white">
+                                                {{ trans("visiosoft.module.profile::field.disable_account.name") }}
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                                {{ userForm.close()|raw }}
+                            </div>
+                        </div>
+                        {{ addBlock('profile/detail/content')|raw }}
+                    </div>
+                    <!-- User Profile Form Section-->
+                </div>
+            </div>
+            <script>
+                var choose_an_option = "{{ trans('visiosoft.module.profile::field.choose_an_option') }}"
+            </script>
+        {% endblock %}
+    {% endembed %}
+
+    {{ asset_script("visiosoft.module.profile::assets/js/education.js") }}
+    {{ asset_add("scripts.js", "visiosoft.module.profile::assets/js/profile.js") }}
+{% endblock %}
\ No newline at end of file
diff --git a/addons/default/visiosoft/profile-module/src/Http/Controller/MyProfileController.php b/addons/default/visiosoft/profile-module/src/Http/Controller/MyProfileController.php
index 89264aa4e..02b277336 100644
--- a/addons/default/visiosoft/profile-module/src/Http/Controller/MyProfileController.php
+++ b/addons/default/visiosoft/profile-module/src/Http/Controller/MyProfileController.php
@@ -52,10 +52,19 @@ class MyProfileController extends PublicController
 
         $country = CountryModel::all();
 
-        return $this->view->make('visiosoft.module.profile::profile.detail',
+        return $this->view->make('visiosoft.module.profile::profile.profile',
             compact('user', 'country', 'form', 'advs_count'));
     }
 
+    public function detail(ProfileFormBuilder $form){
+	    $user = $this->userRepository->find(Auth::id());
+	    $country = CountryModel::all();
+	    return $this->view->make('visiosoft.module.profile::profile.detail', compact('user', 'country', 'form'));
+    }
+
+    public function password(){
+	    return $this->view->make('visiosoft.module.profile::profile.password');
+    }
 
     public function extendAds($id, $type, SettingRepositoryInterface $settings)
     {
diff --git a/addons/default/visiosoft/profile-module/src/Profile/User/UserFormBuilder.php b/addons/default/visiosoft/profile-module/src/Profile/User/UserFormBuilder.php
index db48ea612..c47234ad1 100644
--- a/addons/default/visiosoft/profile-module/src/Profile/User/UserFormBuilder.php
+++ b/addons/default/visiosoft/profile-module/src/Profile/User/UserFormBuilder.php
@@ -9,6 +9,7 @@ class UserFormBuilder extends FormBuilder
     protected $model = UserModel::class;
 
     protected $fields = [
+    	'file',
         'first_name' => [
             'required' => true,
         ],
diff --git a/addons/default/visiosoft/profile-module/src/ProfileModuleServiceProvider.php b/addons/default/visiosoft/profile-module/src/ProfileModuleServiceProvider.php
index ea0367054..e057acba9 100644
--- a/addons/default/visiosoft/profile-module/src/ProfileModuleServiceProvider.php
+++ b/addons/default/visiosoft/profile-module/src/ProfileModuleServiceProvider.php
@@ -63,6 +63,14 @@ class ProfileModuleServiceProvider extends AddonServiceProvider
             'as' => 'profile::profile',
             'uses' => 'Visiosoft\ProfileModule\Http\Controller\MyProfileController@home'
         ],
+	    'profile/detail' => [
+		    'as' => 'profile::detail',
+		    'uses' => 'Visiosoft\ProfileModule\Http\Controller\MyProfileController@detail'
+	    ],
+	    'profile/password' => [
+		    'as' => 'profile::password',
+		    'uses' => 'Visiosoft\ProfileModule\Http\Controller\MyProfileController@password'
+	    ],
         'profile/class/status/{id},{type}' => 'Visiosoft\ProfileModule\Http\Controller\MyProfileController@statusAds',
         'profile/class/extendTime/{id},{type}' => 'Visiosoft\ProfileModule\Http\Controller\MyProfileController@extendAds',
         'profile/message/show/{id}' => 'Visiosoft\ProfileModule\Http\Controller\MyProfileController@showMessage',
diff --git a/addons/default/visiosoft/singlefile-field_type/resources/js/upload.js b/addons/default/visiosoft/singlefile-field_type/resources/js/upload.js
index e0e651d52..5b5130b88 100644
--- a/addons/default/visiosoft/singlefile-field_type/resources/js/upload.js
+++ b/addons/default/visiosoft/singlefile-field_type/resources/js/upload.js
@@ -85,6 +85,14 @@ $(function () {
 
         uploader.find('.uploaded .modal-body').html(element.data('loading') + '...');
 
-        uploader.find('.uploaded').load(REQUEST_ROOT_PATH + '/streams/singlefile-field_type/recent?uploaded=' + uploaded.join(','));
+        $.when(
+            $.get(REQUEST_ROOT_PATH + '/streams/singlefile-field_type/recent?uploaded=' + uploaded.join(','), function(data) {
+                uploader.find('.uploaded').html(data);
+            })
+        ).done(function() {
+            let changedPhoto = new CustomEvent('uploadedSingleField');
+
+            window.dispatchEvent(changedPhoto);
+        });
     });
 });