jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Removes BannerActions

Browse Source 
- Fix router for Documentations
- Clean login
This commit is contained in:
Jonathan Bourdon
2024-10-28 23:59:28 -04:00
parent c7fc948fd0
commit b170d485e7
18 changed files with 103 additions and 610 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@@ -9,7 +9,7 @@
<div class="pl-60 w-full">
<div v-if="!brandingStore.loading"
class="min-h-screen flex justify-center items-center py-10"
class="min-h-screen justify-center items-center py-10"
:style="{backgroundColor: brandingStore.colors.background}">
<router-view></router-view>
</div>

11
src/router/router.js
View File

@@ -21,8 +21,9 @@ import CreatorContent from "@/views/creators/CreatorContent.vue";
import CreatorHome from "@/views/creators/CreatorHome.vue";
import CTA01 from "@/views/CTA01.vue";
import SubscriptionMenu from "@/views/creators/SubscriptionMenu.vue";
import Utilitylinks from "@/views/documentation/utilitylinks.vue";
import DocumentationLayout from "@/views/documentation/DocumentationLayout.vue";
import ExclusiveContentCard from "@/views/creators/ExclusiveContentCard.vue";
import DocumentationHome from "@/views/documentation/DocumentationHome.vue";
const routes = [
{
@@ -72,9 +73,13 @@ const routes = [
]
},
{
path: '/utilitylinks',
component: Utilitylinks,
path: '/documents',
component: DocumentationLayout,
children: [
{
path: '',
component: DocumentationHome,
},
{
path: 'helpandcontact',
component: HelpAndContact

24
src/views/LoginView.vue
View File

@@ -1,25 +1,13 @@
<template>
<div class="hidden sm:block" style="height: 40px"></div>
<div>
<div class="flex flex-col lg:flex-row items-center justify-center">
<div>
<div class="max-w-[700px] min-w-[300px]">
<img class="rounded-none sm:rounded-2xl sm:w-full mr-8" src="/images/hutopymedia/loginpage/loginhutopy.png" alt="hutopy login">
</div>
<div class="max-w-[700px] min-w-[300px] mt-2 py-2 px-3 bg-red-500 text-white rounded-none sm:rounded-2xl text-justify">Cette application est actuellement en version Alpha et en cours de développement. Nous faisons de notre mieux pour éviter toute perte de données, mais son utilisation reste à vos risques.</div>
</div>
<div class="flex flex-col items-center min-w-[300px] m-12">
<login-form></login-form>
</div>
</div>
<div class="grid grid-cols-2 h-screen items-center gap-2 m-4">
<img class="rounded-2xl"
src="/images/hutopymedia/loginpage/loginhutopy.png"
alt="hutopy login">
<login-form></login-form>
</div>
</template>
<script setup>
import LoginForm from "@/views/main/LoginForm.vue";
import { useRouter } from 'vue-router';
const router = useRouter();
</script>

0
src/views/creators/banner/bannerlower/BannerActionsXl.vue → src/views/creators/BannerActions.vue
View File

2
src/views/creators/CreatorBanner.vue
View File

@@ -22,7 +22,7 @@
</template>
<script setup>
import BannerActions from "@/views/creators/banner/bannerlower/BannerActions.vue";
import BannerActions from "@/views/creators/BannerActions.vue";
import {useBrandingStore} from "@/stores/brandingStore.js";
const branding = useBrandingStore()

163
src/views/creators/DonationButtonBannerSlim.vue
View File

@@ -1,163 +0,0 @@
<template>
<v-btn :style="{
backgroundColor: brandingStore.colors.primary,
color: 'white',
borderRadius: '8px',
padding:'0px 24px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center' }"
@click="openDonationDialog()">
<div class="font-bold">Je soutiens</div>
</v-btn>
<v-dialog v-model="donationModal" max-width="500">
<v-form>
<v-card class="text-center rounded-xl" :style="{ border: `3px solid ${brandingStore.colors.primary}` }">
<div class="py-4 text-2xl font-bold border-b mb-2">
Je Soutiens!
</div>
<div class="flex flex-row align-center px-3">
<img
:src="brandingStore.value.images.logo"
alt="Profile Image"
class="rounded-full"
width="40"
height="40"
:style="{ border: `2px solid ${brandingStore.colors.secondary}` }">
<div class="capitalize px-2 text-2xl">{{ brandingStore.value.name }}</div>
<v-btn icon @click="closeDonationDialog()" class="ml-auto" variant="text">
<v-icon>mdi-close</v-icon>
</v-btn>
</div>
<v-card-text>
<v-text-field
v-model="tipAmount"
type="number"
:min="0"
class="p-2"
label="Montant"
density="comfortable"
variant="outlined"
hide-details
clearable
inputmode="numeric"
@keydown="preventNonNumeric"
prepend-inner-icon="mdi-currency-usd"
></v-text-field>
<v-textarea v-model="tipMessage"
label="Message (facultatif)"
class="p-2"
density="comfortable"
variant="outlined"
hide-details
clearable
></v-textarea>
<v-btn variant="outlined"
:style="{ borderColor: brandingStore.colors.primary, color: brandingStore.colors.primary }"
@click="goPay()" class="w-full mt-5">
Envoyez
</v-btn>
</v-card-text>
</v-card>
</v-form>
</v-dialog>
<v-dialog v-model="isPaymentDialogActive" max-width="720" persistent>
<template v-slot:default>
<v-card>
<div id="checkout">
</div>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn block class="ma-auto" style="width: 200px;" @click="closeDialog()">Annuler</v-btn>
</v-card-actions>
</v-card>
</template>
</v-dialog>
</template>
<script setup>
import {useClient} from '@/plugins/api.js';
import {loadStripe} from '@stripe/stripe-js';
import {onMounted, ref} from 'vue';
import {useBrandingStore} from "@/stores/brandingStore.js";
const brandingStore = useBrandingStore()
const donationModal = ref(false);
function openDonationDialog() {
donationModal.value = true
}
function closeDonationDialog() {
donationModal.value = false
}
const isPaymentDialogActive = ref(false);
const tipAmount = ref(0);
const tipMessage = ref("");
let stripe = null;
let checkout;
onMounted(async () => {
stripe = await loadStripe(import.meta.env.VITE_STRIPE_API_KEY);
});
const fetchClientSecret = async () => {
const clientSecret = await createCheckoutSession();
return clientSecret;
};
async function createCheckoutSession() {
const client = useClient()
let clientSecret = await client.post('/api/Stripe', {
amount: (tipAmount.value * 100),
tipMessage: tipMessage.value,
creatorId: props.creatorId
});
let secret = clientSecret["data"];
return secret;
}
function closeDialog() {
isPaymentDialogActive.value = false;
if (checkout) {
checkout.destroy();
}
}
async function goPay() {
isPaymentDialogActive.value = true;
checkout = await stripe.initEmbeddedCheckout({
fetchClientSecret,
});
await checkout.mount('#checkout');
}
function preventNonNumeric(event) {
const key = event.key;
const allowedKeys = ['Backspace', 'ArrowLeft', 'ArrowRight', 'Delete'];
if (!/^\d$/.test(key) && !allowedKeys.includes(key)) {
event.preventDefault();
}
}
</script>

90
src/views/creators/SubscribeButtonSlim.vue
View File

@@ -1,90 +0,0 @@
<script setup>
import {computed, ref} from "vue";
import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
import {useBrandingStore} from "@/stores/brandingStore.js";
const brandingStore = useBrandingStore()
const subscriptionStore = useSubscriptionStore();
const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(brandingStore.value.id));
function subscribeToCreator() {
subscriptionStore.subscribeTo(brandingStore.value.id);
}
const showUnsubscribeModal = ref(false);
function unsubscribeFromCreator() {
subscriptionStore.unsubscribeFrom(brandingStore.value.id);
showUnsubscribeModal.value = false;
}
</script>
<template>
<template v-if="isSubscribe">
<v-btn
class="mr-4"
:style="{
backgroundColor: brandingStore.colors.secondary,
color: 'white',
borderRadius: '8px',
padding: '0px 24px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transition: 'background-color 0.3s ease'
}"
@click="subscribeToCreator"
>
<div class="font-bold">{{ $t('subscribebutton.subscribe') }}</div>
</v-btn>
</template>
<template v-else>
<v-btn
class="mr-4"
:style="{
backgroundColor: brandingStore.colors.secondary,
color: 'white',
borderRadius: '8px',
padding: '0px 24px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transition: 'background-color 0.3s ease'
}"
@click="showUnsubscribeModal = true"
>
<div class="font-bold">{{ $t('subscribebutton.unsubscribe') }}</div>
</v-btn>
</template>
<v-dialog v-model="showUnsubscribeModal" max-width="500">
<v-card class="text-center rounded-xl"
:style="{ border: `3px solid ${brandingStore.colors.primary}` }">
<div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
<div class="flex-1 text-center">
Déabonnement
</div>
</div>
<v-card-title>Confirmation</v-card-title>
<v-card-text>Êtes-vous sûr de vouloir vous désabonner ?</v-card-text>
<v-card-actions class="justify-center px-4 pb-4">
<v-btn text class="flex-grow-1" variant="outlined"
:style="{ backgroundColor: 'rgba(255, 255, 255, 0.1)', color: 'rgba(0, 0, 0, 0.4)' }"
@click="unsubscribeFromCreator">Oui
</v-btn>
<v-btn class="flex-grow-1"
:style="{ borderColor: brandingStore.colors.primary, color: brandingStore.colors.primary }"
variant="outlined"
@click="showUnsubscribeModal = false">
<div :style="{ color: brandingStore.colors.primary }">Non</div>
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>

