signup view update

backend/kodecupidapp/migrations/0006_remove_user_looking_for.py

@@ -0,0 +1,17 @@
+# Generated by Django 5.0.4 on 2024-04-28 20:14
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('kodecupidapp', '0005_user_sex_alter_user_looking_for'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='user',
+            name='looking_for',
+        ),
+    ]

backend/kodecupidapp/migrations/0007_user_looking_for.py

@@ -0,0 +1,19 @@
+# Generated by Django 5.0.4 on 2024-04-28 20:14
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('kodecupidapp', '0006_remove_user_looking_for'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='user',
+            name='looking_for',
+            field=models.BooleanField(default=False),
+            preserve_default=False,
+        ),
+    ]

frontend/src/views/authentication/SignupView.vue

@@ -19,6 +19,34 @@
         </v-col>
       </v-row>
 
+      <!-- Radio buttons for sex -->
+      <v-row>
+        <v-col cols="6">
+            <v-label>Sexe</v-label>
+            <v-radio-group v-model="form.sex" row>
+                <v-radio label="Homme" :value=true></v-radio>
+                <v-radio label="Femme" :value=false></v-radio>
+            </v-radio-group>
+        </v-col>
+        <v-col cols="6" class="d-flex justify-center align-center">
+            <v-img :src="sexImage" height="100px" class="rounded-circle shadow" />
+        </v-col>
+      </v-row>
+
+      <!-- Radio buttons for looking_for -->
+      <v-row>
+        <v-col cols="6">
+          <v-label>Recherche</v-label>
+          <v-radio-group v-model="form.looking_for" row>
+            <v-radio label="Homme" :value=true></v-radio>
+            <v-radio label="Femme" :value=false></v-radio>
+          </v-radio-group>
+        </v-col>
+        <v-col cols="6" class="d-flex justify-center align-center">
+            <v-img :src="lookingForImage" height="100px" class="rounded-circle shadow" />
+        </v-col>
+      </v-row>
+
       <v-row>
         <v-col>
           <v-btn type="submit" color="primary" form="signup-form">S'inscrire</v-btn>
@@ -33,12 +61,15 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import {ApiClient} from '@/clients/apiClient.js';
+import router from '@/router';
 
 const form = ref({
   username: '',
-  password: ''
+  password: '',
+  sex: true,
+  looking_for: false
 });
 
 const usernameRules = [
@@ -50,6 +81,14 @@ const passwordRules = [
   v => v.length >= 6 || 'Le mot de passe doit contenir min. 6 caractères'
 ];
 
+const sexImage = computed(() => {
+  return form.value.sex ? '/giga_chad.jpg' : '/giga_female.jpg';
+});
+
+const lookingForImage = computed(() => {
+  return form.value.looking_for ? '/giga_chad.jpg' : '/giga_female.jpg';
+});
+
 
 const handleSubmit = async () => {
   const jsonForm = JSON.stringify(form.value);