Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Family Signup Form Styling Update #950

Merged
merged 14 commits into from
Nov 14, 2024
Merged

Family Signup Form Styling Update #950

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
e7b21b9
add emphasis on form elements and update styling
lucasxsong Nov 13, 2024
5b87959
remove css
lucasxsong Nov 13, 2024
b90fa7f
more styling, add min pw requirements
lucasxsong Nov 13, 2024
e12c851
add more styling
lucasxsong Nov 13, 2024
697bf1d
update test
lucasxsong Nov 13, 2024
1a9b494
add beta
lucasxsong Nov 13, 2024
cad20f8
add styling updates
lucasxsong Nov 13, 2024
46cd529
update styling as per elijah's review
lucasxsong Nov 13, 2024
ddd185f
update activeIndex back to 0
lucasxsong Nov 13, 2024
b3bb3a8
Merge branch 'main' into enh/parent-signup-lightweight-refactor
lucasxsong Nov 13, 2024
22fdccf
fix parent invite test
lucasxsong Nov 13, 2024
824b909
Merge branch 'main' into enh/parent-signup-lightweight-refactor
lucasxsong Nov 13, 2024
7621428
add w-full to input elements
lucasxsong Nov 14, 2024
25a31d7
fix test
lucasxsong Nov 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion src/assets/styles/routes/register.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ body.page-register {

form {
width: 100%;
padding-inline: 2rem;
}

.form-section {
Expand Down
141 changes: 79 additions & 62 deletions src/components/auth/RegisterStudent.vue → src/components/auth/RegisterChildren.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,66 +1,81 @@
<template>
<div class="card">
<form class="p-fluid">
<div v-for="(student, outerIndex) in state.students" :key="outerIndex" class="student-form-border">
<section v-if="!student.orgName" class="form-section">
<div class="p-input-icon-right">
<div class="flex justify-content-between">
<label for="activationCode">Activation code <span class="required">*</span></label>
<div class="flex align-items-center">
<PvCheckbox
v-model="student.noActivationCode"
:binary="true"
<form class="">
<div
v-for="(student, outerIndex) in state.students"
:key="outerIndex"
class="bg-gray-100 rounded py-3 px-5 flex flex-column gap-2 my-3"
>
<div class="flex flex-row justify-content-between align-items-center">
<div class="font-bold text-2xl text-gray-600">Student #{{ outerIndex + 1 }}</div>
<section v-if="!student.orgName" class="form-section">
<div class="p-input-icon-right">
<div class="flex justify-content-between gap-2">
<label for="activationCode">Activation code <span class="required">*</span></label>
<div class="flex align-items-center">
<PvCheckbox
v-model="student.noActivationCode"
:binary="true"
name="noActivationCode"
@change="updateActivationCode"
/>
<label for="noActivationCode" class="ml-2">I don't have a code</label>
</div>
</div>
<PvInputGroup v-if="!student.noActivationCode">
<PvInputText
v-model="student.activationCode"
name="noActivationCode"
@change="updateActivationCode"
:class="{
'p-invalid': v$.students.$each.$response.$data[outerIndex].activationCode.$invalid && submitted,
}"
aria-describedby="activation-code-error"
:disabled="student.noActivationCode"
/>
<label for="noActivationCode" class="ml-2">I don't have a code</label>
</div>
<PvButton
class="w-4 bg-primary text-white hover:bg-red-900 text-sm"
label="Validate"
@click="validateCode(student.activationCode, outerIndex)"
/>
</PvInputGroup>
</div>
<PvInputGroup v-if="!student.noActivationCode">
<PvInputText
v-model="student.activationCode"
name="noActivationCode"
:class="{
'p-invalid': v$.students.$each.$response.$data[outerIndex].activationCode.$invalid && submitted,
}"
aria-describedby="activation-code-error"
:disabled="student.noActivationCode"
/>
<PvButton
class="w-4 bg-primary text-white hover:bg-red-900"
label="Validate Code"
@click="validateCode(student.activationCode, outerIndex)"
/>
</PvInputGroup>
</div>
<span
v-if="
v$.students.$each.$response.$data[outerIndex].noActivationCode &&
v$.students.$each.$response.$data[outerIndex].activationCode.$invalid &&
submitted
"
>
<span
v-for="(error, innerIndex) in v$.students.$each.$response.$errors[outerIndex].activationCode"
:key="`error-${outerIndex}-${innerIndex}`"
v-if="
v$.students.$each.$response.$data[outerIndex].noActivationCode &&
v$.students.$each.$response.$data[outerIndex].activationCode.$invalid &&
submitted
"
>
<small class="p-error">{{ error.$message.replace('Value', 'Activation Code') }}</small>
<span
v-for="(error, innerIndex) in v$.students.$each.$response.$errors[outerIndex].activationCode"
:key="`error-${outerIndex}-${innerIndex}`"
>
<small class="p-error">{{ error.$message.replace('Value', 'Activation Code') }}</small>
</span>
</span>
</span>
</section>
<section v-else>
<h2 class="text-primary font-bold">You are registering for:</h2>
<div class="flex">
<h2 class="text-primary h-3 m-0 p-0" style="width: 70%" data-cy="org-name">{{ student.orgName }}</h2>
<PvButton
class="bg-primary border-none border-round p-2 text-white hover:surface-300 hover:text-black-alpha-90"
label="Is this not right?"
@click="codeNotRight(outerIndex)"
/>
</div>
</section>
</section>
<section v-else>
<div class="flex justify-content-between align-items-center">
<div class="flex flex-column my-3 gap-1">
<div class="text-xs text-gray-500 font-light uppercase">Registering for</div>
<div class="text-lg font-bold text-red-800 m-0 p-0" style="width: 70%" data-cy="org-name">
{{ student.orgName }}
</div>
</div>
<div>
<PvButton
class="bg-primary border-none border-round p-2 text-white hover:surface-300 hover:text-black-alpha-90 text-xs"
icon="pi pi-replay"
iconPos="right"
label="Use another code"
@click="codeNotRight(outerIndex)"
/>
</div>
</div>
</section>
</div>
<section class="form-section">
<div class="p-input-icon-right">
<div class="p-input-icon-right flex gap-3">
<label for="studentUsername">Student Username <span class="required">*</span></label>
<PvInputText
v-model="student.studentUsername"
Expand All @@ -82,7 +97,7 @@
<section class="form-section flex lg:flex-row">
<div>
<div>
<label for="password">Password <span class="required">*</span></label>
<label for="password">Password (Minimum 6 characters) <span class="required">*</span></label>
<PvPassword
v-model="student.password"
name="password"
Expand Down Expand Up @@ -157,7 +172,7 @@
</section>
<section class="form-section">
<!--Grade-->
<div>
<div class="flex gap-3">
<label for="grade">Grade <span class="required">*</span></label>
<PvDropdown
v-model="student.grade"
Expand Down Expand Up @@ -293,6 +308,7 @@
<PvButton
v-if="outerIndex !== 0"
class="bg-primary border-none border-round p-3 text-white hover:surface-300 hover:text-black-alpha-90"
icon="pi pi-trash"
@click="deleteStudentForm(outerIndex)"
>
Delete Student
Expand All @@ -304,8 +320,9 @@
<PvButton
class="bg-primary border-none border-round text-white p-3 hover:surface-300 hover:text-black-alpha-90"
@click="addStudent()"
icon="pi pi-plus"
label="Add Student"
>
Add another student
</PvButton>
</div>
<section class="flex mt-8 justify-content-end">
Expand Down Expand Up @@ -694,6 +711,11 @@ const validateRoarUsername = async () => {
</script>

<style scoped>
label {
font-size: 0.875rem;
font-weight: 300;
}

.stepper {
margin: 2rem 0rem;
}
Expand Down Expand Up @@ -737,11 +759,6 @@ const validateRoarUsername = async () => {
margin-top: 0;
margin-bottom: 0.75rem;
}
.student-form-border {
border: 2px solid #ccc; /* Add a border around each student form */
padding: 20px; /* Add padding for better spacing */
margin: 5px; /* Add margin for better spacing */
}
.form-section-button {
display: flex;
align-items: center;
Expand Down
Loading
Loading