mirror of
https://github.com/Dadechin/XRoomDashboardFront.git
synced 2025-07-03 08:44:35 +00:00
show profile data
This commit is contained in:
parent
34324f447c
commit
4406002254
|
@ -13,14 +13,21 @@
|
||||||
</div>
|
</div>
|
||||||
<router-link to="/dashboard/edit-profile" class="profile-link">
|
<router-link to="/dashboard/edit-profile" class="profile-link">
|
||||||
<div class="profile-container">
|
<div class="profile-container">
|
||||||
<img class="profile" src="https://c.animaapp.com/m9nvumalUMfQbN/img/profile.png" />
|
<!-- Dynamic profile image -->
|
||||||
|
<img
|
||||||
|
class="profile"
|
||||||
|
:src="profileImageUrl"
|
||||||
|
alt="Profile Image"
|
||||||
|
@error="handleImageError"
|
||||||
|
/>
|
||||||
<div class="frame-2">
|
<div class="frame-2">
|
||||||
<div class="text-wrapper-2">خوش آمدید...</div>
|
<div class="text-wrapper-2">خوش آمدید...</div>
|
||||||
<div class="text-wrapper-3">دانیال پژوهش کیا</div>
|
<!-- Dynamic user name -->
|
||||||
|
<div class="text-wrapper-3">{{ fullName }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="notifications">
|
<!-- <div class="notifications">
|
||||||
<div class="notification-badge">4</div>
|
<div class="notification-badge">4</div>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
|
@ -71,14 +78,36 @@
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'SidebarMenu',
|
name: 'SidebarMenu',
|
||||||
methods: {
|
|
||||||
isActive(path) {
|
|
||||||
return this.$route.path === path
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
activeMenu: 'dashboard'
|
activeMenu: 'dashboard',
|
||||||
|
defaultProfileImage: 'https://c.animaapp.com/m9nvumalUMfQbN/img/profile.png'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
user() {
|
||||||
|
const user = localStorage.getItem('user');
|
||||||
|
return user ? JSON.parse(user) : null;
|
||||||
|
},
|
||||||
|
customer() {
|
||||||
|
const customer = localStorage.getItem('customer');
|
||||||
|
return customer ? JSON.parse(customer) : null;
|
||||||
|
},
|
||||||
|
fullName() {
|
||||||
|
if (!this.user) return 'دانیال پژوهش کیا'; // Default name
|
||||||
|
return `${this.user.first_name || ''} ${this.user.last_name || ''}`.trim() || 'کاربر';
|
||||||
|
},
|
||||||
|
profileImageUrl() {
|
||||||
|
if (!this.customer?.profile_img) return this.defaultProfileImage;
|
||||||
|
return `http://194.62.43.230:8000/media/${this.customer.profile_img}`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
isActive(path) {
|
||||||
|
return this.$route.path === path;
|
||||||
|
},
|
||||||
|
handleImageError(event) {
|
||||||
|
event.target.src = this.defaultProfileImage;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -155,6 +184,7 @@ export default {
|
||||||
width: 72px;
|
width: 72px;
|
||||||
height: 72px;
|
height: 72px;
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
|
border-radius: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.frame-2 {
|
.frame-2 {
|
||||||
|
|
|
@ -65,6 +65,7 @@ export default {
|
||||||
const token = response.data.token;
|
const token = response.data.token;
|
||||||
const user = response.data.user;
|
const user = response.data.user;
|
||||||
|
|
||||||
|
|
||||||
localStorage.setItem('token', token);
|
localStorage.setItem('token', token);
|
||||||
localStorage.setItem('user', JSON.stringify(user));
|
localStorage.setItem('user', JSON.stringify(user));
|
||||||
|
|
||||||
|
|
|
@ -72,10 +72,22 @@
|
||||||
<p class="section-description">
|
<p class="section-description">
|
||||||
این نماد در کنار نام شما و برای دیگران در واقعیت مجازی و در پلتفرم وب قابل مشاهده خواهد بود.
|
این نماد در کنار نام شما و برای دیگران در واقعیت مجازی و در پلتفرم وب قابل مشاهده خواهد بود.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<img :src="userProfilePicUrl" class="profile-image" />
|
<img :src="userProfilePicUrl" class="profile-image" />
|
||||||
|
|
||||||
<input type="file" @change="uploadProfileImage" class="upload-input" />
|
<input type="file" @change="uploadProfileImage" class="upload-input" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- User Info Section -->
|
<!-- User Info Section -->
|
||||||
<div class="form-section">
|
<div class="form-section">
|
||||||
<h3>اطلاعات کاربر</h3>
|
<h3>اطلاعات کاربر</h3>
|
||||||
|
@ -124,7 +136,7 @@ export default {
|
||||||
editForm: { first_name: '', last_name: '', email: '' },
|
editForm: { first_name: '', last_name: '', email: '' },
|
||||||
passwordForm: { current_password: '', new_password: '', confirm_password: '' },
|
passwordForm: { current_password: '', new_password: '', confirm_password: '' },
|
||||||
saving: false,
|
saving: false,
|
||||||
userProfilePicUrl: 'https://i.imgur.com/QbXfV6C.png',
|
// userProfilePicUrl: 'https://i.imgur.com/QbXfV6C.png',
|
||||||
userAvatarUrl: 'https://i.imgur.com/QbXfV6C.png',
|
userAvatarUrl: 'https://i.imgur.com/QbXfV6C.png',
|
||||||
baseUrl: 'http://194.62.43.230:8000'
|
baseUrl: 'http://194.62.43.230:8000'
|
||||||
}
|
}
|
||||||
|
@ -132,6 +144,13 @@ export default {
|
||||||
created() {
|
created() {
|
||||||
this.fetchUserData();
|
this.fetchUserData();
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
userProfilePicUrl() {
|
||||||
|
const customer = JSON.parse(localStorage.getItem('customer') || {});
|
||||||
|
if (!customer.profile_img) return this.defaultProfileImage;
|
||||||
|
return `http://194.62.43.230:8000/media/${customer.profile_img}`;
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async fetchUserData() {
|
async fetchUserData() {
|
||||||
try {
|
try {
|
||||||
|
@ -286,7 +305,7 @@ input:disabled {
|
||||||
.profile-image {
|
.profile-image {
|
||||||
width: 80px;
|
width: 80px;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
border-radius: 50%;
|
border-radius: 12px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -260,13 +260,7 @@
|
||||||
</div>
|
</div>
|
||||||
</dialog>
|
</dialog>
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<div class="footer">
|
|
||||||
<div class="text-wrapper-13">All Rights Reserved ©Dadechin</div>
|
|
||||||
<div class="logo">
|
|
||||||
<img class="clip-path-group" src="https://c.animaapp.com/m9nvumalUMfQbN/img/clip-path-group.png" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -60,7 +60,17 @@ router.beforeEach(async (to, from, next) => {
|
||||||
// If we have a token and it's an auth route, verify it
|
// If we have a token and it's an auth route, verify it
|
||||||
if (token) {
|
if (token) {
|
||||||
try {
|
try {
|
||||||
await axios.get('/getInfo');
|
// Make getInfo request
|
||||||
|
const response = await axios.get('/getInfo');
|
||||||
|
|
||||||
|
// Save customer and user data to localStorage
|
||||||
|
if (response.data?.customer) {
|
||||||
|
localStorage.setItem('customer', JSON.stringify(response.data.customer));
|
||||||
|
}
|
||||||
|
if (response.data?.user) {
|
||||||
|
localStorage.setItem('user', JSON.stringify(response.data.user));
|
||||||
|
}
|
||||||
|
localStorage.setItem('baseUrl','http://194.62.43.230:8000');
|
||||||
|
|
||||||
// If trying to access login page while authenticated, redirect to dashboard
|
// If trying to access login page while authenticated, redirect to dashboard
|
||||||
if (to.path === '/login') {
|
if (to.path === '/login') {
|
||||||
|
@ -72,6 +82,7 @@ router.beforeEach(async (to, from, next) => {
|
||||||
// Invalid token, clear storage and redirect to login
|
// Invalid token, clear storage and redirect to login
|
||||||
localStorage.removeItem('token');
|
localStorage.removeItem('token');
|
||||||
localStorage.removeItem('user');
|
localStorage.removeItem('user');
|
||||||
|
localStorage.removeItem('customer');
|
||||||
return next('/login');
|
return next('/login');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user