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 {
.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{
@apply flex items-center justify-center
@@ -41,6 +41,10 @@ body {
.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]
}
.custom-toast{
margin: 0 !important;
font-family: 'thinSans';
}
}
@media (max-width: 768px) {
.tabs-component .tabs-component-tab .is-active::before{
components/Card.vue
+8 -2
View File
@@ -92,7 +92,7 @@
</svg>
</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"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path
@@ -125,7 +125,13 @@
</div>
</div>
</template>
<script setup>
import { useToast } from 'vue-toastification'
const toast = useToast()
const change = () =>{
toast.error('متن تست')
}
</script>
<style scoped>
.post::before {
content: "";
components/courses-page/Courses-list.vue
+3
View File
@@ -70,6 +70,7 @@
<Card />
<Card />
<Card />
<Card />
<Card />
</div>
<div v-else
@@ -93,6 +94,8 @@
</template>
<script setup>
// const pages = 17 / 16
// console.log(Math.ceil(pages));
const openSortOptions = () => {
if (process.client) {
document
components/login-page/Check-otp.vue
+35 -23
View File
@@ -1,6 +1,6 @@
<template>
<div class="w-[25.573vw] text-secondaryTextColor space-y-6 relative">
<p class="text-[1.502vw] border-b px-[0.5vw]">کد ورود</p>
<div class="w-[75vw] md:w-[25.573vw] text-secondaryTextColor space-y-6 relative">
<p class="text-[6vw] md:text-[1.502vw] border-b px-[0.5vw]">کد ورود</p>
<div class="relative flex flexBox w-full pt-[1vw]">
<input
v-model="code"
@@ -9,7 +9,7 @@
placeholder="کد ورود را وارد کنید"
/>
<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"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@@ -31,31 +31,39 @@
</svg>
</div>
<button class="greenButton w-full !mt-[1.5vw] relative" @click="checkOtp">
<span class="loader absolute" v-if="loading"></span>
<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
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>
</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
</p>
<p
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"
>
ارسال مجدد کد
</p>
<div
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
class="flex items-center gap-[0.3vw] cursor-pointer"
class="flex items-center gap-[2vw] md:gap-[0.3vw] cursor-pointer"
@click="resendSMS"
>
<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"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@@ -80,11 +88,13 @@
ارسال از طریق پیامک
</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"
>
<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"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@@ -100,7 +110,7 @@
</p>
</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"
:key="index"
>
@@ -111,13 +121,15 @@
</template>
<script setup>
import { useToast } from 'vue-toastification'
const toast = useToast()
const { authUser } = useAuth();
const options = ref(false);
const code = ref(null);
const errors = ref([]);
const loading = ref(false);
const phoneNumber = useState("phoneNumber");
const timer = ref(3);
const timer = ref(5);
async function checkOtp() {
console.log(code);
@@ -137,6 +149,7 @@ const timer = ref(3);
},
});
if (data.status === "Active") {
toast.success("ورود با موفقیت انجام شد")
authUser.value = data;
navigateTo("/");
}
@@ -158,11 +171,11 @@ async function resendSMS() {
type: "1",
},
});
loading.value = false;
toast.success("کد مجدد برای شما ارسال شد")
timer.value = 5;
options.value = false;
} catch (error) {
// console.log('errrrr :',error.data.data.message)
// console.log('errrrr :', error.data.data.error)
loading.value = false;
return errors.value.push(error.data.data.error);
}
@@ -179,13 +192,15 @@ async function resendCall() {
type: "2",
},
});
toast.success("درحال تماس با شما هستیم...")
timer.value = 5;
options.value = false;
loading.value = false;
} catch (error) {
console.log('errrrr :',error.data.data.message)
console.log('errrrr :', error.data.data.error)
loading.value = false;
// return errors.value.push(error.data.data.error);
return errors.value.push(error.data.data.error);
}
}
onMounted(() => {
@@ -202,10 +217,7 @@ onMounted(() => {
<style scoped>
.loader {
top: 0.65vw;
left: 12vw;
width: 1.5vw;
height: 1.5vw;
border: 0.2vw solid #fff;
border-bottom-color: transparent;
border-radius: 50%;
components/login-page/Login-form.vue
+13 -12
View File
@@ -1,7 +1,7 @@
<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]">
<input
v-model="phone"
@@ -10,7 +10,7 @@
placeholder="شماره موبایل خود را وارد کنید"
/>
<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"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@@ -32,18 +32,23 @@
</svg>
</div>
<button class="greenButton w-full !mt-[1.5vw] relative" @click="login">
<span class="loader absolute" v-if="loading"></span>
<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
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>
</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>
</div>
</div>
</template>
<script setup>
import { useToast } from 'vue-toastification'
const toast = useToast()
const phone = ref(null);
const errors = ref([]);
const loading = ref(false);
@@ -72,13 +77,12 @@ async function login() {
},
});
if (data.message === 'کد با موفقیت ارسال شد') {
toast.success('کد ورود برای شما ارسال شد')
const phoneNumber = useState('phoneNumber', () => phone.value)
FormStatus.value = true;
}
loading.value = false;
} catch (error) {
// console.log('errrrr :',error.data.data.message)
// console.log('errrrr :', error.data.data.error)
loading.value = false;
return errors.value.push(error.data.data.error)
}
@@ -87,11 +91,8 @@ async function login() {
<style scoped>
.loader {
top: 0.65vw;
left: 12vw;
width: 1.5vw;
height: 1.5vw;
border: 0.2vw solid #fff;
border-bottom-color: transparent;
border-radius: 50%;
components/login-page/Login-svg.vue
+3 -1
View File
@@ -1,7 +1,9 @@
<template>
<div class="flexBox">
<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">
<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"/>
layouts/profile.vue
+3
View File
@@ -299,6 +299,8 @@
<script setup>
import { useToast } from 'vue-toastification'
const toast = useToast()
const {authUser} = useAuth();
async function logout(){
await useFetch('/api/auth/logout', {
@@ -306,6 +308,7 @@ async function logout(){
method : 'POST'
})
authUser.value = null;
toast.warning("از حساب کاربری خود خارج شدید")
return navigateTo('/')
}
</script>
nuxt.config.ts
+1 -1
View File
@@ -9,7 +9,7 @@ export default defineNuxtConfig({
modules: [
'@nuxtjs/tailwindcss',
'@nuxt/image',
'vue3-carousel-nuxt'
'vue3-carousel-nuxt',
],
tailwindcss: {
cssPath: '~/assets/css/tailwind.css',
package-lock.json
Generated
+5 -5
View File
@@ -11,7 +11,7 @@
"nuxt": "^3.11.2",
"vue": "^3.4.27",
"vue-router": "^4.3.2",
"vue-toastification": "^1.7.14",
"vue-toastification": "^2.0.0-rc.5",
"vue3-carousel-nuxt": "^1.1.1",
"vue3-tabs-component": "^1.3.7"
},
@@ -12265,11 +12265,11 @@
}
},
"node_modules/vue-toastification": {
"version": "1.7.14",
"resolved": "https://registry.npmjs.org/vue-toastification/-/vue-toastification-1.7.14.tgz",
"integrity": "sha512-khZR8t3NWZ/JJ2MZxXLbesHrRJ8AKa75PY5Zq8yMifF9x8lHq8ljYkC0d2PD9yahooygQB5tcFyRDkbbIPx8hw==",
"version": "2.0.0-rc.5",
"resolved": "https://registry.npmjs.org/vue-toastification/-/vue-toastification-2.0.0-rc.5.tgz",
"integrity": "sha512-q73e5jy6gucEO/U+P48hqX+/qyXDozAGmaGgLFm5tXX4wJBcVsnGp4e/iJqlm9xzHETYOilUuwOUje2Qg1JdwA==",
"peerDependencies": {
"vue": "^2.0.0"
"vue": "^3.0.2"
}
},
"node_modules/vue-virtual-scroller": {
package.json
+1 -1
View File
@@ -14,7 +14,7 @@
"nuxt": "^3.11.2",
"vue": "^3.4.27",
"vue-router": "^4.3.2",
"vue-toastification": "^1.7.14",
"vue-toastification": "^2.0.0-rc.5",
"vue3-carousel-nuxt": "^1.1.1",
"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]">
<label for="" class="text-[3.19vw] md:text-[0.833vw] font-[400]">شماره موبایل</label>
<input
:value="authUser?.phone"
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 class="flex flex-col space-y-[0.2vw] mb-[0.5vw]">
@@ -85,6 +86,7 @@
>نام و نام خانوادگی</label
>
<input
:value="authUser?.name"
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]"
/>
@@ -104,3 +106,9 @@
</div>
</div>
</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>
<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="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]">
<p class="font-bold text-[1.901vw]">ورود به Shinan Learning</p>
<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"]
})
})