Back button is not working on https://jeevanrakht.herokuapp.com/locate

The Footer needs to be redesigned with the the given Font Awesome images.
@Soumya44 : Can you fix it back please?
Or anyone who wants to claim it?

please assign tasks to specific person @admins, all are working on one issue, you should allocate an issue to almost two people, rest gets demotivated if their pull is not merged. Look into the issue, please.

Please allow some validation for the contact form

Hi!

Target file: app.html

Basic overview of the App's structure:

• Header
• • Logo (centered)
• • Profile Avatar/Photo
• BodyContent
• • Button with Label placed above (Locate Blood)
• • Button with Label placed above (Donate Blood)
• Footer
• • Contact #
• • Know More
• • Email ID

The image above is the UI design of the App's first screen. Please note the following:

1. Mark the elements' position
2. Ensure a fluid responsive implementation / HTML
3. Colors: https://github.com/UdacityFrontEndScholarship/jeevan-rakht#color-palette
4. For the icon use FontAwesome
5. The base/background should implement this specific particle.js : https://vincentgarreau.com/particles.js/
6. Include the GitHub pages link to your fork.

Looking forward to relevant quality contributions by Monday, 17th April, 2018
Vidit @ JeevanRakht

can i improve the header look?

When the site is visited https://jeevanrakht.herokuapp.com/ the Particle Js is not loaded since it is loaded over HTTP connection .It needed to be changed to HTTPS .Because Chrome blocks the content loaded over HTTP.

The next task at back-end is to test the functionalities of donate page.
Step-1 User registered on jeevanrakht
Step-2 User clicks on donate button, he will be taken to the donar profile page for filling up the further details needed for a donor.

route file:(back-end code) routes/profile/users.js
html file(donar profile page) routes/profile/users.hjs

You can refer to the below section of the wireframe attached in README file.

The templates will be ready to start working and contributing so stay tuned and DM me or @sujan-patel for more details.

Deadline: 5 May, 2018

Check below files where client side sample HTML is written
/views/auth/login.hjs
Below is the sample rout file
/routes/auth/login.js

1. Check user validation
2. Allow user login if everything is ok and set the client session.

On successful login, redirect to the page where he came from
Deadline: 22 Apr,2018

Reference: The Wireframe in the README.md

Target file: app.html (create a div for the locate blood functionality)
Source .PSD files:

1. https://github.com/UdacityFrontEndScholarship/jeevan-rakht/blob/master/public/assets/UI/PSD/MockUp_original.psd PSD CC 2018 - with Artboards
2. https://github.com/UdacityFrontEndScholarship/jeevan-rakht/blob/master/public/assets/UI/PSD/jeevanrakht-signin-signup%20mock.psd

Fonts:

• https://github.com/UdacityFrontEndScholarship/jeevan-rakht/tree/master/public/assets/UI/Fonts

Basic overview of the App's structure:

Header
    Logo (centered)
    Profile Avatar/Photo
BodyContent
    <div#StateC>: (When session is valid)
        Locate Blood H1 / H2
        Query
        Query modification / magnifier icon
        <blood unit count> Blood units available
        <table>
            <thead>
             <tbody> <tr> <td> x 5 columns
Footer
    Contact #
    Know More
    Email ID

The image above is the UI design of the App's first screen. Please note the following:

Mark the elements' position
Ensure a fluid responsive implementation / HTML
Colors: https://github.com/UdacityFrontEndScholarship/jeevan-rakht#color-palette
For icons use FontAwesome free library
The base/background implements this specific particle.js : https://vincentgarreau.com/particles.js/
Include the GitHub pages link to your fork.

Looking forward to relevant quality contributions by Monday, 21st April, 2018
Vidit @ JeevanRakht

The next task at back-end is to implement the book appointment functionalities of donate page.
Step-1 User registered on jeevanrakht
Step-2 User clicks on donate button and if 90 % details needed for a donor is completed via profile update, he will be taken to the book appointment page. There on click of book, the details will be saved in DB.
route file:(back-end code) routes/main/donate.js
html file(book aapointment page) routes/main/donate.hjs

Book Page URL : https://jeevanrakht.herokuapp.com/donate

The HTML is ready as you can see in above image. We need to store the appointment details in the MongoDB.

