show profile data

This commit is contained in:
mi1468 2025-05-03 17:09:59 +03:30
parent 34324f447c
commit 4406002254
5 changed files with 75 additions and 20 deletions

View File

@ -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 {

View File

@ -64,6 +64,7 @@ export default {
const response = await axios.post('http://194.62.43.230:8000/login', loginData);
const token = response.data.token;
const user = response.data.user;
localStorage.setItem('token', token);
localStorage.setItem('user', JSON.stringify(user));

View File

@ -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;
}

View File

@ -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>

View File

@ -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');
}
}