diff --git a/js/components/delete_confirmation.js b/js/components/delete_confirmation.js new file mode 100644 index 00000000..cd710de3 --- /dev/null +++ b/js/components/delete_confirmation.js @@ -0,0 +1,15 @@ +export default { + name: 'delete-confirmation', + + data: function() { + return { + deleteText: '', + } + }, + + computed: { + valid: function() { + return this.deleteText.toLowerCase() === 'delete' + }, + }, +} diff --git a/js/index.js b/js/index.js index dee29320..44461fc2 100644 --- a/js/index.js +++ b/js/index.js @@ -35,6 +35,7 @@ import DateSelector from './components/date_selector' import SidenavToggler from './components/sidenav_toggler' import KoReview from './components/forms/ko_review' import BaseForm from './components/forms/base_form' +import DeleteConfirmation from './components/delete_confirmation' Vue.config.productionTip = false @@ -72,6 +73,7 @@ const app = new Vue({ SidenavToggler, KoReview, BaseForm, + DeleteConfirmation, }, mounted: function() { diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 906e14a6..06b9f416 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -213,12 +213,6 @@ border-top: 0; padding: 3 * $gap 2 * $gap; - .usa-button-secondary { - color: $color-red; - background-color: $color-red-lightest; - box-shadow: inset 0 0 0 1px $color-red; - } - .usa-button-disabled { color: $color-gray-medium; background-color: $color-gray-lightest; @@ -271,10 +265,6 @@ height: 4rem; } - .usa-button-danger { - background: $color-red; - } - select { padding-left: 1.2rem } diff --git a/styles/elements/_buttons.scss b/styles/elements/_buttons.scss index 59a6481e..af167ade 100644 --- a/styles/elements/_buttons.scss +++ b/styles/elements/_buttons.scss @@ -11,3 +11,23 @@ button, opacity: 0.75; } } + +.button-danger { + background: $color-red; + + &:hover { + background-color: $color-red-darkest; + } +} + +.button-danger-outline, input[type="button"].button-danger-outline { + color: $color-red; + background-color: $color-red-lightest; + box-shadow: inset 0 0 0 1px $color-red; + + &:hover { + color: white; + background-color: $color-red-darkest; + box-shadow: inset 0 0 0 1px $color-red-darkest; + } +} diff --git a/templates/fragments/admin/members_edit.html b/templates/fragments/admin/members_edit.html index d2f9889f..8f5f8fd2 100644 --- a/templates/fragments/admin/members_edit.html +++ b/templates/fragments/admin/members_edit.html @@ -12,7 +12,7 @@ {% elif ppoc %} {% set archive_button_class = 'usa-button-disabled' %} {% else %} - {% set archive_button_class = 'usa-button-secondary' %} + {% set archive_button_class = 'button-danger-outline' %} {% endif %} diff --git a/templates/portfolios/applications/edit.html b/templates/portfolios/applications/edit.html index db842f80..602a42f5 100644 --- a/templates/portfolios/applications/edit.html +++ b/templates/portfolios/applications/edit.html @@ -1,7 +1,9 @@ {% extends "portfolios/applications/base.html" %} +{% from "components/alert.html" import Alert %} {% from "components/text_input.html" import TextInput %} {% from "components/icon.html" import Icon %} +{% from "components/modal.html" import Modal %} {% set secondary_breadcrumb = 'portfolios.applications.existing_application_title' | translate({ "application_name": application.name }) %} @@ -14,6 +16,58 @@
{% include "fragments/applications/edit_application_form.html" %} + {{ form.csrf_token }} +

+ {{ "fragments.edit_application_form.explain" | translate }} +

+
+
+ {{ TextInput(form.name) }} +
+
+ {% if user_can(permissions.DELETE_APPLICATION) %} +
+ + +
+ {% endif %} +
+
+
+
+ {{ TextInput(form.description, paragraph=True) }} +
+
+ +
+
+

{{ 'portfolios.applications.environments_heading' | translate }}

+

+ {{ 'portfolios.applications.environments_description' | translate }} +

+
+ + +
@@ -36,5 +90,42 @@
+ {% if user_can(permissions.DELETE_APPLICATION) %} + {% call Modal(name="delete-application") %} +

{{ "portfolios.applications.delete.header" | translate }}

+ + {{ + Alert( + title="portfolios.applications.delete.alert.title" | translate, + message="portfolios.applications.delete.alert.message" | translate, + level="warning" + ) + }} + + +
+
+ + +
+
+
+ {{ form.csrf_token }} + +
+
+ {{ "common.cancel" | translate }} +
+
+
+ + {% endcall %} + {% endif %} {% endblock %} diff --git a/translations.yaml b/translations.yaml index a9711883..c1e5de97 100644 --- a/translations.yaml +++ b/translations.yaml @@ -43,6 +43,7 @@ common: contracting_officer: Contracting Officer security_officer: Security Officer contracting_officer_representative: Contracting Officer Representative + delete_confirm: "Please type the word DELETE to confirm:" components: modal: close: Close @@ -599,6 +600,12 @@ portfolios: name: Name members: Members add_environment: Add New Environment + delete: + button: Delete Application + header: Are you sure you want to delete this application? + alert: + title: Warning! This action is permanent. + message: You will lose access to this application and all of its reporting and metrics tools. The activity log will be retained. admin: portfolio_members_title: Portfolio members portfolio_members_subheading: These members have different levels of access to the portfolio.