From 3866b1bb441ec8c940aa644c4974cc05d470f866 Mon Sep 17 00:00:00 2001
From: mi1468 <mahdi1468@gmail.com>
Date: Sat, 17 May 2025 12:54:12 +0330
Subject: [PATCH] added sms verification

---
 xroom-dashboard/src/api/axios.js              |   3 +
 xroom-dashboard/src/pages/ResetPassword.vue   |   2 +-
 xroom-dashboard/src/pages/SignupPage.vue      |   4 +-
 xroom-dashboard/src/pages/SmsVerification.vue | 248 ++++++++++++++++++
 xroom-dashboard/src/router/index.js           |  17 +-
 5 files changed, 268 insertions(+), 6 deletions(-)
 create mode 100644 xroom-dashboard/src/pages/SmsVerification.vue

diff --git a/xroom-dashboard/src/api/axios.js b/xroom-dashboard/src/api/axios.js
index e4d6ab3..c87162f 100644
--- a/xroom-dashboard/src/api/axios.js
+++ b/xroom-dashboard/src/api/axios.js
@@ -2,10 +2,13 @@
 import axios from 'axios';
 import { API_BASE_URL } from '@/config'; // Adjust the path if needed
 
+const token = localStorage.getItem('token');
 const apiClient = axios.create({
   baseURL: API_BASE_URL, // All requests will prepend this URL
   headers: {
     'Content-Type': 'application/json',
+    'Authorization': `token ${token}`,
+
   },
 });
 
diff --git a/xroom-dashboard/src/pages/ResetPassword.vue b/xroom-dashboard/src/pages/ResetPassword.vue
index c29c69d..2e1df2a 100644
--- a/xroom-dashboard/src/pages/ResetPassword.vue
+++ b/xroom-dashboard/src/pages/ResetPassword.vue
@@ -57,7 +57,7 @@
       <!-- Links -->
       <div class="login-link">
         <router-link to="/signup">ساخت حساب کاربری</router-link> |
-        <router-link to="/login">ورود</router-link>
+        <router-link to="/">ورود</router-link>
       </div>
     </div>
   </div>
diff --git a/xroom-dashboard/src/pages/SignupPage.vue b/xroom-dashboard/src/pages/SignupPage.vue
index ced589f..4d99e2f 100644
--- a/xroom-dashboard/src/pages/SignupPage.vue
+++ b/xroom-dashboard/src/pages/SignupPage.vue
@@ -45,7 +45,7 @@
 
       <!-- Login Link -->
       <div class="login-link">
-        <router-link to="/login">حساب کاربری دارید؟ وارد شوید</router-link>
+        <router-link to="/">حساب کاربری دارید؟ وارد شوید</router-link>
       </div>
     </div>
   </div>