24
src/views/creators/banner/bannerlower/BannerActions.vue
View File

@@ -1,24 +0,0 @@
<script setup>
import BannerActionsMd from "@/views/creators/banner/bannerlower/BannerActionsMd.vue";
import BannerActionsSm from "@/views/creators/banner/bannerlower/BannerActionsSm.vue";
import BannerActionsLg from "@/views/creators/banner/bannerlower/BannerActionsLg.vue";
import BannerActionsXl from "@/views/creators/banner/bannerlower/BannerActionsXl.vue";
</script>
<template>
<div>
<banner-actions-sm class="d-sm-none"
></banner-actions-sm>
<banner-actions-md class="d-none d-sm-flex d-md-none"
></banner-actions-md>
<banner-actions-lg class="d-none d-md-flex d-lg-none"
></banner-actions-lg>
<banner-actions-xl class="d-none d-lg-flex"
></banner-actions-xl>
</div>
</template>

97
src/views/creators/banner/bannerlower/BannerActionsLg.vue
View File

@@ -1,97 +0,0 @@
<template>
<div class="relative w-full">
<div ref="mainContainer" class="rounded-b-2xl pt-2 pb-1"
:style="{ backgroundColor: brandingStore.colors.bannerBottom, borderBottom: '5px inset' + (brandingStore.colors.menu || '#000') }">
<!-- Logo & User Info -->
<div class="relative z-20">
<div class="flex flex-row items-center py-2">
<div>
<img
class="shadow-2xl rounded-full border-solid border-4 absolute z-20 max-w-[190px] ml-15 -mt-32"
:src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
alt="Profile Picture"
:style="{ borderColor: brandingStore.colors.accent, height: '190px'}"
/>
</div>
<div class="flex flex-row ml-auto space-x-2.5">
<donation-button-banner></donation-button-banner>
<div class="flex flex-column">
<!-- Bouton abonnement affiché seulement si non abonné -->
<subscribe-button></subscribe-button>
<div class="font-bold text-white flex justify-end mr-5 py-1.5">
{{ brandingStore.value.subscriberCount }} {{ $t('banner.subscription') }}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Conteneur sticky -->
<div v-show="isSticky" class=" sticky-header fixed top-14 left-0 right-0 w-full z-20"
:style="{ backgroundColor: brandingStore.colors.bannerBottom , borderBottom: '5px inset' + (brandingStore.colors.menu || '#000') }">
<div class="shadow-3xl flex flex-row items-center py-2 px-2">
<div>
<img
class="max-w-[40px] max-h-[40px] ml-5 rounded-full"
:src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
alt="Profile Picture"
:style="{ borderColor: brandingStore.colors.accent, height: '190px'}"
/>
</div>
<div class="ml-5 text-white">
<p class="capitalize text-2xl font-bold">{{ brandingStore.value.name }}</p>
<p class="capitalize text-xl mt-1">{{ brandingStore.value.title }}</p>
</div>
<div class="ml-auto flex flex-row space-x-2.5 mr-3 ">
<donation-button-banner-slim></donation-button-banner-slim>
<!-- Afficher le bouton d'abonnement seulement si l'utilisateur n'est pas abonné -->
<subscribe-button-slim
v-if="!isSubscribed">
</subscribe-button-slim>
</div>
</div>
</div>
</div>
</template>
<script setup>
import {ref, onMounted, computed} from 'vue';
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
import DonationButtonBanner from "@/views/creators/DonationButtonBanner.vue";
import SubscribeButtonSlim from "@/views/creators/SubscribeButtonSlim.vue";
import DonationButtonBannerSlim from "@/views/creators/DonationButtonBannerSlim.vue";
import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
import {useBrandingStore} from "@/stores/brandingStore.js";
const brandingStore = useBrandingStore()
const subscriptionStore = useSubscriptionStore()
// Calculer si l'utilisateur est abonné
const isSubscribed = computed(() => subscriptionStore.isSubscribeTo(brandingStore.value.id));
const isSticky = ref(false);
const mainContainer = ref(null);
onMounted(() => {
const observer = new IntersectionObserver(
([entry]) => {
isSticky.value = !entry.isIntersecting;
},
{threshold: 0}
);
if (mainContainer.value) {
observer.observe(mainContainer.value);
}
});
</script>

