danak/dlearn-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add toatification package

Browse Source
This commit is contained in:
HAM!DREZA
2024-05-27 21:38:06 +03:30
parent f234440d1a
commit 1e132b97db
13 changed files with 99 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/tailwind.css
+5 -1
View File
@@ -27,7 +27,7 @@ body {
} }
@layer components { @layer components {
.loginInput{ .loginInput{
@apply bg-white rounded-[1.563vw] text-[0.833vw] w-full h-[2.917vw] ps-[1.2vw] @apply bg-white rounded-[2.564vw] md:rounded-[1.563vw] text-[3.59vw] md:text-[0.833vw] w-full h-[13.59vw] md:h-[2.917vw] ps-[3vw] md:ps-[1.2vw]
} }
.flexBox{ .flexBox{
@apply flex items-center justify-center @apply flex items-center justify-center
@@ -41,6 +41,10 @@ body {
.courses{ .courses{
@apply w-[87.69%] md:w-[81.04%] flex flex-col justify-center mt-[18vw] md:mt-[4.688vw] px-[3.846vw] md:px-[1.563vw] bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw] @apply w-[87.69%] md:w-[81.04%] flex flex-col justify-center mt-[18vw] md:mt-[4.688vw] px-[3.846vw] md:px-[1.563vw] bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw]
} }
.custom-toast{
margin: 0 !important;
font-family: 'thinSans';
}
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.tabs-component .tabs-component-tab .is-active::before{ .tabs-component .tabs-component-tab .is-active::before{
components/Card.vue
+8 -2
View File
@@ -92,7 +92,7 @@
</svg> </svg>
</button> </button>
<span> <span @click="change">
<svg class="mt-[0.5vw] w-[8.718vw] md:w-[2.24vw] h-[8.718vw] md:h-[2.24vw]" viewBox="0 0 44 46" <svg class="mt-[0.5vw] w-[8.718vw] md:w-[2.24vw] h-[8.718vw] md:h-[2.24vw]" viewBox="0 0 44 46"
fill="none" xmlns="http://www.w3.org/2000/svg"> fill="none" xmlns="http://www.w3.org/2000/svg">
<path <path
@@ -125,7 +125,13 @@
</div> </div>
</div> </div>
</template> </template>
<script setup>
import { useToast } from 'vue-toastification'
const toast = useToast()
const change = () =>{
toast.error('متن تست')
}
</script>
<style scoped> <style scoped>
.post::before { .post::before {
content: ""; content: "";
components/courses-page/Courses-list.vue
+3
View File
@@ -70,6 +70,7 @@
<Card /> <Card />
<Card /> <Card />
<Card /> <Card />
<Card />
<Card /> <Card />
</div> </div>
<div v-else <div v-else
@@ -93,6 +94,8 @@
</template> </template>
<script setup> <script setup>
// const pages = 17 / 16
// console.log(Math.ceil(pages));
const openSortOptions = () => { const openSortOptions = () => {
if (process.client) { if (process.client) {
document document
components/login-page/Check-otp.vue
+35 -23
View File
@@ -1,6 +1,6 @@
<template> <template>
<div class="w-[25.573vw] text-secondaryTextColor space-y-6 relative"> <div class="w-[75vw] md:w-[25.573vw] text-secondaryTextColor space-y-6 relative">
<p class="text-[1.502vw] border-b px-[0.5vw]">کد ورود</p> <p class="text-[6vw] md:text-[1.502vw] border-b px-[0.5vw]">کد ورود</p>
<div class="relative flex flexBox w-full pt-[1vw]"> <div class="relative flex flexBox w-full pt-[1vw]">
<input <input
v-model="code" v-model="code"
@@ -9,7 +9,7 @@
placeholder="کد ورود را وارد کنید" placeholder="کد ورود را وارد کنید"
/> />
<svg <svg
class="h-[1.146vw] w-[1.146vw] absolute left-[1.2vw]" class="h-[5vw] w-[5vw] md:h-[1.146vw] md:w-[1.146vw] absolute left-[1.2vw]"
viewBox="0 0 22 22" viewBox="0 0 22 22"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -31,31 +31,39 @@
</svg> </svg>
</div> </div>
<button class="greenButton w-full !mt-[1.5vw] relative" @click="checkOtp"> <button class="greenButton h-[13.59vw] md:h-[2.917vw] text-[3.59vw] md:text-[0.833vw] rounded-[2.051vw] md:rounded-auto w-full !mt-[4vw] md:!mt-[1.5vw] relative" @click="checkOtp">
<span class="loader absolute" v-if="loading"></span> <span
class="loader
h-[7vw] w-[7vw] left-[35vw] top-[3vw]
md:h-[1.5vw] md:w-[1.5vw] md:left-[12vw] md:top-[0.65vw]
absolute"
v-if="loading"></span>
<span v-else>ورود</span> <span v-else>ورود</span>
</button> </button>
<p v-if="timer > 0" class="text-[0.7vw] px-[1vw] text-primaryGreen"> <p v-if="timer > 0" class="text-[3vw] md:text-[0.7vw] px-[2vw] md:px-[1vw] text-primaryGreen">
0{{ timer }} : 00 0{{ timer }} : 00
</p> </p>
<p <p
v-else v-else
class="text-[0.7vw] px-[1vw] text-primaryGreen cursor-pointer" class="text-[3vw] md:text-[0.7vw] px-[2vw] md:px-[1vw] text-primaryGreen cursor-pointer"
@click="options = true" @click="options = true"
> >
ارسال مجدد کد ارسال مجدد کد
</p> </p>
<div <div
v-show="options" v-show="options"
class="absolute -bottom-[3.5vw] space-y-[0.5vw] text-[0.7vw] px-[1vw]" class="absolute -bottom-[14vw] md:-bottom-[3.5vw] space-y-[2vw] md:space-y-[0.5vw] text-[3vw] md:text-[0.7vw] px-[2vw] md:px-[1vw]"
> >
<p <p
class="flex items-center gap-[0.3vw] cursor-pointer" class="flex items-center gap-[2vw] md:gap-[0.3vw] cursor-pointer"
@click="resendSMS" @click="resendSMS"
> >
<svg <svg
class="h-[1.042vw] w-[1.042vw]" class="
md:h-[1.042vw] md:w-[1.042vw]
h-[4.5vw] w-[4.5vw]
"
viewBox="0 0 20 21" viewBox="0 0 20 21"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -80,11 +88,13 @@
ارسال از طریق پیامک ارسال از طریق پیامک
</p> </p>
<p <p
class="flex items-center gap-[0.3vw] cursor-pointer" class="flex items-center gap-[2vw] md:gap-[0.3vw] cursor-pointer"
@click="resendCall" @click="resendCall"
> >
<svg <svg
class="h-[1.042vw] w-[1.042vw]" class="
h-[4.5vw] w-[4.5vw]
md:h-[1.042vw] md:w-[1.042vw]"
viewBox="0 0 20 21" viewBox="0 0 20 21"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -100,7 +110,7 @@
</p> </p>
</div> </div>
<div <div
class="z-[100] backdrop-blur-sm bg-white/30 p-[1vw] rounded-[0.5vw] text-red-400 text-[0.7vw] absolute w-full -top-[10vw]" class="backdrop-blur-sm bg-white/30 md:p-[1vw] rounded-[2.051vw] md:rounded-[0.5vw] text-red-400 text-[3vw] md:text-[0.7vw] absolute w-full p-[3vw] -top-[20vw] md:-top-[10vw]"
v-for="(error, index) in errors" v-for="(error, index) in errors"
:key="index" :key="index"
> >
@@ -111,13 +121,15 @@
</template> </template>
<script setup> <script setup>
import { useToast } from 'vue-toastification'
const toast = useToast()
const { authUser } = useAuth(); const { authUser } = useAuth();
const options = ref(false); const options = ref(false);
const code = ref(null); const code = ref(null);
const errors = ref([]); const errors = ref([]);
const loading = ref(false); const loading = ref(false);
const phoneNumber = useState("phoneNumber"); const phoneNumber = useState("phoneNumber");
const timer = ref(3); const timer = ref(5);
async function checkOtp() { async function checkOtp() {
console.log(code); console.log(code);
@@ -137,6 +149,7 @@ const timer = ref(3);
}, },
}); });
if (data.status === "Active") { if (data.status === "Active") {
toast.success("ورود با موفقیت انجام شد")
authUser.value = data; authUser.value = data;
navigateTo("/"); navigateTo("/");
} }
@@ -158,11 +171,11 @@ async function resendSMS() {
type: "1", type: "1",
}, },
}); });
loading.value = false; loading.value = false;
toast.success("کد مجدد برای شما ارسال شد")
timer.value = 5;
options.value = false;
} catch (error) { } catch (error) {
// console.log('errrrr :',error.data.data.message)
// console.log('errrrr :', error.data.data.error)
loading.value = false; loading.value = false;
return errors.value.push(error.data.data.error); return errors.value.push(error.data.data.error);
} }
@@ -179,13 +192,15 @@ async function resendCall() {
type: "2", type: "2",
}, },
}); });
toast.success("درحال تماس با شما هستیم...")
timer.value = 5;
options.value = false;
loading.value = false; loading.value = false;
} catch (error) { } catch (error) {
console.log('errrrr :',error.data.data.message) console.log('errrrr :',error.data.data.message)
console.log('errrrr :', error.data.data.error) console.log('errrrr :', error.data.data.error)
loading.value = false; loading.value = false;
// return errors.value.push(error.data.data.error); return errors.value.push(error.data.data.error);
} }
} }
onMounted(() => { onMounted(() => {
@@ -202,10 +217,7 @@ onMounted(() => {
<style scoped> <style scoped>
.loader { .loader {
top: 0.65vw;
left: 12vw;
width: 1.5vw;
height: 1.5vw;
border: 0.2vw solid #fff; border: 0.2vw solid #fff;
border-bottom-color: transparent; border-bottom-color: transparent;
border-radius: 50%; border-radius: 50%;
components/login-page/Login-form.vue
+13 -12
View File
@@ -1,7 +1,7 @@
<template> <template>
<div class="w-[25.573vw] text-secondaryTextColor space-y-6 relative"> <div class="w-[75vw] md:w-[25.573vw] text-secondaryTextColor space-y-6 relative">
<p class="text-[1.502vw] border-b px-[0.5vw]">ورود</p> <p class="text-[6vw] md:text-[1.502vw] border-b px-[0.5vw]">ورود</p>
<div class="relative flex flexBox w-full pt-[1vw]"> <div class="relative flex flexBox w-full pt-[1vw]">
<input <input
v-model="phone" v-model="phone"
@@ -10,7 +10,7 @@
placeholder="شماره موبایل خود را وارد کنید" placeholder="شماره موبایل خود را وارد کنید"
/> />
<svg <svg
class="h-[1.146vw] w-[1.146vw] absolute left-[1.2vw]" class="h-[5vw] w-[5vw] md:h-[1.146vw] md:w-[1.146vw] absolute left-[1.2vw]"
viewBox="0 0 22 22" viewBox="0 0 22 22"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -32,18 +32,23 @@
</svg> </svg>
</div> </div>
<button class="greenButton w-full !mt-[1.5vw] relative" @click="login"> <button class="greenButton h-[13.59vw] md:h-[2.917vw] text-[3.59vw] md:text-[0.833vw] rounded-[2.051vw] md:rounded-auto w-full !mt-[8vw] md:!mt-[1.5vw] relative" @click="login">
<span class="loader absolute" v-if="loading"></span> <span class="loader
h-[7vw] w-[7vw] left-[35vw] top-[3vw]
md:h-[1.5vw] md:w-[1.5vw] md:left-[12vw] md:top-[0.65vw]
absolute" v-if="loading"></span>
<span v-else>دریافت کد ورود</span> <span v-else>دریافت کد ورود</span>
</button> </button>
<div class="backdrop-blur-sm bg-white/30 p-[1vw] rounded-[0.5vw] text-red-400 text-[0.7vw] absolute w-full -top-[10vw]" v-for="(error,index) in errors" :key="index"> <div class="backdrop-blur-sm bg-white/30 md:p-[1vw] rounded-[2.051vw] md:rounded-[0.5vw] text-red-400 text-[3vw] md:text-[0.7vw] absolute w-full p-[3vw] md:-top-[10vw]" v-for="(error,index) in errors" :key="index">
<span>* {{error}}</span> <span>* {{error}}</span>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { useToast } from 'vue-toastification'
const toast = useToast()
const phone = ref(null); const phone = ref(null);
const errors = ref([]); const errors = ref([]);
const loading = ref(false); const loading = ref(false);
@@ -72,13 +77,12 @@ async function login() {
}, },
}); });
if (data.message === 'کد با موفقیت ارسال شد') { if (data.message === 'کد با موفقیت ارسال شد') {
toast.success('کد ورود برای شما ارسال شد')
const phoneNumber = useState('phoneNumber', () => phone.value) const phoneNumber = useState('phoneNumber', () => phone.value)
FormStatus.value = true; FormStatus.value = true;
} }
loading.value = false; loading.value = false;
} catch (error) { } catch (error) {
// console.log('errrrr :',error.data.data.message)
// console.log('errrrr :', error.data.data.error)
loading.value = false; loading.value = false;
return errors.value.push(error.data.data.error) return errors.value.push(error.data.data.error)
} }
@@ -87,11 +91,8 @@ async function login() {
<style scoped> <style scoped>
.loader { .loader {
top: 0.65vw;
left: 12vw;
width: 1.5vw;
height: 1.5vw;
border: 0.2vw solid #fff; border: 0.2vw solid #fff;
border-bottom-color: transparent; border-bottom-color: transparent;
border-radius: 50%; border-radius: 50%;
components/login-page/Login-svg.vue
+3 -1
View File
@@ -1,7 +1,9 @@
<template> <template>
<div class="flexBox"> <div class="flexBox">
<svg <svg
class="h-[32.604vw] w-[32.604vw]" class="
h-[80vw] w-[80vw]
md:h-[32.604vw] md:w-[32.604vw]"
viewBox="0 0 626 626" fill="none" xmlns="http://www.w3.org/2000/svg"> viewBox="0 0 626 626" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M312.999 618.325C481.495 618.325 618.087 539.463 618.087 442.181C618.087 344.9 481.495 266.037 312.999 266.037C144.504 266.037 7.91211 344.9 7.91211 442.181C7.91211 539.463 144.504 618.325 312.999 618.325Z" fill="#FAFAFA"/> <path d="M312.999 618.325C481.495 618.325 618.087 539.463 618.087 442.181C618.087 344.9 481.495 266.037 312.999 266.037C144.504 266.037 7.91211 344.9 7.91211 442.181C7.91211 539.463 144.504 618.325 312.999 618.325Z" fill="#FAFAFA"/>
<path d="M97.3048 557.753L127.14 574.981C128.82 575.833 130.677 576.278 132.561 576.278C134.445 576.278 136.302 575.833 137.982 574.981L325.519 466.721C328.512 464.993 328.512 462.188 325.519 460.461L295.634 443.208C293.954 442.356 292.097 441.911 290.213 441.911C288.329 441.911 286.472 442.356 284.792 443.208L97.3048 551.493C94.3125 553.221 94.3125 556.026 97.3048 557.753Z" fill="#EBEBEB"/> <path d="M97.3048 557.753L127.14 574.981C128.82 575.833 130.677 576.278 132.561 576.278C134.445 576.278 136.302 575.833 137.982 574.981L325.519 466.721C328.512 464.993 328.512 462.188 325.519 460.461L295.634 443.208C293.954 442.356 292.097 441.911 290.213 441.911C288.329 441.911 286.472 442.356 284.792 443.208L97.3048 551.493C94.3125 553.221 94.3125 556.026 97.3048 557.753Z" fill="#EBEBEB"/>
layouts/profile.vue
+3
View File
@@ -299,6 +299,8 @@
<script setup> <script setup>
import { useToast } from 'vue-toastification'
const toast = useToast()
const {authUser} = useAuth(); const {authUser} = useAuth();
async function logout(){ async function logout(){
await useFetch('/api/auth/logout', { await useFetch('/api/auth/logout', {
@@ -306,6 +308,7 @@ async function logout(){
method : 'POST' method : 'POST'
}) })
authUser.value = null; authUser.value = null;
toast.warning("از حساب کاربری خود خارج شدید")
return navigateTo('/') return navigateTo('/')
} }
</script> </script>
nuxt.config.ts
+1 -1
View File
@@ -9,7 +9,7 @@ export default defineNuxtConfig({
modules: [ modules: [
'@nuxtjs/tailwindcss', '@nuxtjs/tailwindcss',
'@nuxt/image', '@nuxt/image',
'vue3-carousel-nuxt' 'vue3-carousel-nuxt',
], ],
tailwindcss: { tailwindcss: {
cssPath: '~/assets/css/tailwind.css', cssPath: '~/assets/css/tailwind.css',
package-lock.json
Generated
+5 -5
View File
@@ -11,7 +11,7 @@
"nuxt": "^3.11.2", "nuxt": "^3.11.2",
"vue": "^3.4.27", "vue": "^3.4.27",
"vue-router": "^4.3.2", "vue-router": "^4.3.2",
"vue-toastification": "^1.7.14", "vue-toastification": "^2.0.0-rc.5",
"vue3-carousel-nuxt": "^1.1.1", "vue3-carousel-nuxt": "^1.1.1",
"vue3-tabs-component": "^1.3.7" "vue3-tabs-component": "^1.3.7"
}, },
@@ -12265,11 +12265,11 @@
} }
}, },
"node_modules/vue-toastification": { "node_modules/vue-toastification": {
"version": "1.7.14", "version": "2.0.0-rc.5",
"resolved": "https://registry.npmjs.org/vue-toastification/-/vue-toastification-1.7.14.tgz", "resolved": "https://registry.npmjs.org/vue-toastification/-/vue-toastification-2.0.0-rc.5.tgz",
"integrity": "sha512-khZR8t3NWZ/JJ2MZxXLbesHrRJ8AKa75PY5Zq8yMifF9x8lHq8ljYkC0d2PD9yahooygQB5tcFyRDkbbIPx8hw==", "integrity": "sha512-q73e5jy6gucEO/U+P48hqX+/qyXDozAGmaGgLFm5tXX4wJBcVsnGp4e/iJqlm9xzHETYOilUuwOUje2Qg1JdwA==",
"peerDependencies": { "peerDependencies": {
"vue": "^2.0.0" "vue": "^3.0.2"
} }
}, },
"node_modules/vue-virtual-scroller": { "node_modules/vue-virtual-scroller": {
package.json
+1 -1
View File
@@ -14,7 +14,7 @@
"nuxt": "^3.11.2", "nuxt": "^3.11.2",
"vue": "^3.4.27", "vue": "^3.4.27",
"vue-router": "^4.3.2", "vue-router": "^4.3.2",
"vue-toastification": "^1.7.14", "vue-toastification": "^2.0.0-rc.5",
"vue3-carousel-nuxt": "^1.1.1", "vue3-carousel-nuxt": "^1.1.1",
"vue3-tabs-component": "^1.3.7" "vue3-tabs-component": "^1.3.7"
}, },
pages/account/profile.vue
+9 -1
View File
@@ -76,8 +76,9 @@
<div class="flex flex-col space-y-[0.2vw] mb-[0.5vw]"> <div class="flex flex-col space-y-[0.2vw] mb-[0.5vw]">
<label for="" class="text-[3.19vw] md:text-[0.833vw] font-[400]">شماره موبایل</label> <label for="" class="text-[3.19vw] md:text-[0.833vw] font-[400]">شماره موبایل</label>
<input <input
:value="authUser?.phone"
type="text" type="text"
class="bg-[#F5F5F5] h-[13.59vw] md:h-[2.969vw] w-full md:w-[19.01vw] rounded-[2.564vw] md:rounded-[0.521vw]" class="bg-[#F5F5F5] h-[13.59vw] md:h-[2.969vw] w-full md:w-[19.01vw] rounded-[2.564vw] md:rounded-[0.521vw] px-[1vw]"
/> />
</div> </div>
<div class="flex flex-col space-y-[0.2vw] mb-[0.5vw]"> <div class="flex flex-col space-y-[0.2vw] mb-[0.5vw]">
@@ -85,6 +86,7 @@
>نام و نام خانوادگی</label >نام و نام خانوادگی</label
> >
<input <input
:value="authUser?.name"
type="text" type="text"
class="bg-[#F5F5F5] h-[13.59vw] md:h-[2.969vw] w-full md:w-[19.01vw] rounded-[2.564vw] md:rounded-[0.521vw]" class="bg-[#F5F5F5] h-[13.59vw] md:h-[2.969vw] w-full md:w-[19.01vw] rounded-[2.564vw] md:rounded-[0.521vw]"
/> />
@@ -104,3 +106,9 @@
</div> </div>
</div> </div>
</template> </template>
<script setup>
const { authUser } = useAuth();
console.log('user :', authUser.value);
</script>
pages/login/index.vue
+2 -2
View File
@@ -1,7 +1,7 @@
<template> <template>
<div class="h-screen flex"> <div class="h-screen flex flex-col flex-col-reverse md:flex-row">
<div class="basis-1/2 flexBox"> <div class="basis-1/2 flexBox">
<div class="w-[43.75vw] text-primaryTextColor space-y-[2vw]"> <div class="w-full md:w-[43.75vw] text-primaryTextColor space-y-[2vw]">
<!-- <div class="content mb-[3vw]"> <!-- <div class="content mb-[3vw]">
<p class="font-bold text-[1.901vw]">ورود به Shinan Learning</p> <p class="font-bold text-[1.901vw]">ورود به Shinan Learning</p>
<p class="text-[0.938vw] leading-[1.406vw] mt-[0.5vw]"> <p class="text-[0.938vw] leading-[1.406vw] mt-[0.5vw]">
plugins/toastification.client.js
+11
View File
@@ -0,0 +1,11 @@
import Toast from "vue-toastification";
import "vue-toastification/dist/index.css";
export default defineNuxtPlugin((NuxtApp)=>{
NuxtApp.vueApp.use(Toast, {
rtl: true,
position: "top-center",
timeout: 2000,
bodyClassName: ["custom-toast"]
})
})