Skip to content

Commit

Permalink
Complete visual overhaul of the Registration page.
Browse files Browse the repository at this point in the history
  • Loading branch information
@soumit-s
soumit-s committed Aug 8, 2023
1 parent 20c6d9a commit e2a6c7c
Show file tree
Hide file tree
Showing 3 changed files with 372 additions and 104 deletions.
214 changes: 138 additions & 76 deletions client/pages/register/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import { useState } from 'react';
import { useForm } from 'react-hook-form';
import axios from 'axios';

import styles from '../../styles/RegistrationForm.module.css'

const index = () => {
const { register, handleSubmit } = useForm();
const [image_base64, setImage_base64] = useState();
Expand Down Expand Up @@ -50,89 +53,148 @@ const index = () => {
//const getBase64;

return (
<div className="register_container">
<h1 className="register_text">Register Student's Chapter</h1>
<form className="form_container" onSubmit={handleSubmit(onSubmit)}>
<label htmlFor="name">Name:</label>
<input
type="text"
id="name"
placeholder="Your name"
{...register('name', { required: true })}
/>

<label htmlFor="email">Email:</label>
<input
type="email"
id="email"
placeholder="Your email"
{...register('email', { required: true })}
/>

<label htmlFor="rollno">Roll no:</label>
<input
type="number"
id="rollno"
{...register('rollno', { required: true })}
placeholder="Your Roll no."
/>

<label htmlFor="memberof">Member of:</label>
<input
type="text"
id="memberof"
{...register('memberOf', { required: true })}
placeholder="Member of team"
/>

<label htmlFor="courseCompletionYear">
Course Completion year:
</label>
<input
type="number"
id="courseCompletionYear"
{...register('courseCompletionYear', { required: true })}
placeholder="Course Completion year"
/>
<div className={styles.formHolder}>
<div className={styles.formContent}>
<h1 className={styles.formHeading}>
<div>Register</div>
<div>Student's Chapter</div>
</h1>
<form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
<FormSection name='Personal Info'>
<div className={styles.col}>
<div className={styles.textInput}>
<label htmlFor="name">Name:</label>
<input
type="text"
id="name"
placeholder="Your name"
{...register('name', { required: true })}
/>
</div>
<div className={styles.textInput}>
<label htmlFor="rollno">Roll no:</label>
<input
type="number"
id="rollno"
{...register('rollno', { required: true })}
placeholder="Your Roll no."
/>
</div>
</div>
<div className={styles.col}>
<div className={styles.textInput}>
<label htmlFor="section">Section</label>
<input
type="text"
id="section"
{...register('section', { required: true })}
placeholder="Your section"
/>
</div>
<div className={styles.textInput}>
<label htmlFor="courseCompletionYear">
Course Completion year:
</label>
<input
type="number"
id="courseCompletionYear"
{...register('courseCompletionYear', { required: true })}
placeholder="Year"
style={{ width: '10em' }}
/>
</div>
</div>

<label htmlFor="section">Section</label>
<input
type="text"
id="section"
{...register('section', { required: true })}
placeholder="Your section"
/>
<div className={styles.inputChooseFile}>
<label htmlFor="picture">Photo</label>
<input
className={styles.chooseFileBtn}
type="file"
id="picture"
placeholder="picture"
onChange={(e) => handleFileRead(e)}
/>
</div>
</FormSection>

<label htmlFor="phonenumber">Phone number</label>
<input
type="text"
id="phonenumber"
{...register('phonenumber', { required: true })}
placeholder="Your phone number"
/>
<Sectionless>
<div className={styles.formQuestion}>
<label htmlFor="memberof">Which team do you want to join ?</label>
<input
type="text"
id="memberof"
{...register('memberOf', { required: true })}
placeholder="Member of team"
/>
</div>
</Sectionless>

<label htmlFor="PaymentStatus">Payment Status</label>
<input
type="checkbox"
id="PaymentStatus"
{...register('paymentDone')}
placeholder="Your pPaymentStatus"
/>
<FormSection name="Contact Details">
<div className={styles.col}>
<div className={styles.textInput}>
<label htmlFor="email">Email:</label>
<input
type="email"
id="email"
placeholder="Your email"
{...register('email', { required: true })}
/>
</div>
<div className={styles.textInput}>
<label htmlFor="phonenumber">Phone number</label>
<input
type="text"
id="phonenumber"
{...register('phonenumber', { required: true })}
placeholder="Your phone number"
/>
</div>
</div>
</FormSection>

<label htmlFor="picture">Picture</label>
<input
type="file"
id="picture"
placeholder="picture"
onChange={(e) => handleFileRead(e)}
/>
<Sectionless>
<div className={styles.checkboxInput + ' ' +
styles.paymentSection}>
<label htmlFor="PaymentStatus">Payment Status</label>
<input
type="checkbox"
id="PaymentStatus"
{...register('paymentDone')}
placeholder="Your pPaymentStatus"
name='Payment Status'
/>
</div>
</Sectionless>

<button className="btn-register" type="submit">
Submit
</button>
</form>
<div className={styles.formActionSection}>
<button className={`${styles.btn} ${styles.saveBtn}`} type="submit">
Submit
</button>
<button className={`${styles.btn} ${styles.cancelBtn}`}>
Cancel
</button>
</div>
</form>
</div>
</div>
);
};

export default index;

function FormSection({ name, children }) {
return (
<div className={styles.section}>
<div className={styles.sectionTitle}>{name}</div>
<div className={styles.sectionContent}>{children}</div>
</div>
)
}

function Sectionless({ children }) {
return (
<div className={styles.sectionless}>
{children}
</div>
)
}
Loading

0 comments on commit e2a6c7c

Please sign in to comment.