52
src/views/creators/banner/bannerlower/BannerActionsMd.vue
View File

@@ -1,52 +0,0 @@
<template>
<div class="w-full">
<div class="rounded-b-2xl"
:style="{ backgroundColor: brandingStore.colors.bannerBottom }">
<div>
<!-- Logo-Name-Followers -->
<div class="flex flex-row relative z-20">
<div>
<img
class="absolute rounded-full border-solid border-2 max-w-[140px] h-auto ml-3 -mt-3"
:src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
alt="Profile Picture"
:style="{ borderColor: brandingStore.colors.accent, height: '150px'}"
/>
</div>
<div class="flex flex-column text-white cap px-2 mt-1 w-full ml-40">
<div class="flex justify-between">
<div>
<p class="capitalize text-2xl font-bold">{{ brandingStore.value.name }}</p>
<p class="capitalize text-xl mt-1">{{ brandingStore.value.title }}</p>
<div>{{ brandingStore.value.subscriberCount }} {{ $t('banner.subscription') }}</div>
</div>
</div>
<div class="flex justify-between mt-2">
<subscribe-button></subscribe-button>
<div class="flex space-x-2">
<donation-button iconColorClass="text-white"
></donation-button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
import DonationButton from "@/views/creators/DonationButton.vue";
import {useBrandingStore} from "@/stores/brandingStore.js";
const brandingStore = useBrandingStore()
</script>

