shpe-at-uci / shpe-uci-portal Goto Github PK

Feature request Motivation

to attract more members to SHPE-UCI wide events, and create more easy access, transparency for anyone, not just our members

Solution

Request SHPE-UCI exec board to make a public google calendar, ask leads to save events here, and embed the html <iframe/> into a page. No API required, just that snippet of code from google calendar

Alternatives

Create a whole calendar from scratch which would be more time consuming. https://wics.ics.uci.edu/events/

Divide it by year
Include Program Manager
Front end - Back end people

Feature Request
As a user, I'd like to - Have the ability to start typing a major and autocomplete it so I don't have to type it all.

Solution - Deliverable
HTML provides a solution with datalists

Helpful Links

Will require user to input:
password
email (uci)
First name
Last name
ucinetid
major
year
phone (maybe optional)

As a user, I should be able to see my public Portfolio page, along with a preview of my resume.

Requirements:

• Resume Preview Window
• Display user info
  • Name
  • Email
  • Class status(Freshman, Sophomore,...)
  • Graduation Date
  • Seeking Internship(Yes/No)
  • Profile Picture
  • Bio
  • Anything else you think should go here.

There is no certain way this must look, as long as its pleasing for the user. :)

Feature

• Install GitBash if using Windows
• Follow README.md of shpe-uci-portal to Install & Run Python web app using Terminal or GitBash
• Create a new GitHub branch based on master & call it alumni-filter-functions
• Add a getAlumniUser() in shpe-uci-portal/app/routes/search.py file (similar to getAllUsers() func)
• Ensure that function prints users to the console when called
• Git add, commit, & push any changes to origin/alumni-filter-functions
• Open a Pull-request for a code review anytime

Notes

Reach out @Globins for GitHub Branching clarifications
Reach out @josueal1 for Firebase questions

Shadowee

None

Feature

• Install GitBash if using Windows
• Follow README.md of shpe-uci-portal to Install & Run Python web app using Terminal or GitBash
• Create a new GitHub branch based on master called it ej:admin-dashboard
• Add a shpe-uci-portal/app/templates/admin.html file
• Follow README.md of Admin-Dash-Template to Install & Preview app
• Copy any html, css files from Admin-Dash-Template into our admin.html
• Git add, commit, & push any changes to to origin/admin-dashboard
• Open a Pull-request for a code review anytime

Shadowee

@Gfmunoz

Notes

Until backend dev havenot added a /admin route, Just use the Admin-Dashboard python webserver

We need to structure our database in order to track member points.

Remember to follow the new feature guidelines outlined on the README.md document when creating your branch.

Currently, we have a users object with all our users. I believe we should have the users and the points objects separate. Heres an example

DB: {
users: {
- user_id: {name: Guillermo}
- user_id2: {name: Osvaldo}
},
points: {
- user_id: {fall: 24, winter: 45, Spring: 20}
}
}

TO-DO

• Get familiar with our repository. Go through this tutorial: link
• Get familiar with Pyrebase. link
• Get familiar with Firebase. Just play around with Authentication/Database tabs link
  - Create a route that pushes a user with some points like this:

DB: {
points: {
- user_id: {fall: 24}
}
}

Is your feature request related to a problem? Please describe.
When I click on an alumni after I search for them, I should be redirected to a more details page to find more info about them.

Describe the solution you'd like
I would like a dynamic route that will change its content based on the username entered in the url.
For instance: localhost:5000/search/guilleeh --> should give me details about the alumni with that name. We still haven't decided how we want to have unique user id's, so for now maybe use their ucinetid

Describe alternatives you've considered
Instead of a whole new window, maybe you can do a little drop down window, with all their details.

Additional context
You have freedom to choose how to implement this.

Feature Request
As a user, I'd like to - be able to reset my password if I forgot it.

Solution - Deliverable
Create a page where a user can put their email and send a password reset link. Then if they click the link, they should be able to reset their password and log in once again.

Helpful Links