Deadline: 8 May, 2018

The screenshot of the issue is included at the end

Steps to reproduce:

1. Open index.html
2. Switch the view to portrait
3. Click on the hamburger to bring out the sidebar
4. Click just besides the cross of sidebar
5. The navbar opens just over the sidebar

Note: The reverse does not happen. Opening sidebar after opening navbar, minimizes the navbar.

If the moderators approve, shouldn't we agree to a color scheme to use for the project?

jeevanrakht.pdf
Sync_forked_repo_with_parent_repo.docx

There is some margin after the footer/social media links division.

Please implement OAuth2 using hybrid flow:
https://developers.google.com/identity/sign-in/web/server-side-flow
Check below files where client side code for OAuth2 is written
/views/auth/login.hjs
which connects with google server to get one time Code. There will be an ajax call to our endpoint
/routes/oauth2/gconnect.js
to exchange the OAuth2 code sent from client with access token and hence verify the user, if user verified, we have to perform below actions:

1. Store the name, picture URI and email in client session
2. See if user exists, if it doesn't make a new one and add user in database
3. On success, return the HTML string to the client side ajax call and redirect to home.
   Below screen appears when you click on google (which is implemented at client side)
   The client_secret is kept at below path:
   /config/gp_client_secrets.json

Here ,a user authorizes your app on the client side using the JavaScript API client and you send a special one-time authorization code to your server(using ajax call login.hjs). Your server exchanges this one-time-use code to acquire its own access and refresh tokens from Google for the server to be able to make its own API calls, which can be done while the user is offline. This one-time code flow has security advantages over both a pure server-side flow and over sending access tokens to your server.

This is the sample screen, which should be shown once user is authenticated.

On Logout, call below URI to revoke access and clear the client session
https://accounts.google.com/o/oauth2/revoke?token=

Deadline: 22 Apr, 2018

jeevanrakht_REST_APIs.pdf

https://jeevanrakht.herokuapp.com/index.html

The size of the headlines remain same even for the devices having smaller screen size.

permit needed to convert the whole site, with necessary pages as an angular 4 single page app. I would take 1 working days to complete the app. waiting for approval!

Check below files, and create the signup page template as per wireframe and test the create user flow
/views/auth/signup.hjs
Below is the sample route file in project directory
/routes/auth/signup.js

See if user exists, if it doesn't make a new one and add user in database
Once successful signed up, we have to perform below actions:

1. Add user in client session and in database
2. Email verified flag will be 'N'
3. On success, redirect to page where he came from.
   Deadline: 26 Apr, 2018

Issue 1:
Images and banners are important part of any website. They are the lifeline of UI of any app. High quality images define the appeal of a site. This is what we require first of all.

What we have in mind:
A design for the banner (dimension given below) must originally be in 300dpi and at least 1000px x 1000px which is free for non-commercial use. If you are going for solid color then please refer to our document’s brand guidelines for the color you may use in solid BG designs. You may go for designs with overlay brand colors or with linear-gradient over an image.
Please refer to the brand document for detailed info.

Naming convention for you designs submission:
Name ur images like img1, Img2 etc. Check beforehand the number of images available in the images folder of repo. Add your designs to the public/assets/images folder and not public/assets/optimised-images.

Sub-task:
You can optimise existing images in the images folder using gulp/grunt and then add then to the images-optimised folder.

Allowed extension .jpg , .jpeg , .png , .gif

File Size:
Make sure that the final design isn't more than 2 MB

Image Dimension
Please check with @Soumya44 regarding required image dimension so that you don't go creating designs which don't fit the need

Sources:
Please refer pexels.com for grabbing HD images for designing.
Example: The udacity images have linear gradient overlays.

why the main.css is removed?

Please implement OAuth2 using hybrid flow:
https://developers.google.com/identity/sign-in/web/server-side-flow
Check below files where client side code for OAuth2 is written
/views/auth/login.hjs
which connects with google server to get one time Code. There will be an ajax call to our endpoint
/routes/oauth2/fbconnect.js
with access token and hence verify the user, if user verified, we have to perform below actions:

1. Store the name, picture URI and email in client session
2. See if user exists, if it doesn't make a new one and add user in database
3. On success, return the HTML string to the client side ajax call and redirect to home.