43
src/views/creators/banner/bannerlower/BannerActionsSm.vue
View File

@@ -1,43 +0,0 @@
<template>
<div class="w-full">
<div
:style="{backgroundColor: brandingStore.colors.bannerBottom, borderBottom: `2px solid ${brandingStore.colors.accent}`}">
<div>
<!-- Logo-Name-Followers-->
<div class="flex flex-row relative z-20">
<div class="flex flex-column text-white capitalize px-2 mt-1">
<p class="capitalize text-2xl font-bold">{{ brandingStore.value.name }}</p>
<div>{{ brandingStore.value.subscriberCount }} {{ $t('banner.subscription') }}</div>
</div>
</div>
<!-- Title-info-donation-->
<div class="flex flex-row items-center justify-between w-full px-4">
<div>
<subscribe-button></subscribe-button>
</div>
<div class="flex ml-auto space-x-4">
<donation-button iconColorClass="text-white"
></donation-button>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
import DonationButton from "@/views/creators/DonationButton.vue";
import {useBrandingStore} from "@/stores/brandingStore.js";
const brandingStore = useBrandingStore()
</script>

8
src/views/documentation/DocumentationHome.vue Normal file
View File

@@ -0,0 +1,8 @@
<script setup>
</script>
<template>
</template>
<style scoped>
</style>