manually add a paid_status attribute to every current firebase user record HERE

Feature

• Follow README.md of shpe-uci-portal to Install & Run Python web app
• Create a new GitHub branch based on master & call it admin-route
• Add a /admin route in your local branch version of shpe-uci-portal/app/__init__.py file
• Ensure that admin() function renders a basic admin.html on localhost:5000
• Git add, commit, & push any changes to origin/admin-route
• Open a Pull-request for a code review anytime

Notes

May need to reach out to @josueal1 for clarifications
May need to update admin.html from master after frontend updates

Shadowee

None

**Feature request related to a problem? **
When I want to know more about SHPE, it's inconvenient having to search valuable information.

Describe the solution you'd like

• Search box
• Upon typing I receive different cards that relate to search
• On clicking a card I am redirected to the page information
• Connect matching to a { Firebase List of Question : to redirect url }

Additional context

When a user tries to go into a protected route, they should only be allowed if they are authenticated.

As a user, I want to click on a link on the navbar of the website, and be sent to a page where I can search for alumni by name. A simple, minimal search bar is fine.

Requirements:

• Create new python file under routes for your desired route. (/search)
• Create new html/css/js file for your route
• Create dummy data on the backend where we can pull some alumni from
  • Each alumni can just have a name and email address for now
• Once a search is submitted, a list of results should be displayed below the search bar
  • We can worry about clicking each individual result later.

The CocoaPods website has an excellent example for a minimalist search feature. Below are some examples: https://cocoapods.org/

As a user, when I drag and drop a resume file on the dashboard page, the app should tell me if I'm uploading a file incorrectly

TODO

• Familiarize with the s <input type="file"> html tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
• Verify filename as Lastname_Firstname_resume.pdf using regex on Front-End: https://stackoverflow.com/questions/25801247/regular-expression-to-find-lastname-firstname-middlename-format
• Ensure MIMEtypeof file is a application/pdf. Here's basic html & js file checker->: https://gist.github.com/topalex/ad13f76150e0b36de3c4a3d5ba8dc63a

Related to: #53

User, time and from what type of system they've logged in. One to one relationship.

Settings page

Whenever branches are merged to master, the production environment should be automatically updated.

Options - CI/CD, ???

The css used in login is being used in order pages, conflicting with the style of other pages.

Brainstorm look and feel for our member portal.

Feature Request

• As a user, I'd like to notify the admins that I've paid my Venmo Fee with the press of a button
• I'd also like to see the status of my membershpe status update visually
• Backend Task: Update the paid_status of that user to pending on firebase using python flask

Solution - Deliverable

Consider reusing shpe-signin HTML, Bootstrap (CSS), JS code

Helpful Links

As a user, I'd like to be redirected to the dashboard if attempt to go into the login page or registration page. I want to stay logged in unless I log out on my own accord.

Solution - Deliverable
Solution- Check if session exists with the user in both login and registration functions in auth.py

Python script that reads csv file of zoom attendees email, checks if email exists in firebase database, increases stamp attribute +1 if time cut off met.

Resources:

Feature Request

• Make a Data schema of futureQuestion records in Google Firebase (ej: {"title" : "str"})
• Make Hierarchical Design of records of Questions on Firebase
• Make an API System Design of a /faq endpoint of GET method (gets all questions as JSON)
• Create user flow of an "admin" using a /faq to POST a new question with answer

Scrum Lead

@alejandrogznz

Developers

@saulg7746, @aovalenz18, @tlb99

Solution - Deliverable

• Meeting on Zoom & break into smaller tasks for each member

Feature Request
As a user, I'd like to - be able to see my name on the top right corner of the menu item. It currently says, "Hello, Frontend team!", but if I am logged in as Guillermo Hernandez, I would like it to say, "Hello, Guillermo".

Solution - Deliverable
Look in components.html, the navbar_logged_in(g) component, the button should dynamically have the name of the current user. You may have to define an API call to get the name of the current user since we don't have that yet.

