From 136c32c5cfea5d933aee2715b5ecfd0ea201e6b6 Mon Sep 17 00:00:00 2001 From: jasonleyser Date: Wed, 5 May 2021 10:51:19 -0600 Subject: [PATCH 1/7] Confirmation popup components Created two new button styles: - delete - cancel Created 3 popup modal styles: - single file, multi file and collection delete - delete with input - confirmation Added a new validation rule for the input value to equal a string. Used to disabled and enable the delete button. --- common/validations.js | 6 + components/core/ConfirmationModal.js | 167 ++++++++++++++++++++++++ components/system/components/Buttons.js | 140 ++++++++++++++++++++ 3 files changed, 313 insertions(+) create mode 100644 components/core/ConfirmationModal.js diff --git a/common/validations.js b/common/validations.js index be2e0f99..7ecdc0b7 100644 --- a/common/validations.js +++ b/common/validations.js @@ -193,3 +193,9 @@ export const isUnityFile = async (file) => { return false; } }; + +export const isUsernameMatch = (data) => { + if(data.input == data.username) { + return true; + } +} diff --git a/components/core/ConfirmationModal.js b/components/core/ConfirmationModal.js new file mode 100644 index 00000000..ed95252b --- /dev/null +++ b/components/core/ConfirmationModal.js @@ -0,0 +1,167 @@ +import * as React from "react"; +import * as Constants from "~/common/constants"; +import * as Validations from "~/common/validations"; + +import { css } from "@emotion/react"; +import { useState } from "react"; + +import { ButtonPrimaryFull, ButtonDeleteFull, ButtonDeleteDisabledFull, ButtonCancelFull } from "~/components/system/components/Buttons.js"; +import { Input } from "~/components/system/components/Input.js"; + +const STYLES_TRANSPARENT_BG = css ` + background-color: rgba(0,0,0,0.3); + width: 100%; + height: 100vh; + position: fixed; + left: 0; + top: 0; + z-index: 999999; +`; + +const STYLES_MAIN_MODAL = css ` + width: 380px; + height: auto; + background-color: #fff; + position: fixed; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + border-radius: 8px; + padding: 24px; + text-align: left; +`; + +const STYLES_HEADER = css ` + color: #000; + font-size: 16px; + font-weight: bold; + font-family: 'inter-medium', -apple-system, BlinkMacSystemFont, arial, sans-serif; +`; + +const STYLES_SUB_HEADER = css ` + color: #8E8E93; + font-size: 14px; + margin-top: 16px; + font-family: 'inter-regular', -apple-system, BlinkMacSystemFont, arial, sans-serif; +`; + +const STYLES_INPUT_HEADER = css ` + color: #000; + font-size: 12px; + font-weight: bold; + margin-top: 24px; + margin-bottom: 8px; +`; + +export const DeleteModal = (props) => { + let header = ''; + let subHeader = ''; + + if(props.data.type == 'multi') { + header = 'Are you sure you want to delete the selected ' + props.data.selected + ' files?'; + subHeader = 'These files will be deleted from all connected collections and your file library. You can’t undo this action.'; + } + + if(props.data.type == 'single') { + header = 'Are you sure you want to delete the file "' + props.data.filename + '"?'; + subHeader = 'This file will be deleted from all connected collections and your file library. You can’t undo this action.'; + } + + if(props.data.type == 'collection') { + header = 'Are you sure you want to delete the collection “' + props.data.collection + '”?'; + subHeader = 'This collection will be deleted but all your files will remain in your file library. You can’t undo this action.'; + } + + const _handleDelete = () => { + props.response(true); + } + + const _handleCancel = () => { + props.response(false); + } + + return ( +
+
+
+
{header}
+
{subHeader}
+ Cancel + Delete +
+
+
+ ); +}; + +export const DeleteWithInputModal = (props) => { + const [isUsernameMatch, setIsUsernameMatch] = useState(false); + const header = 'Are you sure you want to delete your account @' + props.data.username + '?'; + const subHeader = 'You will lose all your files and collections. You can’t undo this action.'; + const inputHeader = 'Please type your username to confirm'; + const inputPlaceholder = 'username'; + + const _handleDelete = () => { + props.response(true); + } + + const _handleCancel = () => { + props.response(false); + } + + const _handleOnChange = (e) => { + if(Validations.isUsernameMatch({ input: e.target.value, username: props.data.username })) { + setIsUsernameMatch(true) + }else{ + setIsUsernameMatch(false) + } + } + + let deleteButton; + if(isUsernameMatch) { + deleteButton = Delete; + } else { + deleteButton = Delete; + } + + return ( +
+
+
+
{header}
+
{subHeader}
+
{inputHeader}
+ + Cancel + {deleteButton} +
+
+
+ ); +}; + +export const ConfirmModal = (props) => { + const header = 'Making this file private will remove it from the following public slates: ' + props.data.username + '. Do you wish to continue?'; + const subHeader = 'Making the file private means it’s not visible to others unless they have the link.'; + + const _handleConfirm = () => { + props.response(true); + } + + const _handleCancel = () => { + props.response(false); + } + + return ( +
+
+
+
{header}
+
{subHeader}
+ Cancel + Confirm +
+
+
+ ); +}; \ No newline at end of file diff --git a/components/system/components/Buttons.js b/components/system/components/Buttons.js index f5d97347..a5236dd1 100644 --- a/components/system/components/Buttons.js +++ b/components/system/components/Buttons.js @@ -306,3 +306,143 @@ export const ButtonWarning = (props) => { /> ); }; + + +const STYLES_BUTTON_DELETE = css` + ${STYLES_BUTTON} + cursor: pointer; + color: ${Constants.system.white}; + background-color: ${Constants.system.red}; + box-shadow: 0 0 0 1px ${Constants.system.bgGray} inset; + + :hover { + background-color: #b51111; + } + + :focus { + outline: 0; + border: 0; + } +`; + +const STYLES_BUTTON_DELETE_TRANSPARENT = css` + ${STYLES_BUTTON} + cursor: pointer; + background-color: transparent; + color: ${Constants.system.darkGray}; +`; + +export const ButtonDelete = (props) => { + if (props.loading) { + return ( + + ); + } + + if (props.type === "label") { + return ( +