23
src/views/documentation/DocumentationLayout.vue Normal file
View File

@@ -0,0 +1,23 @@
<script setup>
import Footer from "@/views/main/Footer.vue";
</script>
<template>
<div class="flex justify-center">
<img src="/images/hutopymedia/banners/hutopyul.png"
class="max-w-[1000px] rounded-2xl shadow" alt="">
</div>
<div class="py-8 flex-grow">
<router-view></router-view>
</div>
<Footer></Footer>
</template>
<style scoped>
</style>

55
src/views/documentation/FAQ.vue
View File

@@ -4,78 +4,99 @@
</div>
<div class="mx-auto max-w-[1000px] px-4">
<blockquote class="important">
Certaines fonctionnalités ne sont pas encore implémentées, donc certains libellés sont prévus pour la v1.0.
</blockquote>
<h2 class="h2-tos">Foire Aux Questions</h2>
<p class="text-justify p-tos">
La section FAQ de Hutopy est votre ressource essentielle pour trouver des réponses rapides aux questions les plus fréquemment posées sur notre plateforme. Explorez nos réponses détaillées pour optimiser votre utilisation de Hutopy et résoudre vos problèmes en un instant. Consultez régulièrement notre FAQ pour rester informé des dernières fonctionnalités.
La section FAQ de Hutopy est votre ressource essentielle pour trouver des réponses rapides aux questions les plus
fréquemment posées sur notre plateforme. Explorez nos réponses détaillées pour optimiser votre utilisation de
Hutopy et résoudre vos problèmes en un instant. Consultez régulièrement notre FAQ pour rester informé des
dernières fonctionnalités.
</p>
<h2 class="h2-tos">1. Comment puis-je créer un compte sur Hutopy ?</h2>
<p class="text-justify p-tos">
Créer un compte est simple ! Visitez notre page d'inscription, remplissez les informations requises, et suivez les instructions pour confirmer votre adresse e-mail ou vous connecter via les partenaires de connexion. Vous pourrez commencer à explorer et à interagir avec la communauté Hutopy immédiatement après.
Créer un compte est simple ! Visitez notre page d'inscription, remplissez les informations requises, et suivez les
instructions pour confirmer votre adresse e-mail ou vous connecter via les partenaires de connexion. Vous pourrez
commencer à explorer et à interagir avec la communauté Hutopy immédiatement après.
</p>
<h2 class="h2-tos">2. Quels types de contenu puis-je publier sur Hutopy ?</h2>
<p class="text-justify p-tos">
Hutopy accueille une large variété de contenus créatifs, incluant mais non limité à des vidéos, articles, podcasts, et illustrations. Nous encourageons la diversité et l'originalité, tant que le contenu respecte nos valeurs.
Hutopy accueille une large variété de contenus créatifs, incluant mais non limité à des vidéos, articles,
podcasts, et illustrations. Nous encourageons la diversité et l'originalité, tant que le contenu respecte nos
valeurs.
</p>
<h2 class="h2-tos">3. Comment Hutopy rémunère-t-il les créateurs de contenu ?</h2>
<p class="text-justify p-tos">
Les créateurs peuvent monétiser leur contenu de plusieurs façons, notamment via des abonnements payants et des dons de la part des utilisateurs.
Les créateurs peuvent monétiser leur contenu de plusieurs façons, notamment via des abonnements payants et des
dons de la part des utilisateurs.
</p>
<h2 class="h2-tos">4. Comment puis-je modifier mon profil ?</h2>
<p class="text-justify p-tos">
Connectez-vous à votre compte, accédez à votre profil, puis cliquez sur "Éditer le profil" pour modifier vos informations, ajouter une bio, changer votre photo de profil, et plus encore.
Connectez-vous à votre compte, accédez à votre profil, puis cliquez sur "Éditer le profil" pour modifier vos
informations, ajouter une bio, changer votre photo de profil, et plus encore.
</p>
<h2 class="h2-tos">5. Est-il possible de supprimer mon compte ?</h2>
<p class="text-justify p-tos">
Oui, vous pouvez faire la suppression de votre compte sur votre profil dans la section plus. Notez que cette action est irréversible.
Oui, vous pouvez faire la suppression de votre compte sur votre profil dans la section plus. Notez que cette
action est irréversible.
</p>
<h2 class="h2-tos">6. Que faire si j'oublie mon mot de passe ?</h2>
<p class="text-justify p-tos">
Sur la page de connexion, cliquez sur "Mot de passe oublié ?" et suivez les instructions pour réinitialiser votre mot de passe via votre adresse courriel.
Sur la page de connexion, cliquez sur "Mot de passe oublié ?" et suivez les instructions pour réinitialiser votre
mot de passe via votre adresse courriel.
</p>
<h2 class="h2-tos">7. Comment signaler un contenu inapproprié ?</h2>
<p class="text-justify p-tos">
Si vous rencontrez du contenu qui viole nos directives, cliquer sur les trois petits points en haut de la publication et cliquez sur le bouton "Signaler" associé au contenu en question pour alerter notre équipe de modération.
Si vous rencontrez du contenu qui viole nos directives, cliquer sur les trois petits points en haut de la
publication et cliquez sur le bouton "Signaler" associé au contenu en question pour alerter notre équipe de
modération.
</p>
<h2 class="h2-tos">8. Comment puis-je contacter le support Hutopy ?</h2>
<p class="text-justify p-tos">
Pour toute assistance, vous pouvez nous contacter via notre formulaire en ligne ou par e-mail à support@hutopy.com, ou via nos réseaux sociaux. Notre équipe s'efforce de répondre rapidement à toutes les demandes.
Pour toute assistance, vous pouvez nous contacter via notre formulaire en ligne ou par e-mail à
support@hutopy.com, ou via nos réseaux sociaux. Notre équipe s'efforce de répondre rapidement à toutes les
demandes.
</p>
<h2 class="h2-tos">9. Quels sont les frais pour les créateurs sur Hutopy ?</h2>
<p class="text-justify p-tos">
Hutopy prélève une commission de 12% + 0,30$ sur chaque transaction réalisée sur la plateforme, que ce soit pour les abonnements, les dons ou tout autre revenu généré par les créateurs. Cette commission nous aide à couvrir les coûts de maintenance de la plateforme, de la bande passante, d'assistance utilisateur, des frais de transaction de Stripe et le développement continu pour améliorer votre expérience sur Hutopy.
Hutopy prélève une commission de 12% + 0,30$ sur chaque transaction réalisée sur la plateforme, que ce soit pour
les abonnements, les dons ou tout autre revenu généré par les créateurs. Cette commission nous aide à couvrir les
coûts de maintenance de la plateforme, de la bande passante, d'assistance utilisateur, des frais de transaction de
Stripe et le développement continu pour améliorer votre expérience sur Hutopy.
</p>
<h2 class="h2-tos">10. Y a-t-il des frais pour s'inscrire ou pour maintenir mon compte sur Hutopy ?</h2>
<p class="text-justify p-tos">
Non, l'inscription sur Hutopy est gratuite, et il n'y a pas de frais mensuels ou annuels pour maintenir votre compte. Vous pouvez commencer à utiliser Hutopy et à partager votre contenu sans aucun coût initial.
Non, l'inscription sur Hutopy est gratuite, et il n'y a pas de frais mensuels ou annuels pour maintenir votre
compte. Vous pouvez commencer à utiliser Hutopy et à partager votre contenu sans aucun coût initial.
</p>
<h2 class="h2-tos">11. Les utilisateurs doivent-ils payer pour accéder au contenu sur Hutopy ?</h2>
<p class="text-justify p-tos">
Hutopy offre à la fois du contenu gratuit et du contenu premium. Les utilisateurs peuvent accéder gratuitement à une partie du contenu sur la plateforme. Cependant, certains créateurs peuvent choisir de rendre leur contenu accessible uniquement via un abonnement payant ou un achat unique pour soutenir leur travail.
Hutopy offre à la fois du contenu gratuit et du contenu premium. Les utilisateurs peuvent accéder gratuitement à
une partie du contenu sur la plateforme. Cependant, certains créateurs peuvent choisir de rendre leur contenu
accessible uniquement via un abonnement payant ou un achat unique pour soutenir leur travail.
</p>
<h2 class="h2-tos">12. Existe-t-il des frais pour retirer mes gains de la plateforme ?</h2>
<p class="text-justify p-tos">
Les créateurs peuvent retirer leurs gains sans frais supplémentaires de la part d’Hutopy. Cependant, les transactions bancaires ou les transferts vers des portefeuilles électroniques peuvent être soumis aux frais standards imposés par ces services ou institutions financières, mais pas par Hutopy.
Les créateurs peuvent retirer leurs gains sans frais supplémentaires de la part d’Hutopy. Cependant, les
transactions bancaires ou les transferts vers des portefeuilles électroniques peuvent être soumis aux frais
standards imposés par ces services ou institutions financières, mais pas par Hutopy.
</p>
<h2 class="h2-tos">13. Les frais Hutopy sont-ils les mêmes pour tous les types de contenu ?</h2>
<p class="text-justify p-tos">
Oui, les frais de commission d’Hutopy sont uniformément appliqués à tous les types de contenu et de transactions sur la plateforme pour maintenir la simplicité et la transparence et ce peu importe le montant.
Oui, les frais de commission d’Hutopy sont uniformément appliqués à tous les types de contenu et de transactions
sur la plateforme pour maintenir la simplicité et la transparence et ce peu importe le montant.
</p>
</div>

