Skip to content
Snippets Groups Projects
Select Git revision
  • 1fd36355f7c67a7ff8e09a7a7a9fef43231ce2f7
  • master default protected
  • 69-resize-image-before-upload
  • 60-add-match-salamander-modal-to-edit-salamander
  • 50-fix-server-error-message
  • 48-fix-gradle
  • 31-camera-communicate-with-api-and-delete-from-cache-2
  • 20-changing-verification-step-in-profile-to-modal
  • 4-add-all-basic-views
  • 1-setup
10 results

CustomDialog.js

Blame
  • Code owners
    Assign users and groups as approvers for specific file changes. Learn more.
    CustomDialog.js 4.80 KiB
    import React, { useState } from "react";
    import { StyleSheet, View, Alert } from "react-native";
    import { Button, Paragraph, Dialog, Portal, Text, Divider } from "react-native-paper";
    import APIKit from "../APIkit";
    import CustomActivityIndicator from "./CustomActivityIndicator";
    import { toast500, toastError } from "../constants/toasts";
    import CustomRadioButtonGroup from "./CustomRadioButtonGroup";
    
    /**
     * This component renders a dialog, where the user can choose between different options. In this case, it is used for managing user privileges. 
     * 
     * @param {String} props.email - the email of the user that is currently being viewed
     * @param {String} props.id - the ID of the user that is currently being viewed
     * @param {Boolean} props.admin - false/true if admin or not
     * @param {Boolean} props.accepted - false/true if the user is accepted or not
     * @param {Function} props.onCancel - dismisses the dialog
     * @param {Function} props.getUsers - to update the user-list after changes are submitted
     * @param {Function} props.showFeedback - triggers the toast message when changes are submitted
     * 
     * @returns the component
     */
    
    const CustomDialog = (props) => {
      const [value, setValue] = React.useState(null);
      const [showIndicator, setShowIndicator] = useState(false);
      const [resetCode, setResetCode] = useState(null);
    
      const values = {firstValue: "denyAccess", secondValue: "makeAdmin", thirdValue: "removeAdmin", 
      firstText:"Deny Access", secondText:"Make Admin", thirdText:"Remove Admin"};
    
      const getValue = (value) => {
        setValue(value);
      };
    
      const updateUser = () => {
        let bodyFormData = new FormData();
        bodyFormData.append("email", props.email);
        bodyFormData.append("id", props.id);
        bodyFormData.append(value, true);
    
        setShowIndicator(true);
    
        APIKit.post("/manageUsers", bodyFormData)
          .then(function (response) {
            setShowIndicator(false);
            if (response.data.status === 200) {
              props.showFeedback(response.data.message);
              props.getUsers();
              props.onCancel();
            } else {
              toastError("top", 3000, response.data.message); 
            }
          })
          .catch(function (response) {
            setShowIndicator(false);
            toast500(response.status); 
          });
      };
    
      const resetPassword = () => {
        let bodyFormData = new FormData();
        bodyFormData.append("id", props.id);
    
        setShowIndicator(true);
    
        APIKit.put("/manageUsers", bodyFormData)
          .then(function (response) {
            setShowIndicator(false);
            if (response.data.status === 200) {
              props.showFeedback(response.data.message);
              setResetCode(response.data.new_password);
            }
          })
          .catch(function (response) {
            setShowIndicator(false);
            toast500(response.status); 
          });
      };
    
      const createResetAlert = () =>
        Alert.alert(
          "Resetting password",
          "This is a temporary password!\n\nPlease have the affected user change their password after login!",
          [
            {
              text: "Cancel",
              onPress: () => console.log("Cancel Pressed"),
              style: "cancel",
            },
            { text: "OK", onPress: () => resetPassword() },
          ],
          { cancelable: false }
        );
    
      return (
        <View>
          <Portal>
            <Dialog visible={props.visible} onDismiss={props.onCancel}>
              <CustomActivityIndicator
                style={styles.activityIndicator}
                visible={showIndicator}
              />
              <Dialog.Title>Change Access Rights</Dialog.Title>
              <Divider />
              <Dialog.Content>
                <Paragraph>{props.email}</Paragraph>
                <Paragraph>
                  Admin: {props.admin.toString()}
                </Paragraph>
                <Paragraph>
                  Accepted: {props.accepted.toString()}
                </Paragraph>
                <View>
                <CustomRadioButtonGroup
                  default={value}
                  values={values}
                  sendDataToParent={getValue}
                />
                </View>
                <Divider />
                <View style={{ marginTop: 10 }}>
                  <Button
                    style={styles.resetButton}
                    onPress={createResetAlert}
                  >Reset Password</Button>
                  {resetCode && <Text>Temporary password is: {resetCode}</Text>}
                </View>
              </Dialog.Content>
              <Dialog.Actions>
                <Button onPress={props.onCancel}>Cancel</Button>
                <Button 
                  onPress={updateUser}
                  disabled={
                    !(
                      value != null
                    )
                  }
                  >Done</Button>
              </Dialog.Actions>
            </Dialog>
          </Portal>
        </View>
      );
    };
    
    export default CustomDialog;
    
    const styles = StyleSheet.create({
      radioButton: {
        flexDirection: "row",
        alignItems: "center",
      },
      resetButton: {
        width: "70%",
      },
    });