diff --git a/Certs/StatusPageCerts/Readme.md b/Certs/StatusPageCerts/Readme.md old mode 100644 new mode 100755 diff --git a/Dashboard/src/Pages/StatusPages/View/Domains.tsx b/Dashboard/src/Pages/StatusPages/View/Domains.tsx index 8a7a4fc07d..64a73ab8a2 100644 --- a/Dashboard/src/Pages/StatusPages/View/Domains.tsx +++ b/Dashboard/src/Pages/StatusPages/View/Domains.tsx @@ -1,6 +1,6 @@ import Route from 'Common/Types/API/Route'; import Page from 'CommonUI/src/Components/Page/Page'; -import React, { FunctionComponent, ReactElement } from 'react'; +import React, { FunctionComponent, ReactElement, useState } from 'react'; import PageMap from '../../../Utils/PageMap'; import RouteMap, { RouteUtil } from '../../../Utils/RouteMap'; import PageComponentProps from '../../PageComponentProps'; @@ -16,11 +16,18 @@ import ModelTable from 'CommonUI/src/Components/ModelTable/ModelTable'; import BadDataException from 'Common/Types/Exception/BadDataException'; import { StatusPageCNameRecord } from 'CommonUI/src/Config'; import Navigation from 'CommonUI/src/Utils/Navigation'; +import { ButtonStyleType } from 'CommonUI/src/Components/Button/Button'; +import { JSONObject } from 'Common/Types/JSON'; +import ConfirmModal from 'CommonUI/src/Components/Modal/ConfirmModal'; const StatusPageDelete: FunctionComponent = ( props: PageComponentProps ): ReactElement => { const modelId: ObjectID = Navigation.getLastParamAsObjectID(1); + + const [cnameModalText, setCnameModalText] = useState(''); + const [showSslProvisioningModal, setShowSslProvisioningModal] = useState(false); + return ( = ( ]} sideMenu={} > - - modelType={StatusPageDomain} - query={{ - projectId: DashboardNavigation.getProjectId()?.toString(), - statusPageId: modelId, - }} - name="Status Page > Domains" - id="domains-table" - isDeleteable={true} - isCreateable={true} - cardProps={{ - icon: IconProp.Globe, - title: 'Custom Domains', - description: `Important: Please add ${StatusPageCNameRecord} as your CNAME for these domains for this to work.`, - }} - onBeforeCreate={( - item: StatusPageDomain - ): Promise => { - if (!props.currentProject || !props.currentProject.id) { - throw new BadDataException('Project ID cannot be null'); - } - item.statusPageId = modelId; - item.projectId = props.currentProject.id; - return Promise.resolve(item); - }} - noItemsMessage={'No custom domains found.'} - viewPageRoute={Navigation.getCurrentRoute()} - formFields={[ - { - field: { - subdomain: true, + <> + + modelType={StatusPageDomain} + query={{ + projectId: DashboardNavigation.getProjectId()?.toString(), + statusPageId: modelId, + }} + name="Status Page > Domains" + id="domains-table" + isDeleteable={true} + isCreateable={true} + cardProps={{ + icon: IconProp.Globe, + title: 'Custom Domains', + description: `Important: Please add ${StatusPageCNameRecord} as your CNAME for these domains for this to work.`, + }} + onBeforeCreate={( + item: StatusPageDomain + ): Promise => { + if (!props.currentProject || !props.currentProject.id) { + throw new BadDataException('Project ID cannot be null'); + } + item.statusPageId = modelId; + item.projectId = props.currentProject.id; + return Promise.resolve(item); + }} + actionButtons={[ + { + title: 'Add CNAME', + buttonStyleType: ButtonStyleType.SUCCESS_OUTLINE, + icon: IconProp.Check, + isVisible: (item: JSONObject): boolean => { + if (item['isCnameVerified']) { + return false; + } + + return true; + }, + onClick: async ( + item: JSONObject, + onCompleteAction: Function, + onError: (err: Error) => void + ) => { + try { + setCnameModalText(`${item['fullDomain']}`); + + onCompleteAction(); + } catch (err) { + onCompleteAction(); + onError(err as Error); + } + }, }, - title: 'Subdomain', - fieldType: FormFieldSchemaType.Text, - required: true, - placeholder: 'status', - validation: { - minLength: 2, + { + title: 'Provision SSL', + buttonStyleType: ButtonStyleType.SUCCESS_OUTLINE, + icon: IconProp.Check, + isVisible: (item: JSONObject): boolean => { + if (item['isCnameVerified'] && !item['isSslProvisioned']) { + return true; + } + + return false; + }, + onClick: async ( + _item: JSONObject, + onCompleteAction: Function, + onError: (err: Error) => void + ) => { + try { + setShowSslProvisioningModal(true) + + onCompleteAction(); + } catch (err) { + onCompleteAction(); + onError(err as Error); + } + }, }, - }, - { - field: { - domain: true, + ]} + noItemsMessage={'No custom domains found.'} + viewPageRoute={Navigation.getCurrentRoute()} + formFields={[ + { + field: { + subdomain: true, + }, + title: 'Subdomain', + fieldType: FormFieldSchemaType.Text, + required: true, + placeholder: 'status', + validation: { + minLength: 2, + }, }, - title: 'Domain', - description: - 'Please select a verified domain from this list. If you do not see any domains in this list, please head over to settings to add some.', - fieldType: FormFieldSchemaType.Dropdown, - dropdownModal: { - type: Domain, - labelField: 'domain', - valueField: '_id', + { + field: { + domain: true, + }, + title: 'Domain', + description: + 'Please select a verified domain from this list. If you do not see any domains in this list, please head over to settings to add some.', + fieldType: FormFieldSchemaType.Dropdown, + dropdownModal: { + type: Domain, + labelField: 'domain', + valueField: '_id', + }, + required: true, + placeholder: 'Select domain', }, - required: true, - placeholder: 'Select domain', - }, - ]} - showRefreshButton={true} - showFilterButton={true} - columns={[ - { - field: { - fullDomain: true, + ]} + showRefreshButton={true} + showFilterButton={true} + columns={[ + { + field: { + fullDomain: true, + }, + title: 'Name', + type: FieldType.Text, + isFilterable: true, }, - title: 'Name', - type: FieldType.Text, - isFilterable: true, - }, - { - field: { - isCnameVerified: true, + { + field: { + isCnameVerified: true, + }, + title: 'CNAME Valid', + type: FieldType.Boolean, + isFilterable: true, + tooltipText: (item: StatusPageDomain): string => { + if (item['isCnameVerified']) { + return 'We have verified your CNAME record.'; + } + return `Please add a new CNAME record to your domain ${item['fullDomain']}. It should look like CNAME ${item['fullDomain']} ${StatusPageCNameRecord}`; + }, }, - title: 'CNAME Valid', - type: FieldType.Boolean, - isFilterable: true, - tooltipText: (item: StatusPageDomain): string => { - if (item['isCnameVerified']) { - return 'We have verified your CNAME record.'; - } - return `Please add a new CNAME record to your domain ${item['fullDomain']}. It should look like CNAME ${item['fullDomain']} ${StatusPageCNameRecord}`; + { + field: { + isSslProvisioned: true, + }, + title: 'SSL Provisioned', + type: FieldType.Boolean, + isFilterable: true, + tooltipText: (_item: StatusPageDomain): string => { + return 'This will happen automatically after CNAME is verified. Please allow 24 hours for SSL to be provisioned after CNAME is verified. If that does not happen in 24 hours, please contact support.'; + }, }, - }, - { - field: { - isSslProvisioned: true, - }, - title: 'SSL Provisioned', - type: FieldType.Boolean, - isFilterable: true, - tooltipText: (_item: StatusPageDomain): string => { - return 'This will happen automatically after CNAME is verified. Please allow 24 hours for SSL to be provisioned after CNAME is verified. If it does not happen in 24 hours, please contact support.'; - }, - }, - ]} - /> + ]} + /> + + {cnameModalText && + + Please add CNAME record to your domain. Details of + the CNAME records are: + +
+
+ + Record Type: CNAME + +
+ + Name: + {cnameModalText} + +
+ + Content: + {StatusPageCNameRecord} + +
+
+ + Once you have done this, it should take 24 hours to automatically verify. + + } + submitButtonText={'Close'} + onSubmit={() => { + return setCnameModalText('') + }} + />} + + {showSslProvisioningModal && { + return setShowSslProvisioningModal(false) + }} + />} + + ); };