47
src/views/documentation/utilitylinks.vue
View File

@@ -1,47 +0,0 @@
<script setup>
import {useBrandingStore} from "@/stores/brandingStore.js";
const brandingStore = useBrandingStore()
import Footer from "@/views/main/Footer.vue";
</script>
<template>
<div>
<div>
<img src="/images/hutopymedia/banners/hutopyul.png" class="max-w-[1000px] rounded-2xl shadow" alt="">
</div>
<div class="flex flex-row flex-wrap justify-center gap-6 py-2" >
<router-link to="helpandcontact" :style="{color: brandingStore.colors.onBackground}">
Aide & Contact
</router-link>
<router-link to="faq" :style="{color: brandingStore.colors.onBackground}">
FAQ
</router-link>
<router-link to="guideforcreators" :style="{color: brandingStore.colors.onBackground}">
Guide pour les créateurs
</router-link>
<router-link to="termsandconditions" :style="{color: brandingStore.colors.onBackground}">
Termes et Conditions
</router-link>
<router-link to="contentpolicy" :style="{color: brandingStore.colors.onBackground}">
Politique de Contenu
</router-link>
<router-link to="about" :style="{color: brandingStore.colors.onBackground}">
À Propos
</router-link>
<router-link to="pricing" :style="{color: brandingStore.colors.onBackground}">
Frais
</router-link>
</div>
<div class="py-8 flex-grow">
<router-view></router-view>
</div>
<Footer></Footer>
</div>
</template>
<style scoped>
</style>

