BridgeInTech (BIT) is an application that allows organizations, mentors and mentees to actively collaborate through mentoring programs. This is the frontend client of BridgeInTech.
As a student,
I need create a high-fidelity Mockup on Create User Profile,
so that I can move forward with my planning stage.
Mocks
as per initial proposal Figure 4.6. Create Profile
Acceptance Criteria
Update [Required]
must have section title Update Profile - Personal Details with necessary components as per initial mockup or with some modifications approved by mentors
must have section title Update Profile - Additional Information with necessary components as per initial mockup or with some modifications approved by mentors
must have section title Update Profile - Personal Background with necessary components as per initial mockup or with some modifications approved by mentors
all details present in the mockup must be part of this story. All details should be viewable for this story. Editing the details will be a separate story.
must have section title Personal Details with necessary components as per initial mockup or with some modifications approved by mentors
must have the following fields:
Username
Email
Name
IRC ID
Option for Available to be a mentor (Mentor, Mentee, Both)
Given I am on registration page, When I submit all details successfully, Then I see a message saying registration was successful.
Given I submit the registration form, When I receive an error from the backend service, Then I see a message saying there was an error
must have all the fields for Mentorship System user registration:
[ ] name
[ ] username
[ ] email
[ ] password(should be masked)
[ ] terms and conditions
must have available to be a Mentor, Mentee radio buttons
must have Signup and Login buttons
Given I am on the registration page, When I click on submit after filling the form, Then I see validation errors on the UI if any one of the following are an issue
Email does not match [email protected], password does not follow a combination of at least 1
digit, at least special character, at least uppercase letter, and length as 12 characters, confirm
password does not match password, any of the mandatory fields are missing, terms and
conditions is not checked.
Name: Min length = 2 , max length = 30
Username: min = 5 max = 25
Password: min = 8 max = 64
Email: please match the pattern
For the "name" field to be valid, it may contain one or more character from:
letter "a" to "z" and/or "A" to "Z",
any of the whitespace characters, and/or
special character "-".
For the "email" field to be valid, it must have the following structure:
the first section, which may contain one or more character from:
- letter "a" to "z" and/or "A" to "Z",
- number "0" to "9",
- special character "_", ".", "+", and/or "-".
followed by the "@" character,
followed by the second section, which may contain one or more character from:
- letter "a" to "z" and/or "A" to "Z",
- number "0" to "9", and/or
- special character "-".
followed by the escaped character ".",
followed by the third section, which may contain one or more character from:
- letter "a" to "z" and/or "A" to "Z",
- number "0" to "9",
- special character "-" and/or ".".
For the "username" field to be valid, it may contain one or more character from:
- letter "a" to "z" and/or "A" to "Z",
- number "0" to "9", and/or
- special character "-".
Is your feature request related to a problem? Please describe.
At the moment there is no confirm password field on the Register form.
Describe the solution you'd like
Confirm password field and its validation (checking that the password and confirm password fields match) is useful to help user confirm the password they have given on the password field.
Describe alternatives you've considered
Open to contributor's idea as long as it fits the application well.
Describe the bug
Backend code has been modified by adding the expected fields validation check which means if frontend payload does not match request body, it will response with error code Bad reequest (400)
To Reproduce
Steps to reproduce the behavior:
Go to Register and register as a new user with only one availability checked ("available as mentor" or "need mentoring", but not both)
Submit the form and see the error response below:
"Unexpected input is detected. Please check your input to make sure only approved fields are to be submitted."
Expected behavior
No error message should be returned since availability options are optional.
Screenshots
Desktop (please complete the following information):
As a student,
I need create high-fidelity mockup for Register,
so that I can move forward with on the planning stage.
Mocks
Initial idea (per proposal)
Figure 1.1. Register
Acceptance Criteria
Update [Required]
must have all the fields for Mentorship System user registration:
[ ] name
[ ] username
[ ] password
[ ] confirm password
[ ] email
[ ] terms and conditions check box
[ ] need mentoring check box
[ ] available to mentor check box
must have Organization and Mentor/Mentee check box
As a user,
I need to see the list of all organizations involved in BridgeInTech,
so that I can go through the list and select which organization I should work with in the mentoring program.,
Mocks
NA
Acceptance Criteria
Update [Required]
must have a list of organizations so that users can view the mentoring program
Is your feature request related to a problem? Please describe.
At the moment password field has no show/hide visibility option on the login and register form.
Describe the solution you'd like
Password fields need to have a show/hide visibility option so they can check their input on the field.
Describe alternatives you've considered
Open to contributor's idea as long as it fits the application well.
As a student],
I need create a high-fidelity mockup for Create/Update Organization Profile,
so that I can move ahead with my planning stage.
Mocks
as per initial proposal:
Figure 3.3. Create Company Profile
Acceptance Criteria
Update [Required]
must have section title Create/Update Organization Profile with necessary components as per initial mockup or with some modifications approved by mentors
The Register component has many input fields. And it raises or displays a validation message if any of the inputs are not according to the format expected.
Acceptance Criteria
Write tests using React Testing Library in the Register.test.js file
As a GSoC student,
I need create view programs list and programs from route MyOrganization > Portfolio,
so that I can view programs list and selected program details where the logged in user is the organization representative.
Mocks
NA
Acceptance Criteria
Update [Required]
View list of programs under MyOrganization > `Portfolio
View Program profile when selecting a program under the list of programs above
Describe the bug
Tried to reclone anitab-rg/bridge-in-tech-web and run BIT web app, and I got this error:
./src/register/Register.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/register/Register.css)
Error: Package exports for 'C:\Users\foongmin\Desktop\bridge-in-tech-web\node_modules\autoprefixer\node_modules\kleur' do not define a valid './colors' target
As a developer,
I need check if a warning comes up for each of the form fields if input inserted is invalid,
so that I can make sure user insert a valid input.
Mocks
Acceptance Criteria
Update [Required]
Write tests using React Testing Library in the Login.test.js file
Display details related to personal background as per the mockup - gender, age, ethnicity, sexual orientation, religion, physical ability, mental ability, socio economic, highest education, years of experience
Add unit tests that test if these fields are displayed
As a user,
I want to login on BIT,
So that I can login as mentor/mentee to see programs I like
Out of Scope
Persisting the auth JWT token on the client side and using it in every request to backend
Being able to login via email
On successful login, when user directed to Member Portfolio page, the Login link should be replaced with Logout option & Register should not show for logged in user
Given a user enters credentials to login, When the auth token is received, Then it gets persisted on the front end (either cookies, local storage , etc.)
Given a request is made to the backend, When the user is logged in, Then every request has the auth token in it's header
Test to check if auth token is persisted.
Test to see if auth token is used in the header for another request
Is your feature request related to a problem? Please describe.
At the moment for login user who is not an organization representative (has not declared that they are), when they go to My Organization, on the Organization Profile page they can try to click on the Go to Programs or Save buttons which should've been prevented.
Describe the solution you'd like
Disable the Go to Prrograms and Save buttons on Organization Profile page if login user is not (has not declared) an organization representative.
As an organization,
I need to create or update the organization profile BridgeInTech,
so that I can create or modify the information inside my organization profile.
As a contributor,
I need to see a link on the README file to where I can read setup instruction for development environment of Bridge In Tech backend,
so that I can contribute to the project.
Mocks
NA
Acceptance Criteria
Update [Required]
Add a link with necessary description on README.md to go to BridgeInTech Development Environment Setup Instructions which can be found on bridge-in-tech-backend wiki repository.
As a student,
I need write test cases for View user's personal details functionality,
so that I can ensure the View user personal details does what it is supposed to do, allow user to view their personal details.
Mocks
NA
Acceptance Criteria
Update [Required]
write test cases using react-testing-library
write test to check if user personal details information are displayed properly from get call
write test to check if modified fields are sent in put request for update
As a user,
I can be an representative of an organization to get an organization profile BridgeInTech,
so that I can view the information for my organization profile.
As a developer,
I need test if redirection post successful login works
so that I can make sure user who has successfully logged-in gets redirected to the homepage with the main navbar showing username of login user.
Mocks
Acceptance Criteria
Update [Required]
Write tests using React Testing Library in the Login.test.js file
test if user gets redirected to homepage with main navbar showing their username after successful login
Is your feature request related to a problem? Please describe.
At the moment the login user who represents an organization but has not created the organization profile can click the button Go to Programs on the bottom of the Organization Profile page (under My Organization Navbar tab) which should've been prevented.
Describe the solution you'd like
Disable the Go to Programs button on the My Organization Organization Profile page if the login user who has declared that they are an organization representative has not created the organization.