Helpful Links
Ping Alejandro, as he worked on the macros and knows a little more about them than I do, but ping me as well if you need help.

Should include
email
password
name
major
...

Upon visiting the SHPE-UCI website, It was difficult to know the status of the system until I saw the hidden banner at the top. A centered-red box right above "login" would be great messaging!

This post request should allow existing users to edit/update their user information

Feature Request

As a user, I'd like to click a toggle button right above the search box, to only search for alumni, since right now it is searching for all members.
As a website visitor, I should able to leverage the power of SHPE UCI network member database and connect with anyone. Like Linkedin powerful filters!
Solution - Deliverable
A toggle button on the screen
Iteration over all Firebase users will contain a conditional on "Alumni"
Alumni page results must continue to look similar to current

Helpful Links

#61

-username
-password
-register link
-login button
-info about shpe @ uci
-info about the benefits of having an account

Feature

• Install GitBash if using Windows
• Follow README.md of shpe-uci-portal to Install & Run Python web app using Terminal or GitBash
• Create a new GitHub branch based on master called it ej:admin-status-on-register
• Git add, commit, & push any changes to to origin/admin-status-on-register
• Add a new key-value pair, "is_admin": "False", into the data py dictionary on this line so new Firebase Users have this attribute
• Open a Pull-request for a code review anytime
• After merging, Manually test by registering a new email thru stage-web to ensure that /register didnt break AND code added new attributes to Firebase user

Shadowee

None

Notes

The dictionary is the data model schema lives in the register() function, which is called using the /register api

As a user, when I drag and drop a resume file on the dashboard page, it should be uploaded to a Google Drive Folder.

TO-DO

• Follow this easy 30-min Google Drive API Codelab: https://codelabs.developers.google.com/codelabs/gsuite-apis-intro/#0
• Get familiar with our Python Flask repository. Go through this tutorial: https://flask.palletsprojects.com/en/1.1.x/tutorial/
• Create a branch resume-upload-api, & publish it to github servers
• Look around the Sumbit button in templates/dashboard.html,
• Create a dashboard.py in /routes (similar to settings.py) to handle the POST request triggered from submit button
• Import dashboard from routes and register app.register_blueprint(dashboard.bp) in __init__.py
• Write logic for Drive Upload:

1. Extract file from request.form
2. Setup Drive API Simple upload ( uploadType=media )
3. Send the file using API
4. Delete file from local repo

• Test getting Drive API key, try to save a file into a nested folder
• Find user name metadata stored in the app variable in flask, and use it to upload Lastname_Firstname.pdf
  Look at setting.py db.child
• If the user uploads a resume again, (write over the old resume file on GDrive OR deletes the file and reupload new)

Solution to Blocker:

• edit auth.py in @bp.route('/register', to add a resume_id: None in the data
• Coordinate zoom call with Josue to wipe out Firebase, Merge Redeploy
• Test creating a new account,
• Add if conditional in dashboard.py for POST handler if resume_id is not empty then update file

End Goal:

• GET request for /dashboard loads a usual, but POST request for /dashboard is reserve to upload resumes

UI/UX

• Add a flask conditional statement: "if data variable exist; then: show message; else "Drag Resume here" "
• return render_template() that sends data dictionary with a message "Resume Uploaded"

Extra

• Try using resumable upload with Drive API

Feature Request

As a SHPE at UCI Board member, I'd like to visualize KPI (key performing indicator) metrics about our chapter.

Solution - Deliverable

Create new Flask /admin website endpoint for Prototype
Customize template https://github.com/jonalxh/Flask-Admin-Dashboard
Consider Firebase user attributes for Permissioning

Helpful Links

When a user tries to access a page with that does not exist, a custom 404 page should be shown.
Here are some examples.

YT link will be added later.

As a user, I should be able to see my public Portfolio page, along with a preview of my resume.

Requirements:

Resume Preview Window
Display user info
Name
Email
Class status(Freshman, Sophomore,...)
Graduation Date
Seeking Internship(Yes/No)
Profile Picture
Bio
Anything else you think should go here.
There is no certain way this must look, as long as its pleasing for the user. :)