@@ -80,7 +80,7 @@ export default {
         const response = await axios.post('http://194.62.43.230:8000/signup', signupData);
         console.log('Signup success:', response.data);
         // Redirect to login page upon successful signup
-        this.$router.push('/login');
+        this.$router.push('/');
       } catch (error) {
         console.error('Signup error:', error);
         // Handle error, show alert or error message
diff --git a/xroom-dashboard/src/pages/SmsVerification.vue b/xroom-dashboard/src/pages/SmsVerification.vue
new file mode 100644
index 0000000..a92a25e
--- /dev/null
+++ b/xroom-dashboard/src/pages/SmsVerification.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="signup-page">
+    <div class="signup-form">
+      <h2 class="title">
+        <img :src="require('@/assets/img/logo.png')" alt="Logo" style="max-width: 150px;" />
+      </h2>
+      <h3 class="subtitle"> تایید شماره موبایل </h3>
+
+      <h5 class="descript-xroom">
+        پیامکی شامل کد تایید به موبایل شما ارسال شده است. 
+      </h5>
+
+       <button type="submit" style="margin-bottom: 35px;" class="submit-btn" @click="sendSms">
+          ارسال  مجدد کد
+        </button>
+
+      <!-- Step 1: Mobile Number Input -->
+      <!-- <form v-if="!codeSent" @submit.prevent="requestResetCode">
+        <div class="form-group">
+          <label for="phone">شماره تماس</label>
+          <input
+            v-model="form.mobileNumber"
+            type="text"
+            id="phone"
+            placeholder="شماره تماس"
+            required
+          />
+        </div>
+       
+      </form> -->
+
+      <!-- Step 2: Code and New Password Input -->
+      <form   @submit.prevent="submitSmsVerification">
+        <div class="form-group">
+          <label for="code">کد تأیید</label>
+          <input
+            v-model="form.code"
+            type="text"
+            id="code"
+            placeholder="کد تأیید دریافت شده"
+            required
+          />
+        </div>
+      
+        
+        <button type="submit" class="submit-btn">
+          تایید کد
+        </button>
+      </form>
+
+      <!-- Links -->
+      <div class="login-link">
+        <router-link to="/signup">ساخت حساب کاربری</router-link>  
+      
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+import apiClient from '@/api/axios'; // Adjust the path based on your project structure
+
+export default {
+  data() {
+    return {
+      form: {
+        mobileNumber: '',
+        code: '',
+        password: '',
+      },
+      codeSent: false, // Tracks if the code has been sent
+    };
+  },
+  methods: {
+    async sendSms() {
+      try {
+          const token = localStorage.getItem('token');
+         
+        const response = await apiClient.get('/sendSmsVerification', {
+          // mobile_number: this.form.mobileNumber,
+        }, {
+            'Authorization': `Token ${token}`,
+            'Content-Type': 'multipart/form-data'
+          });
+      //  const response =     await axios.post(uploadUrl, formData, {
+      //     headers: {
+      //       'Authorization': `Token ${token}`,
+      //       'Content-Type': 'multipart/form-data'
+      //     }
+      //   });
+
+        if (response.data.success) {
+          this.codeSent = true;
+          alert('کد تأیید به شماره موبایل شما ارسال شد.');
+        }
+      } catch (error) {
+        console.error('Error requesting reset code:', error);
+        alert('خطا در ارسال کد تأیید. لطفاً دوباره تلاش کنید.');
+      }
+    },
+    async submitSmsVerification() {
+      try {
+        const response = await apiClient.post('/submitSmsVerification', {
+          
+          verification_sms_code: this.form.code,
+        
+        });
+        if (response.status == 200) {
+          alert('رمز عبور با موفقیت بازنشانی شد.');
+          this.$router.push('/dashboard');
+        }
+      } catch (error) {
+        console.error('Error resetting password:', error);
+        alert('خطا در بازنشانی رمز عبور. لطفاً کد یا رمز عبور را بررسی کنید.');
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+.descript-xroom {
+  font-family: IRANSansXFaNum;
+font-weight: 500;
+font-size: 13px;
+line-height: 210%;
+letter-spacing: 0%;
+text-align: justify;
+vertical-align: middle;
+margin-bottom: 30px;
+}
+/* Basic reset */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* Body and Background Styling */
+.signup-page {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background-image: url('@/assets/background.jpg'); /* Correct path */
+  
+   background-size: cover;
+  background-position: center;
+}
+
+.signup-form {
+  direction: rtl;
+  background-color: rgba(255, 255, 255, 1); /* Semi-transparent white background */
+  padding: 40px;
+  border-radius: 20px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  width: 100%;
+  max-width: 682px;
+}
+
+.title {
+  font-size: 36px;
+  font-weight: bold;
+  color: #4A90E2;
+  text-align: center;
+}
+
+.subtitle {
+  font-size: 24px;
+  color: #444;
+  text-align: right;
+  margin-bottom: 30px;
+  margin-top: 66px;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group label {
+  font-size: 14px;
+  font-weight: bold;
+  color: #555;
+  display: block;
+  margin-bottom: 5px;
+}
+
+.form-group input {
+  width: 100%;
+  padding: 12px;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+  font-size: 16px;
+  outline: none;
+}
+
+.form-group input:focus {
+  border-color: #4A90E2;
+}
+
+.terms-checkbox {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.terms-checkbox input {
+  margin-right: 10px;
+}
+
+.submit-btn {
+  width: 100%;
+  padding: 12px;
+  background-color: #4A90E2;
+  color: white;
+  font-size: 16px;
+  font-weight: bold;
+  border-radius: 6px;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.submit-btn:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+
+.submit-btn:hover:enabled {
+  background-color: #357ABD;
+}
+
+.login-link {
+  text-align: center;
+  margin-top: 20px;
+}
+
+.login-link a {
+  color: #4A90E2;
+  text-decoration: none;
+}
+
+.login-link a:hover {
+  text-decoration: underline;
+}
+</style>
diff --git a/xroom-dashboard/src/router/index.js b/xroom-dashboard/src/router/index.js
index 611b82a..e3cec06 100644
--- a/xroom-dashboard/src/router/index.js
+++ b/xroom-dashboard/src/router/index.js
@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import SignupPage from '../pages/SignupPage.vue'
 import LoginPage from '../pages/LoginPage.vue'
 import ResetPassword from '../pages/ResetPassword.vue'
+import SmsVerification from '../pages/SmsVerification.vue'
 import DashboardPage from '../pages/dashboard/index.vue'    
 import FilesPage from '@/pages/dashboard/files.vue';
 import TeamsPage from '@/pages/dashboard/team.vue';
@@ -28,6 +29,11 @@ const routes = [
     name: 'ResetPassword',
     component: ResetPassword
   },
+  {
+    path: '/SmsVerification',
+    name: 'SmsVerification',
+    component: SmsVerification
+  },
   {
     path: '/dashboard',
     name: 'DashboardPage',
@@ -109,10 +115,15 @@ router.beforeEach(async (to, from, next) => {
       
       // Check if profile_glb is empty and not already going to ChangeAvatar
       const customer = response.data.customer || JSON.parse(localStorage.getItem('customer') || '{}');
-      if (!customer.profile_glb && to.name !== 'ChangeAvatar') {
-        return next('/dashboard/ChangeAvatar');
+     
+      if (!customer.is_sms_verified && to.name !== 'SmsVerification') {
+        return next('/SmsVerification');
       }
-      
+      else if (!customer.profile_glb && to.name !== 'ReadyPlayer') {
+        return next('/dashboard/readyPlayer');
+      }
+
+
       return next();
     } catch (err) {
       // Invalid token, clear storage and redirect to login