The client_secret is kept at below path:
/config/fb_client_secrets.json
Below screen appears when you click on google and fb login (which is implemented at client side)

This is the sample screen, which should be shown once user is authenticated.

On Logout, call below URI (DELETE request) access and clear the client session
https://graph.facebook.com/fb_id/permissions?access_token=
Deadline: 22 Apr, 2018

The blood needed cards are not of equal sizes

Following html files are requesting bootstrap.min.js and bootstrap.css libraries which does not exists in assets folder.

1. login.html
2. signup.html
3. profile.html

Requesting moderators to please have a look at it.
Thanks,
Devesh Patel (@anonymous)

Add some margin in each column when it hits mobile view.

Reference: The Wireframe in the README.md

Target file: app.html (create a div for the locate blood functionality)
Source .PSD files:

1. https://github.com/UdacityFrontEndScholarship/jeevan-rakht/blob/master/public/assets/UI/PSD/MockUp_original.psd PSD CC 2018 - with Artboards
2. https://github.com/UdacityFrontEndScholarship/jeevan-rakht/blob/master/public/assets/UI/PSD/jeevanrakht-signin-signup%20mock.psd

Fonts:

• https://github.com/UdacityFrontEndScholarship/jeevan-rakht/tree/master/public/assets/UI/Fonts

Basic overview of the App's structure:

Header
    Logo (centered)
    Profile Avatar/Photo
BodyContent
    <div#StateB>: (When session is null / empty)
        Locate Blood H1 / H2
        Query
        Query modification / magnifier icon
        <blood unit count> Blood units available
Footer
    Contact #
    Know More
    Email ID

The image above is the UI design of the App's first screen. Please note the following:

Mark the elements' position
Ensure a fluid responsive implementation / HTML
Colors: https://github.com/UdacityFrontEndScholarship/jeevan-rakht#color-palette
For icons use FontAwesome free library
The base/background implements this specific particle.js : https://vincentgarreau.com/particles.js/
Include the GitHub pages link to your fork.

Looking forward to relevant quality contributions by Monday, 21st April, 2018
Vidit @ JeevanRakht

Below is the screenshot of the issue.
The textarea in "HAVE A QUESTION?" card can be resized (vertically), and it's height becomes more than that of parent form. I have not found a workable solution as of now. But disabling the resizing property is a work around. Tried to give the height of .card.one as auto or fit-content, but in turn it affects "FACT FOR THE DAY" card. Also, the background image's size starts to changes with the resizing of the textarea.

PS: I'm new to this project, so some suggestions on how to write/improve an issue are welcomed 😄

The next task at back-end is to test the functionalities of donate page.
Step-1 Either a registered or new user can locate donors on jeevanrakht.
Step-2 User clicks on locate button, he will be taken to the locate page. Then search and list donors based on the selection criteria.
Donorlist page URL: https://jeevanrakht.herokuapp.com/donarlist
If you are a registered user you can see detailed list with donor names & other info otherwise you will see only the basic details like number of blood units available.
route file:(back-end code) routes\main\donarlist.js
html file(donarlist page) views\main\donarlist.hjs

Check the locate blood State-B and State-C mockups in below path:
https://github.com/gauravsinghaec/jeevan-rakht/tree/master/_workables/UI/WebApp

You can refer to the below section of the wireframe attached in README file.

The templates will be ready to start working and contributing. So stay tuned and DM me or @sujan-patel for more details.

In order to implement email verification, you can use node mailer or
Sendgrid mailing.
Below are the required steps:

1. send verification link(with token) to the given email and
   Route files: routes\profile\verifyemail.js
2. once user follows the link , verify the token and hence update the flag in database
   Route files: routes\profile\verifyemail_finish.js
3. Redirect back to profile page of users.

Please check the profile page https://jeevanrakht.herokuapp.com/users where you will get button to verify email.

Please refer to the RESTApi pdf in README to know more about the API endpoints to be used for the project.

Deadline : 25 Apr, 2018

In order to implement forgot/change password functionality, you can use node mailer or
Sendgrid mailing.
Below are the required steps:

1. send password reset link(with token) to the given email and
   Route files: routes\auth\forgot.js
