Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 | /* Copyright (C) Click & Push Accessibility, Inc - All Rights Reserved * Unauthorized copying of this file, via any medium is strictly prohibited * Proprietary and confidential * Written and maintained by the Click & Push Development team * <dev@clicknpush.ca>, January 2022 */ import axios from 'axios'; import React, { useState } from 'react'; import { Image, TouchableOpacity, View } from 'react-native'; import 'react-native-get-random-values'; import { ActivityIndicator, Text } from 'react-native-paper'; import { API_URL, reportAxiosError } from '../../../utils/RequestUtils'; import { PrimaryButton, SecondaryButton } from '../../Buttons'; import { PhotoPicker } from '../../PhotoPicker'; import { Separator } from '../../Separator'; import { RegisterStepProps } from '../RegisterMain'; /** * This component displays an interface to upload a profile picture */ const RegisterImage: React.FC<RegisterStepProps> = ({changeStep, formValues}) => { /** * Stores the base64 of the user's selected profile pic */ const [photoBase64, setPhotoBase64] = useState<string>(); /** * This flag is set to true when the registration submission is being processed. An activity spinner will display while it is true */ const [loadingSubmission, toggleLoading] = useState<boolean>(false); /** * This flag toggles the menu that is used to choose a photo source (Library or Camera). */ const [photoSourceMenuOpened, togglePhotoSourceMenu] = useState<boolean>(false) /** * Reverse back to measurements step */ const back = () => { console.log("[Registration]: Registration form values updated") changeStep(3, "Will you be using a Sagitta?") } /** * Prepares and sends a registration request to the api */ const register = async () => { // toggle the loading flag and change status toggleLoading(true); changeStep(4, 'Hang tight for a moment while we create your account.') // create FormData and send request const formData = prepareFormData() await sendRegisterRequest(formData) } // Returns a FormData object containing all the form values from each registration step, including the image (in b64) chosen on this step const prepareFormData = (): FormData => { console.log("[Registration]: Preparing form data...") let formData = new FormData(); let processedFormValues; if (formValues.height && formValues.weight) { processedFormValues = {...formValues, height: parseFloat(formValues.height), weight: parseFloat(formValues.weight)} } else { processedFormValues = { email: formValues.email, username: formValues.username, password: formValues.password, }; } formData.append('userInfo', JSON.stringify(processedFormValues)); formData.append('avatar', 'data:image/png;base64,' + photoBase64); console.log("[Registration]: Form data prepared") return formData } const sendRegisterRequest = async (formData: FormData) => { // initialize registration result message let resultMessage = ''; console.log("[Registration]: Sending registration request...") // send request, notify user of result try { const response = await axios({ method: 'post', url: API_URL + '/api/register/', timeout: 50000, data: formData, }); if (response.status == 200) { resultMessage = 'Success! Congratulations on registering for your new account, you can now login!'; } else { resultMessage = 'Something went wrong when trying to set up your account. Please try again.'; // TODO: add contact details? } } catch (error) { resultMessage = 'Something went wrong when trying to set up your account. Please try again.'; // TODO: add contact details? reportAxiosError('Something went wrong with user registration', error); } toggleLoading(false); changeStep(5, resultMessage); } return ( <View> { !loadingSubmission ? <View> <TouchableOpacity onPress={() => togglePhotoSourceMenu(true)} style={{justifyContent: 'center', }}> { photoBase64 != null ? <Image style={{alignSelf: 'center', borderRadius: 100, width: 200, height: 200, marginBottom: 5, marginTop: 30,}} source={{uri: 'data:image/png;base64,' + photoBase64}} /> : <Image style={{alignSelf: 'center', borderRadius: 100, width: 200, height: 200, marginBottom: 5, marginTop: 30,}} source={require('../../../../assets/default-pfp.png')} /> } <Text style={{alignSelf: 'center', marginVertical: 20, color: 'white'}}>Choose photo</Text> </TouchableOpacity> <View style={{margin: 20}}> <Separator color="lightgray" /> <PrimaryButton text="Register" onPress={register} style={{marginVertical: 20}} /> <SecondaryButton text="Back" onPress={back} style={{marginBottom: 20}} /> </View> </View> : <View> <ActivityIndicator style={{marginTop: 200}} size="large" animating={true} color="red"/> </View>} <PhotoPicker menuType='alert' multiple={false} photoSourceMenuOpened={photoSourceMenuOpened} cancel={() => togglePhotoSourceMenu(false)} onReceivedPhotoResult={result => setPhotoBase64(result.base64)}/> </View> ) } export default RegisterImage; |