42/42_INT_14_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed create form

Browse Source
This commit is contained in:
simplonco
2023-01-05 18:56:29 +01:00
parent f0736ab20b
commit 26150f6761
6 changed files with 362 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_create.svelte
View File

@@ -5,21 +5,30 @@
export let layout = "";
export let back = "";
let room_name = "";
let room_type = "";
let room_password = "";
async function handleSubmit(evt)
{
let formIsValid = evt.target.checkValidity();
if (formIsValid)
{
const formData = new FormData(evt.target);
console.log(formData);
const response = await fetch('/api/v2/chat/join', {
method: 'POST',
//headers: { 'Content-Type': 'multipart/form-data' },
body: formData,
});
console.log(await response.json());
}
if (!formIsValid)
return;
let formData = {
room_name: room_name,
room_type: room_type,
room_password: room_password,
};
console.log("formData:", formData);
const response = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/chat/join`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData),
});
console.log(await response.json());
}
</script>
@@ -43,33 +52,32 @@
<!-- panel_create -->
<div class="panel panel_create __border_top">
<!--
<form action="/api/v2/chat/create" method="post" onsubmit="return submit();">
<Button on_click={submit} my_class="border light thin">&#x2BA1</Button>
<form bind:this={form} onsubmit="return my_submit();">
<form action="/api/v2/chat/create" method="post" on:submit|stopPropagation>
<form action="/api/v2/chat/create" method="post">
<form action="/api/v2/chat/create" method="post" on:submit|preventDefault>
<form bind:this={form} on:submit|preventDefault={handleSubmit}>
-->
<form on:submit|preventDefault={handleSubmit}>
<!-- name: -->
<label for="chat_name"><p>new room name :</p></label>
<input id="chat_name" name="room_name" required>
<input id="chat_name" bind:value={room_name} name="room_name" required>
<!-- [ ] pubic -->
<input id="chat_public" type="radio" name="room_type" value="public" checked>
<label for="chat_public" class="_radio"><p>public</p></label>
<label for="chat_public" class="_radio">
<p>public</p>
<input id="chat_public" bind:group={room_type} type="radio" name="room_type" value="public" required>
</label>
<!-- [ ] private -->
<input id="chat_private" type="radio" name="room_type" value="private">
<label for="chat_private" class="_radio"><p>private</p></label>
<label for="chat_private" class="_radio">
<p>private</p>
<input id="chat_private" bind:group={room_type} type="radio" name="room_type" value="private" required>
</label>
<!-- [ ] protected -->
<input id="chat_protected" class="__check_change_next" type="radio" name="room_type" value="protected">
<label for="chat_protected" class="_radio"><p>protected</p></label>
<label for="chat_protected" class="_radio">
<p>protected</p>
<input id="chat_protected" bind:group={room_type} type="radio" name="room_type" value="protected" required>
</label>
<!-- [x] protected -->
<div class="__to_show">
<label for="chat_pswd"><p>choose a password :</p></label>
<input id="chat_pswd" type="password" placeholder="minimum 8 characters" minlength="8" name="password">
</div>
{#if room_type === 'protected'}
<div>
<label for="chat_pswd"><p>choose a password :</p></label>
<input id="chat_pswd" bind:value={room_password} type="password" placeholder="minimum 8 characters" minlength="8" name="password" required>
</div>
{/if}
<input type="submit" value="&#x2BA1">
</form>
</div>
@@ -94,34 +102,19 @@
/* radio elements style check
*/
.panel input[type=radio] {
display: none;
}
.panel label._radio {
margin: 0px 20px 0px auto;
display: inline;
margin: 10px 0px 0px auto;
padding-right: 10px;
cursor: pointer;
}
.panel label._radio * {
display: inline;
}
.panel label._radio p {
margin-top: 0px;
margin-bottom: 0px;
}
.panel label._radio::after {
content: "";
position: absolute;
top: calc(50% - 6px);
right: 0px;
width: 12px;
height: 12px;
border-radius: 6px;
border: 2px solid rgb(150, 150, 150);
box-sizing: border-box;
cursor: pointer;
}
.panel input[type=radio]:checked
+ label._radio::after {
background-color: rgb(200, 200, 200);
}
/* submit