2. once user follows the link , take him/her to the reset page to type new password
   Route files: routes\auth\forgot_finish.js
3. Once user submits new password, update the table to store the hash values for password and redirect back to profile/login page of users wherever he/she came from.

Please check the profile page https://jeevanrakht.herokuapp.com/users where you will get button to change password. You will have the forgot password link in login page as well

Please refer to the RESTApi pdf in README to know more about the API endpoints to be used for the project.

Deadline : 25 Apr, 2018

@viditkothari @Soumya44 I would like to work on this. Please do let me know if i can proceed.

Now all the validation happens at server side but as you all know its unnecessary to send HTTP request to server before validating input values at the client side. We have kept pretty simple validation as of now and hope you will gain more hands on on JS by working on this issue:
Validate form on click of save (event handler using JS) button or validate on change event as user types in a value in the field.

HTML File: views/auth/signup.hjs

Field Name | Validation Criteria
First Name | first name must contain minimum 3 chars
Last Name | last name must contain minimum 3 chars
Bank Name | bank name must contain minimum 3 chars
License Name | license name must contain minimum 3 chars
Password | password must contail one capital & one small letter with total six chars min.
Confirm Password | Both passwords should match

Page URL: https://jeevanrakht.herokuapp.com/signup

Please feel free to reach jeevanrakht team for any help.
Happy Coding.....

What if we can use database as a service for the project. This will help create a centralized database for the application.

Hi All!

This is task no. 2.

What you have to do ?

Build the index.html page from the homepage mockup link in the Readme.

Comment your code properly.

While submitting ur PR provide a link to preview ur fork hosted on gh-pages.

We will only consider reviewing ur code if u provide the website link of ur fork.

Deadline:

This Sunday 15 APR.

Get cracking people!!!

A basic template of readme file which gives information about this project and how to start contribution.

The header is poorly designed & need to be redesigned for Homepage.

Reference: The Wireframe in the README.md

Target file: app.html (create a div for the locate blood functionality)
Source .PSD files:

1. https://github.com/UdacityFrontEndScholarship/jeevan-rakht/blob/master/public/assets/UI/PSD/MockUp_original.psd PSD CC 2018 - with Artboards
2. https://github.com/UdacityFrontEndScholarship/jeevan-rakht/blob/master/public/assets/UI/PSD/jeevanrakht-signin-signup%20mock.psd

Fonts:

• https://github.com/UdacityFrontEndScholarship/jeevan-rakht/tree/master/public/assets/UI/Fonts

Basic overview of the App's structure:

Header
    Logo (centered)
    Profile Avatar/Photo
BodyContent
    <div#StateA>:
        <input> #Search PIN / City
        <dropdown> #BloodGroup
        <dropdown> #radius (range 5km - 50km)
        <input> #when date (default: 2 days)
        <button> Search
Footer
    Contact #
    Know More
    Email ID

The image above is the UI design of the App's first screen. Please note the following:

Mark the elements' position
Ensure a fluid responsive implementation / HTML
Colors: https://github.com/UdacityFrontEndScholarship/jeevan-rakht#color-palette
For icons use FontAwesome free library
The base/background implements this specific particle.js : https://vincentgarreau.com/particles.js/
Include the GitHub pages link to your fork.

Looking forward to relevant quality contributions by Monday, 21st April, 2018
Vidit @ JeevanRakht

A navigation bar containing necessary pages. I want to work on this.

Update the mentioned file with a creative implementation of 404 error message.
404 is the page a user sees when he/she either enters wrong URL or there is no file found at the entered URL / endpoint.
/views/404.hjs

Few example 404s:
Creative 404s
GitHub's 404

Fell free to update the sample template and share with team. Make sure the design aligns well with the brand persona.

The nav bar on your know more page is not properly aligned. The done button has zero top margin, the search bar is not responsive

The focus highlight on search-box input field is not proper. It shows extra margin on the right side.

I've worked out some avatar thing for the login page.
It is in my starter's repository : https://github.com/utkarsh2102/GoogleUdacity_JeevanRakht/blob/master/login.html
Please fix the changes for improving the UI.
And then this will be merged here.

https://jeevanrakht.herokuapp.com/index.html