14
src/views/main/Footer.vue
View File

@@ -28,25 +28,25 @@ const brandingStore = useBrandingStore()
</div>
<div class="flex flex-row flex-wrap justify-center gap-4" >
<router-link to="helpandcontact" :style="{color: brandingStore.colors.onBackground}">
<router-link to="/documents/helpandcontact" :style="{color: brandingStore.colors.onBackground}">
Aide & Contact
</router-link>
<router-link to="faq" :style="{color: brandingStore.colors.onBackground}">
<router-link to="/documents/faq" :style="{color: brandingStore.colors.onBackground}">
FAQ
</router-link>
<router-link to="guideforcreators" :style="{color: brandingStore.colors.onBackground}">
<router-link to="/documents/guideforcreators" :style="{color: brandingStore.colors.onBackground}">
Guide pour les créateurs
</router-link>
<router-link to="termsandconditions" :style="{color: brandingStore.colors.onBackground}">
<router-link to="/documents/termsandconditions" :style="{color: brandingStore.colors.onBackground}">
Termes et Conditions
</router-link>
<router-link to="contentpolicy" :style="{color: brandingStore.colors.onBackground}">
<router-link to="/documents/contentpolicy" :style="{color: brandingStore.colors.onBackground}">
Politique de Contenu
</router-link>
<router-link to="about" :style="{color: brandingStore.colors.onBackground}">
<router-link to="/documents/about" :style="{color: brandingStore.colors.onBackground}">
À Propos
</router-link>
<router-link to="pricing" :style="{color: brandingStore.colors.onBackground}">
<router-link to="/documents/pricing" :style="{color: brandingStore.colors.onBackground}">
Frais
</router-link>
</div>

