mirror of
https://github.com/Dadechin/XRoomDashboardFront.git
synced 2025-07-03 00:34:35 +00:00
show profile data
This commit is contained in:
parent
34324f447c
commit
4406002254
|
@ -13,14 +13,21 @@
|
|||
</div>
|
||||
<router-link to="/dashboard/edit-profile" class="profile-link">
|
||||
<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="text-wrapper-2">خوش آمدید...</div>
|
||||
<div class="text-wrapper-3">دانیال پژوهش کیا</div>
|
||||
<!-- Dynamic user name -->
|
||||
<div class="text-wrapper-3">{{ fullName }}</div>
|
||||
</div>
|
||||
<div class="notifications">
|
||||
<!-- <div class="notifications">
|
||||
<div class="notification-badge">4</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
|
@ -71,14 +78,36 @@
|
|||
<script>
|
||||
export default {
|
||||
name: 'SidebarMenu',
|
||||
methods: {
|
||||
isActive(path) {
|
||||
return this.$route.path === path
|
||||
}
|
||||
},
|
||||
data() {
|
||||
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;
|
||||
height: 72px;
|
||||
margin-left: 20px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.frame-2 {
|
||||
|
|
|
@ -65,6 +65,7 @@ export default {
|
|||
const token = response.data.token;
|
||||
const user = response.data.user;
|
||||
|
||||
|
||||
localStorage.setItem('token', token);
|
||||
localStorage.setItem('user', JSON.stringify(user));
|
||||
|
||||
|
|
|
@ -72,10 +72,22 @@
|
|||
<p class="section-description">
|
||||
این نماد در کنار نام شما و برای دیگران در واقعیت مجازی و در پلتفرم وب قابل مشاهده خواهد بود.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<img :src="userProfilePicUrl" class="profile-image" />
|
||||
|
||||
<input type="file" @change="uploadProfileImage" class="upload-input" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- User Info Section -->
|
||||
<div class="form-section">
|
||||
<h3>اطلاعات کاربر</h3>
|
||||
|
@ -124,7 +136,7 @@ export default {
|
|||
editForm: { first_name: '', last_name: '', email: '' },
|
||||
passwordForm: { current_password: '', new_password: '', confirm_password: '' },
|
||||
saving: false,
|
||||
userProfilePicUrl: 'https://i.imgur.com/QbXfV6C.png',
|
||||
// userProfilePicUrl: 'https://i.imgur.com/QbXfV6C.png',
|
||||
userAvatarUrl: 'https://i.imgur.com/QbXfV6C.png',
|
||||
baseUrl: 'http://194.62.43.230:8000'
|
||||
}
|
||||
|
@ -132,6 +144,13 @@ export default {
|
|||
created() {
|
||||
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: {
|
||||
async fetchUserData() {
|
||||
try {
|
||||
|
@ -286,7 +305,7 @@ input:disabled {
|
|||
.profile-image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
|
|
|
@ -260,13 +260,7 @@
|
|||
</div>
|
||||
</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>
|
||||
</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 (token) {
|
||||
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 (to.path === '/login') {
|
||||
|
@ -72,6 +82,7 @@ router.beforeEach(async (to, from, next) => {
|
|||
// Invalid token, clear storage and redirect to login
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem('user');
|
||||
localStorage.removeItem('customer');
|
||||
return next('/login');
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user