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

I have added a new window to create a new user.

Browse Source
This commit is contained in:
PascalMarchesseault
2024-08-05 22:25:54 -04:00
parent f9d8e724fc
commit b83db5b33b
6 changed files with 157 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -27,7 +27,7 @@
<div>
<img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]"
:src="creator.storedDataUrls.bannerPictureUrl || '/images/hutopymedia/banners/tutorialbanner.png'"
alt="Profile Banner" style="max-height: 550px">
alt="Profile Banner" style="max-height: 425px">
</div>
</div>
</div>
@@ -52,8 +52,8 @@
<!-- User Info -->
<div class="mt-2 flex flex-col items-center lg:items-start lg:ml-64">
<div class="text-3xl font-bold text-center lg:text-left md:mt-24 lg:mt-0 sm:mt-24 mt-24">
<p :style="{ color: creator.profileColors.accent }">{{ creator.firstName }} {{ creator.lastName }}</p>
<div class="text-3xl font-bold text-center lg:text-left md:mt-24 lg:mt-0 sm:mt-24 mt-24 text-white cap ">
<p class="capitalize">{{creator.name}}</p>
</div>
<div class="text-2xl text-center lg:text-left">
<p :style="{ color: creator.profileColors.accent }">{{ creator.occupation }}</p>
@@ -62,8 +62,7 @@
</div>
<!-- Buttons -->
<div
class="flex flex-wrap items-center justify-center mt-2 sm:mt-8 md:mt-4 lg:mt-0 lg:ml-auto space-x-2 sm:space-x-4 ml-">
<div class="flex flex-wrap items-center mt-2 sm:mt-8 md:mt-4 lg:mt-0 lg:ml-auto space-x-2 sm:space-x-4">
<AboutYou :creator="creator"></AboutYou>
<subscribe-button :creator="creator"></subscribe-button>

12
src/views/creators/SubscribeButton.vue
View File

@@ -23,7 +23,7 @@ function unsubscribeFromCreator() {
<template>
<template v-if="isSubscribe">
<v-btn class="action"
<v-btn class="action mr-4"
@click="subscribeToCreator()"
style="transition: background-color 0.3s ease;">
S'ABONNER
@@ -31,7 +31,7 @@ function unsubscribeFromCreator() {
</template>
<template v-else>
<v-btn class="action"
<v-btn class="action mr-4"
@click="unsubscribeFromCreator()"
style="transition: background-color 0.3s ease;">
SE DESABONNER
@@ -43,7 +43,11 @@ function unsubscribeFromCreator() {
<style scoped>
.action {
@apply py-2 px-4 rounded bg-gray-100 hover:bg-gray-300
}
@apply py-2 px-4 rounded bg-gray-100 hover:bg-gray-300
}
</style>

9
src/views/main/Join.vue
View File

@@ -142,9 +142,6 @@
</div>
</div>
<v-dialog v-model="showModal" max-width="600">
<v-card>
<v-card-title class="text-center" style="margin-top: 30px; margin-bottom: 40px;">
@@ -159,21 +156,15 @@
<v-card-actions class="justify-end" style="margin-right: 20px;">
<v-btn to="/" size="large" class="text-center" color="primary" text @click="showModal = false">Fermer</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script setup>
import { useClient } from "@/plugins/api.js";
import { ref } from 'vue';
const client = useClient();
const showModal = ref(false);
const name = ref("");
const emailAddress = ref("");

24
src/views/main/Register.vue Normal file
View File

@@ -0,0 +1,24 @@
<template>
<div class="hidden sm:block" style="height: 40px"></div>
<div>
<div class="flex flex-col lg:flex-row items-center justify-center">
<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="flex flex-col items-center min-w-[300px] m-12">
<register-form></register-form>
</div>
</div>
</div>
<selected-footer></selected-footer>
</template>
<script setup>
import SelectedFooter from "@/views/main/SelectedFooter.vue";
import RegisterForm from "@/views/main/RegisterForm.vue";
import { useRouter } from 'vue-router';
const router = useRouter();
</script>

114
src/views/main/RegisterForm.vue Normal file
View File

@@ -0,0 +1,114 @@
<template>
<div>
<div class="flex flex-col items-center min-w-[300px] m-4">
<h1 class="text-center text-2xl font-bold mb-5">Inscription</h1>
<div class="w-full h-0.5 mt-4 mb-4" :style="{ backgroundColor: '#A30E79' }"></div>
<div class="w-full">
<div class="flex flex-wrap justify-between gap-4 mb-4">
<v-text-field
v-model="firstName"
label="Prénom"
variant="outlined"
dense
prepend-inner-icon="mdi-account"
color="transparent"
class="text-black flex-grow min-w-[250px]"
></v-text-field>
<v-text-field
v-model="lastName"
label="Nom"
variant="outlined"
dense
prepend-inner-icon="mdi-account"
color="transparent"
class="text-black flex-grow min-w-[250px]"
></v-text-field>
</div>
<v-text-field
v-model="email"
label="Courriel"
variant="outlined"
dense
prepend-inner-icon="mdi-email"
color="transparent"
class="text-black mb-4"
></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 mb-4"
></v-text-field>
<v-text-field
v-model="confirmPassword"
label="Confirmer 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 mb-4"
></v-text-field>
<v-btn
class="w-full text-center text-white"
:style="{ backgroundColor: '#A30E79' }"
@click="createUser"
>
Connecter
</v-btn>
<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>
</div>
</template>
<script setup>
import { useClient } from "@/plugins/api.js";
import {ref} from 'vue';
const client = useClient();
const firstName = ref('');
const lastName = ref('');
const email = ref('');
const password = ref('');
const confirmPassword = ref('');
const showPassword = ref(false);
const errorSnackBar = ref(false);
async function createUser() {
try{
const userInformation ={
FirstName: firstName.value,
LastName: lastName.value,
EmailAddress: email.value,
UserName: userName.value,
Password: password.value,
};
await client.post('/api/Users', userInformation);
}catch (error) {
console.log(error);
}
}
</script>
<style scoped>
</style>