57
src/views/main/LoginForm.vue
View File

@@ -1,65 +1,30 @@
<template>
<div>
<div class="flex flex-col items-center min-w-[300px] m-4">
<h1 class="text-center text-2xl font-bold mb-5">Connexion</h1>
<google-login class="w-full" :callback="googleCallback" popup-type="TOKEN">
<template #default>
<v-btn density="comfortable" class="mb-2 w-full">
<v-icon left>mdi-google</v-icon>
Google
</v-btn>
</template>
</google-login>
<div class="w-full h-0.5 mt-4 mb-4" :style="{ backgroundColor: '#A30E79' }"></div>
<v-btn density="comfortable" class="mb-2 w-full" @click="showEmailForm = !showEmailForm">
<v-icon left>mdi-account</v-icon>
Utilisateur
<div class="flex flex-col items-center min-w-[300px] m-4">
<h1 class="text-center text-2xl font-bold mb-5">Connexion</h1>
<google-login class="w-full"
:callback="googleCallback"
popup-type="TOKEN">
<v-btn density="comfortable" class="mb-2 w-full">
<v-icon left>mdi-google</v-icon>
Google
</v-btn>
<div v-if="showEmailForm" class="w-full mt-2">
<v-text-field v-model="email" label="Courriel" variant="outlined" dense prepend-inner-icon="mdi-email"
color="transparent" class="text-black"></v-text-field>
<v-text-field v-model="password" label="Mot de passe" :type="showPassword ? 'text' : 'password'"
variant="outlined" dense prepend-inner-icon="mdi-lock" append-inner-icon="mdi-eye"
@click:append-inner="showPassword = !showPassword" color="transparent"
class="text-black"></v-text-field>
<v-btn class="w-full text-center text-white" :style="{ backgroundColor: '#A30E79' }" @click="login">Connecter
</v-btn>
<p class="mt-4 text-sm text-center">Si vous n'avez pas de compte, <a href="/register" class="text-blue-500">cliquez
ici</a> pour en créer un.</p>
<div v-if="errorSnackBar" class="mb-4 text-red-600">Nom d'utilisateur ou mot de passe invalide.
<button class="text-red-600 ml-4" @click="errorSnackBar = false">Fermer</button>
</div>
</div>
</div>
</google-login>
</div>
</template>
<script setup>
import {ref} from 'vue';
import {useRouter} from 'vue-router';
import {useAuthStore} from '@/stores/authStore.js';
import {GoogleLogin} from "vue3-google-login";
const authStore = useAuthStore();
const router = useRouter();
const email = ref("");
const password = ref("");
const errorSnackBar = ref(false);
const showEmailForm = ref(false);
const showPassword = ref(false);
async function googleCallback(token) {
const response = await authStore.loginWithGoogle(JSON.stringify(token));
handleResponse(response)
}
async function login() {
const response = await authStore.login(email.value, password.value);
handleResponse(response)
}
function handleResponse(response) {
if (response !== true) {
errorSnackBar.value = true;
}

1
src/views/main/SideBar.vue
View File

@@ -50,7 +50,6 @@ initializeLocale();
alt="hutopy"
width="300px"
height="64px">
<div class="flex justify-end">ALPHA</div>
</router-link>
</div>