search

anitab-org / mentorship-ios

THIS PROJECT IS ARCHIVED. Mentorship System is an application that matches women in tech to mentor each other, on career development, through 1:1 relations during a certain period of time. This is the iOS application of this project.
GNU General Public License v3.0
14 stars 28 forks source link

feat: Social logins #112

Closed yugantarjain closed 4 years ago

yugantarjain commented 4 years ago

Description

This PR implements social logins on the app for two providers - Apple and Google. Now, a user can sign into the app using username/password, or through the convenient social sign-in methods. The social sign-in process uses new callback APIs on the backend (PR).

To test -

  1. The backend server must be setup on the local machine and the above mentioned PR shall be used.
  2. Apple Developer Account must be used in Xcode to create certificates and 'Sign in with Apple' capability shall be added.

Note: run 'pod install' in the project directory before running and use .xcworkspace instead of .xcodeproj (Instructions for setting up the project in the README have been updated)

Mocks

Login Screen Apple Sign In Google Sign In
image Screen Shot 2020-08-14 at 5 37 28 AM Screen Shot 2020-08-14 at 5 37 54 AM

Fixes #23

Type of Change:

Code/Quality Assurance Only

How Has This Been Tested?

Tested on Simluator

Checklist:

Code/Quality Assurance Only

sunjunkie commented 4 years ago

My comments so far: 1 - Social logins should be visible on the sign up and login screens without scrolling. You will have to adjust these screen layouts. (tested on iPhone 8) 2 - Need to note in the docs that to test social logins you must set the developer account AND change the bundle identifier.

yugantarjain commented 4 years ago

My comments so far: 1 - Social logins should be visible on the sign up and login screens without scrolling. You will have to adjust these screen layouts. (tested on iPhone 8) 2 - Need to note in the docs that to test social logins you must set the developer account AND change the bundle identifier.

  1. I think it'd be better to have them only on the login screen and not sign-up (since the backend API handles both the cases), otherwise the user may get a wrong idea about which button on which screen does what. To show them without scrolling, one solution can be to remove logo image and use a navigation bar instead in login screen... What do you think?

  2. Okay.

sunjunkie commented 4 years ago

1- yes I think you are right about the signup screen.

I can’t envision what you mean by the nav bar. But the issue only occurs on certain smaller screens.

yugantarjain commented 4 years ago

@sunjunkie to show sign-in buttons without scrolling on small screens, I can think of two solutions -

  1. Remove scroll view. SwiftUI manages to show everything by scaling down the mentorship system image (it is resizable, image size now depends on the screen size).

  2. Remove image and use a simple title instead (like we do in sign-up screen).

Method 1 Method 2
IMG_EA267E583F59-1 IMG_A2285924F989-1

Personally, I think the current implementation (scroll view) works well. However, if we do want to remove that, I think Method 2 looks better.

sunjunkie commented 4 years ago

Apple's guidelines specifically say to avoid scrolling. "Prominently display a Sign in with Apple button. Make a Sign in with Apple button no smaller than other sign-in buttons, and avoid making people scroll to see the button." https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/buttons/

As for the 2 alternatives, the first is my choice. Just alter the image size. I expect this screen design will be decided by the UI team eventually anyway.

yugantarjain commented 4 years ago

My comments so far: 1 - Social logins should be visible on the sign up and login screens without scrolling. You will have to adjust these screen layouts. (tested on iPhone 8) 2 - Need to note in the docs that to test social logins you must set the developer account AND change the bundle identifier.

  1. Done
  2. Where exactly should I add it, in the docs folder (in contributing and developing) OR in the readme?
vatsalkul commented 4 years ago

UI Issues

Signin button are looking good in dark mode

When there is an error message. Google sign in button slides down and break the bounds of screen. Also logo disappeared

Suggestions:

  1. Decrease size of username and password field heights. (According to screen)
  2. Invert color of apple sign In button to white when device is in dark mode.
  3. Make sure logo is visible on the home screen.
yugantarjain commented 4 years ago

@vatsalkul UI issues fixed.

yugantarjain commented 4 years ago

@vatsalkul social sign in buttons made into one line. Also, space between buttons and divider reduced.

sunjunkie commented 4 years ago

@yugantarjain This looks good. Update the base branch first and I will approve.

yugantarjain commented 4 years ago

@sunjunkie updated. @anitab-org/mentorship-ios-maintainers have updated the docs too and have removed the google auth client id from app.