Added email verification to signup workflow, integrated auth api from…

… backend. (#153)

* Added email verification to signup workflow, integrated auth api from backend.

Now frontend just needs to call createNewUser() from
src/services/AuthService to start the signup workflow, then finishes it
off with email verif. being handled in frontend.

* Added try catch for calls to a firebase service in signup's handleSubmit.

* Fixed duplicate imports in SignUpPage.

frontend/package.json

@@ -53,7 +53,7 @@
     "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook -s public",
     "precodegen": "rimraf src/api/*",
-    "codegen": "npx openapi-generator generate -i http://dev.api.hknucsd.com/api/docs/json -g typescript-fetch --additional-properties=typescriptThreePlus=true -o src/services/api"
+    "codegen": "npx openapi-generator generate -i https://dev-api.hknucsd.com/api/docs/json -g typescript-fetch --additional-properties=typescriptThreePlus=true -o src/services/api"
   },
   "eslintConfig": {
     "extends": "react-app"

frontend/src/pages/SignUpPage/index.js

@@ -7,8 +7,13 @@ import styles from './styles';
 
 import { Card } from '@SharedComponents';
 import { PublicPageLayout } from '@SharedComponents/layouts';
-import { createUserAccountFromSignup } from '@Services/auth';
 import HKN_TRIDENT_LOGO from '@Images/hkn-trident.png';
+import { createNewUser } from '@Services/AuthService';
+import {
+  doSignInWithEmailAndPassword,
+  doSendVerificationEmail,
+  doSignOut,
+} from '@Services/auth';
 
 const INITIAL_STATE = {};
 
@@ -20,12 +25,39 @@ class SignUpPage extends React.Component {
   }
 
   handleSubmit = async (values, setSubmitting) => {
+    const { email, firstName, lastName, major, gradYear, password } = values;
     const signupSubmission = {
-      ...values,
+      email,
+      firstName,
+      lastName,
+      major,
+      password,
+      graduationYear: gradYear.toString(),
     };
 
-    await createUserAccountFromSignup(signupSubmission);
+    try {
+      await createNewUser(signupSubmission);
+    } catch {
+      console.log('Create new user failed');
+      setSubmitting(false);
+      return;
+    }
 
+    try {
+      await doSignInWithEmailAndPassword(email, password, false);
+    } catch {
+      console.log('Sign in failed');
+      setSubmitting(false);
+      return;
+    }
+
+    try {
+      await doSendVerificationEmail();
+    } catch {
+      console.log('Send verification email failed.');
+    }
+
+    await doSignOut();
     setSubmitting(false);
   };
 

frontend/src/services/AuthService.ts

@@ -0,0 +1,14 @@
+import { AuthApi, AuthControllerSignUpUserRequest } from './api/apis/AuthApi';
+import { AppUserSignupRequest, AppUserResponse } from './api/models';
+import ApiConfigStore from './ApiConfigStore';
+import { Configuration } from './api/runtime';
+
+export async function createNewUser(
+  appUserSignupRequest: AppUserSignupRequest
+): Promise<AppUserResponse> {
+  const apiConfig: Configuration = ApiConfigStore.getApiConfig();
+  const authApi: AuthApi = new AuthApi(apiConfig);
+  const request: AuthControllerSignUpUserRequest = { appUserSignupRequest };
+
+  return authApi.authControllerSignUpUser(request);
+}

frontend/src/services/api/.openapi-generator/FILES

@@ -1,26 +1,28 @@
-apis\EventApi.ts
-apis\UserApi.ts
-apis\index.ts
+apis/AuthApi.ts
+apis/EventApi.ts
+apis/UserApi.ts
+apis/index.ts
 index.ts
-models\AppUserEventRequest.ts
-models\AppUserEventResponse.ts
-models\AppUserInductionClass.ts
-models\AppUserNameResponse.ts
-models\AppUserPKPayload.ts
-models\AppUserPostRequest.ts
-models\AppUserProfileResponse.ts
-models\AppUserResponse.ts
-models\AppUserRolesResponse.ts
-models\AttendanceResponse.ts
-models\BaseEventPayload.ts
-models\EventAttendanceResponse.ts
-models\EventRSVPResponse.ts
-models\EventRequest.ts
-models\EventResponse.ts
-models\MultipleAppUserResponse.ts
-models\MultipleEventResponse.ts
-models\MultipleUserNameResponse.ts
-models\MultipleUserQuery.ts
-models\RSVPResponse.ts
-models\index.ts
+models/AppUserEventRequest.ts
+models/AppUserEventResponse.ts
+models/AppUserInductionClass.ts
+models/AppUserNameResponse.ts
+models/AppUserPKPayload.ts
+models/AppUserPostRequest.ts
+models/AppUserProfileResponse.ts
+models/AppUserResponse.ts
+models/AppUserRolesResponse.ts
+models/AppUserSignupRequest.ts
+models/AttendanceResponse.ts
+models/BaseEventPayload.ts
+models/EventAttendanceResponse.ts
+models/EventRSVPResponse.ts
+models/EventRequest.ts
+models/EventResponse.ts
+models/MultipleAppUserResponse.ts
+models/MultipleEventResponse.ts
+models/MultipleUserNameResponse.ts
+models/MultipleUserQuery.ts
+models/RSVPResponse.ts
+models/index.ts
 runtime.ts

frontend/src/services/api/.openapi-generator/VERSION

@@ -1 +1 @@
-5.0.0-beta
+5.0.0-beta2

frontend/src/services/api/apis/AuthApi.ts

@@ -0,0 +1,67 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * HKN API
+ * HKN API
+ *
+ * The version of the OpenAPI document: 1.0.0
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+import * as runtime from '../runtime';
+import {
+  AppUserResponse,
+  AppUserResponseFromJSON,
+  AppUserResponseToJSON,
+  AppUserSignupRequest,
+  AppUserSignupRequestFromJSON,
+  AppUserSignupRequestToJSON,
+} from '../models';
+
+export interface AuthControllerSignUpUserRequest {
+  appUserSignupRequest?: AppUserSignupRequest;
+}
+
+/**
+ *
+ */
+export class AuthApi extends runtime.BaseAPI {
+  /**
+   * Sign up user
+   */
+  async authControllerSignUpUserRaw(
+    requestParameters: AuthControllerSignUpUserRequest
+  ): Promise<runtime.ApiResponse<AppUserResponse>> {
+    const queryParameters: any = {};
+
+    const headerParameters: runtime.HTTPHeaders = {};
+
+    headerParameters['Content-Type'] = 'application/json';
+
+    const response = await this.request({
+      path: `/api/auth/signup`,
+      method: 'POST',
+      headers: headerParameters,
+      query: queryParameters,
+      body: AppUserSignupRequestToJSON(requestParameters.appUserSignupRequest),
+    });
+
+    return new runtime.JSONApiResponse(response, jsonValue =>
+      AppUserResponseFromJSON(jsonValue)
+    );
+  }
+
+  /**
+   * Sign up user
+   */
+  async authControllerSignUpUser(
+    requestParameters: AuthControllerSignUpUserRequest
+  ): Promise<AppUserResponse> {
+    const response = await this.authControllerSignUpUserRaw(requestParameters);
+    return await response.value();
+  }
+}

frontend/src/services/api/apis/UserApi.ts

@@ -172,6 +172,15 @@ export class UserApi extends runtime.BaseAPI {
 
     const headerParameters: runtime.HTTPHeaders = {};
 
+    if (this.configuration && this.configuration.accessToken) {
+      const token = this.configuration.accessToken;
+      const tokenString =
+        typeof token === 'function' ? token('TokenAuth', []) : token;
+
+      if (tokenString) {
+        headerParameters['Authorization'] = `Bearer ${tokenString}`;
+      }
+    }
     const response = await this.request({
       path: `/api/users/{userID}`.replace(
         `{${'userID'}}`,

frontend/src/services/api/apis/index.ts

@@ -1,2 +1,3 @@
+export * from './AuthApi';
 export * from './EventApi';
 export * from './UserApi';

frontend/src/services/api/models/AppUserProfileResponse.ts

@@ -61,7 +61,13 @@ export interface AppUserProfileResponse {
    * @type {AppUserInductionClass}
    * @memberof AppUserProfileResponse
    */
-  inductionClass: AppUserInductionClass;
+  inductionClass?: AppUserInductionClass;
+  /**
+   *
+   * @type {string}
+   * @memberof AppUserProfileResponse
+   */
+  role: AppUserProfileResponseRoleEnum;
 }
 
 export function AppUserProfileResponseFromJSON(
@@ -83,7 +89,10 @@ export function AppUserProfileResponseFromJSONTyped(
     email: json['email'],
     major: json['major'],
     graduationYear: json['graduationYear'],
-    inductionClass: AppUserInductionClassFromJSON(json['inductionClass']),
+    inductionClass: !exists(json, 'inductionClass')
+      ? undefined
+      : AppUserInductionClassFromJSON(json['inductionClass']),
+    role: json['role'],
   };
 }
 
@@ -103,5 +112,18 @@ export function AppUserProfileResponseToJSON(
     major: value.major,
     graduationYear: value.graduationYear,
     inductionClass: AppUserInductionClassToJSON(value.inductionClass),
+    role: value.role,
   };
 }
+
+/**
+ * @export
+ * @enum {string}
+ */
+export enum AppUserProfileResponseRoleEnum {
+  Admin = 'admin',
+  Officer = 'officer',
+  Member = 'member',
+  Inductee = 'inductee',
+  Guest = 'guest',
+}

frontend/src/services/api/models/AppUserSignupRequest.ts

@@ -0,0 +1,98 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * HKN API
+ * HKN API
+ *
+ * The version of the OpenAPI document: 1.0.0
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+import { exists, mapValues } from '../runtime';
+/**
+ *
+ * @export
+ * @interface AppUserSignupRequest
+ */
+export interface AppUserSignupRequest {
+  /**
+   *
+   * @type {string}
+   * @memberof AppUserSignupRequest
+   */
+  email: string;
+  /**
+   *
+   * @type {string}
+   * @memberof AppUserSignupRequest
+   */
+  firstName: string;
+  /**
+   *
+   * @type {string}
+   * @memberof AppUserSignupRequest
+   */
+  lastName: string;
+  /**
+   *
+   * @type {string}
+   * @memberof AppUserSignupRequest
+   */
+  major: string;
+  /**
+   *
+   * @type {string}
+   * @memberof AppUserSignupRequest
+   */
+  graduationYear: string;
+  /**
+   *
+   * @type {string}
+   * @memberof AppUserSignupRequest
+   */
+  password: string;
+}
+
+export function AppUserSignupRequestFromJSON(json: any): AppUserSignupRequest {
+  return AppUserSignupRequestFromJSONTyped(json, false);
+}
+
+export function AppUserSignupRequestFromJSONTyped(
+  json: any,
+  ignoreDiscriminator: boolean
+): AppUserSignupRequest {
+  if (json === undefined || json === null) {
+    return json;
+  }
+  return {
+    email: json['email'],
+    firstName: json['firstName'],
+    lastName: json['lastName'],
+    major: json['major'],
+    graduationYear: json['graduationYear'],
+    password: json['password'],
+  };
+}
+
+export function AppUserSignupRequestToJSON(
+  value?: AppUserSignupRequest | null
+): any {
+  if (value === undefined) {
+    return undefined;
+  }
+  if (value === null) {
+    return null;
+  }
+  return {
+    email: value.email,
+    firstName: value.firstName,
+    lastName: value.lastName,
+    major: value.major,
+    graduationYear: value.graduationYear,
+    password: value.password,
+  };
+}

frontend/src/services/api/models/index.ts

@@ -7,6 +7,7 @@ export * from './AppUserPostRequest';
 export * from './AppUserProfileResponse';
 export * from './AppUserResponse';
 export * from './AppUserRolesResponse';
+export * from './AppUserSignupRequest';
 export * from './AttendanceResponse';
 export * from './BaseEventPayload';
 export * from './EventAttendanceResponse';