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 10 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
2 changes: 1 addition & 1 deletion cypress/e2e/partner-admin/default-tests/parentSignUpInvitationCode.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ function completeParentSignUp(org) {
cy.get('div.p-checkbox-box').click();
cy.get('button').contains('Continue').click();
cy.get('button').contains('Next').click();
cy.get('h2').should('contain.text', org.orgVerified);
cy.get('div').should('contain.text', org.orgVerified);
}

describe('The partner admin user', () => {
Expand Down
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
173 changes: 98 additions & 75 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,11 +1,34 @@
<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>
<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-column 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>
<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 text-sm"
label="Validate"
@click="validateCode(student.activationCode, outerIndex)"
/>
</PvInputGroup>
<div class="flex align-items-center">
<PvCheckbox
v-model="student.noActivationCode"
Expand All @@ -16,51 +39,53 @@
<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"
: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 my-2">
<div class="flex-column gap-2">
<div class="text-xs text-gray-500 font-light uppercase">Registering under</div>
<div class="flex gap-2">
<PvInputText
:placeholder="student.orgName"
disabled
class="text-lg font-bold text-gray-800 py-2"
variant="filled"
/>
<div>
<PvButton
class="bg-primary border-none border-round py-2 text-white hover:surface-300 hover:text-black-alpha-90 text-md"
icon="pi pi-replay ml-2"
iconPos="right"
label="Enter another code"
@click="codeNotRight(outerIndex)"
/>
</div>
</div>
<div>
<small class="text-xs text-gray-500 font-light"
>This is the default ROAR@Home registration group.</small
>
</div>
</div>
</div>
</section>
</div>
<section class="form-section">
<div class="p-input-icon-right">
<div class="p-input-icon-right flex flex-column">
<label for="studentUsername">Student Username <span class="required">*</span></label>
<PvInputText
v-model="student.studentUsername"
Expand All @@ -82,7 +107,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 @@ -125,7 +150,7 @@
<section class="form-section">
<div>
<!-- Age / DOB -->
<div class="flex justify-content-between">
<div class="flex justify-content-start gap-2">
<label>Date of Birth <span class="required">*</span></label>
<div class="flex align-items-center">
<PvCheckbox v-model="student.yearOnlyCheckRef" :binary="true" name="yearOnly" />
Expand Down Expand Up @@ -154,10 +179,7 @@
v$.students.$each.$response.$errors[outerIndex].dob.$message.replace('Value', 'Date of Birth')
}}</small>
</div>
</section>
<section class="form-section">
<!--Grade-->
<div>
<div class="flex flex-column">
<label for="grade">Grade <span class="required">*</span></label>
<PvDropdown
v-model="student.grade"
Expand All @@ -168,11 +190,14 @@
/>
</div>
</section>
<section class="form-section">
<!--Grade-->
</section>
<PvAccordion>
<PvAccordionTab header="Optional Info">
<!--First / Last Name-->
<section class="form-section">
<div>
<div class="flex flex-wrap">
<label for="firstName">First Name </label>
<PvInputText
v-model="student.firstName"
Expand All @@ -188,9 +213,7 @@
<label for="middleName">Middle Name </label>
<PvInputText v-model="student.middleName" name="middleName" />
</div>
</section>
<section class="form-section">
<div>
<div class="flex flex-column">
<label for="lastName">Last Name </label>
<PvInputText
v-model="student.lastName"
Expand All @@ -204,7 +227,7 @@
</section>
<section class="form-section">
<!--English Language Level-->
<div class="mt-4 mb-5">
<div class="mt-2 mb-3">
<label for="ell">English as a Second Language</label>
<PvDropdown
v-model="student.ell"
Expand All @@ -215,7 +238,7 @@
/>
</div>
<!--Sex-->
<div class="mt-4 mb-5">
<div class="flex flex-column mt-2 mb-3">
<label for="sex">Gender </label>
<PvDropdown
v-model="student.gender"
Expand All @@ -226,9 +249,9 @@
/>
</div>
</section>
<section class="form-section">
<section class="form-section mt-2 mb-3">
<!-- Free-Reduced Lunch -->
<div class="mt-4 mb-5">
<div class="flex flex-column">
<label for="stateId">Free-Reduced Lunch </label>
<PvDropdown
v-model="student.freeReducedLunch"
Expand All @@ -239,7 +262,7 @@
/>
</div>
<!-- IEP Status -->
<div class="mt-4 mb-5">
<div class="flex flex-column">
<label for="stateId">IEP Status</label>
<PvDropdown
v-model="student.IEPStatus"
Expand All @@ -250,9 +273,9 @@
/>
</div>
</section>
<section class="form-section">
<section class="flex flex-row form-section mt-2 mb-3">
<!-- Race -->
<div class="mt-4 mb-5">
<div class="flex flex-column">
<label for="race">Race </label>
<PvAutoComplete
v-model="student.race"
Expand All @@ -263,7 +286,7 @@
/>
</div>
<!-- Hispanic Ethinicity -->
<div class="mt-4 mb-5">
<div class="flex flex-column">
<label for="hispanicEthnicity">Hispanic or Latino Ethnicity </label>
<PvDropdown
v-model="student.hispanicEthnicity"
Expand All @@ -273,10 +296,7 @@
name="hispanicEthinicity"
/>
</div>
</section>
<section class="form-section">
<!-- Home Language -->
<div class="mt-4 mb-5">
<div class="flex flex-column">
<label for="stateId">Home Language </label>
<PvAutoComplete
v-model="student.homeLanguage"
Expand All @@ -293,8 +313,10 @@
<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)"
>
<i class="pi pi-trash mr-2"></i>
Delete Student
</PvButton>
</section>
Expand All @@ -304,8 +326,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 +717,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 +765,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