Feature Request

As an admin user, I'd like to see a clickable menu option that takes me to /admin

Solution - Deliverable

Helpful Links

Feature

• Install GitBash if using Windows
• Follow README.md of shpe-uci-portal to Install & Run Python web app using Terminal or GitBash
• Create a new GitHub branch based on master called it ej:paid-status-on-register
• Git add, commit, & push any changes to to origin/paid-status-on-register
• Add a new key-value pair, "paid_status": "general", into the data py dictionary on this line so new Firebase Users have this attribute
• Open a Pull-request for a code review anytime
• After merging, Manually test by registering a new email thru stage-web to ensure that /register didnt break AND code added new attributes to Firebase user

Shadowee

@jesusantmoto

Notes

The dictionary is the data model schema lives in the register() function, which is called using the /register api

Using Flask sessions or cookies, the user should be able to stay logged in if they click that option.

As a user, if I am part of a shpe Familia from the mentorSHPE program, I would like to see the points my Familia has.

We need to design how we want to store the points using Firebase Realtime Database.

I imagine something like this

families: {
  fall: {
    tech-eaters: 25,
    dino: 50,
  }
}

TO-DO

• Get familiar with our repository. Go through this tutorial: link
• Get familiar with Pyrebase. link
• Get familiar with Firebase. Just play around with Authentication/Database tabs link
• Create a Flask get request that gives us the data for the familias.
• Create a Object Classes representing: Points, Teams, Teammember, Dashboard
• Create an API endpoint to add, update, delete: points, teams, teammembers

Helpful Links / Visuals
Example Leaderboard Dashboard Metrics UI

As a user on my phone, if I access the login page I should be able to easily login by fitting the center container correctly in mobile.

To-Do

• Make login page mobile friendly.
• Change "SHPE | UCI Portal" to "SHPE at UCI Portal"
• Integrate error message to be above the login container. Refer to image below for where it should be.

When a user logs in they should be able to keep their session regardless of the page they visit.

Refer to this: https://flask.palletsprojects.com/en/1.1.x/quickstart/#sessions

Feature Request

As a developer, I'd like to call a function within my /promote/<user_email> API

Solution - Deliverable

Write a function in extensions.py that:

• Takes a user email string as input (assume email will always be valid)
• Searches for that user in DB (Similar to get_user(username: str) -> FBUser )
• Sets is_admin attribute, of that user, to True
• If successful return 200, else (if useremail not found) 400

Helpful Notes

• Test function locally, call it directly above render(dashboard.html) in __init__.py#L73
• This function will be called via a POST /promote/<user_email>

Refer to this resource!

https://flask.palletsprojects.com/en/1.1.x/quickstart/#routing

Is your feature request related to a problem? Please describe.
When I register for a new account, I would like for the site to make sure that there is protection against bots. We don't want spam in our databases.

Describe the solution you'd like
There is a python library for implementing ReCaptcha's - https://github.com/mardix/flask-recaptcha/

Describe alternatives you've considered
You can follow this tutorial - https://pusher.com/tutorials/google-recaptcha-flask
This may require for us to change how we implement forms.

Additional context
If possible, could you fix the gray bar above the navbar bug on the registration page?
Also, if you could make the registration page responsive that would be great as well.

IMPORTANT
You will have to re-download the .env file from slack, as it contains the new variable keys for the recaptcha.

Dashboard page, page redirected to after logging/registering

Something clean like this. Talk to the other people in the front end team to get the right colors they are working with.

To-Do

• Finish CSS for registration Page, make it consistent with the login page.
• Make Registration Page mobile friendly.
• Ask for help in the slack "#Web-portal" channel.
  @Johan-Cuevas

As a user, if I click remember me, I should be able to keep my session going even if I exit the browser.

The web portal should also have a way to prevent spam or bots from login in by using reCapcha