IronBankGettingStarted.vue 45.34 KiB
/* eslint-disable prettier/prettier */
<template>
<div class="iron-bank-getting-started">
<PageHeader>
<template slot="title">
{{ PageMetaIbgs.title }}
</template>
<template slot="imageSlot">
<v-img :src="ibLogo" />
</template>
</PageHeader>
<v-container class="px-md-8 px-auto">
<v-container>
<v-row class="d-flex justify-content-center" id="form-stepper-section">
<h4
class="hidden-md-and-up pb-6 p1-grey"
v-if="currentTab !== 'tab-5'"
>
{{ tabs[currentTab][0] || "" }}
{{ tabs[currentTab][1] || "" }}
</h4>
</v-row>
<v-row class="row-alignment">
<v-col sm="3" md="3" class="mr-0 pr-0">
<div class="path">
<div class="steps">
<v-btn
@click.stop
outlined
fab
color="primary"
height="52"
:ripple="false"
plain
class="cursor"
>
<b v-if="!tab1Completed" class="number">1</b>
<v-icon v-if="tab1Completed" class="number">mdi-check</v-icon>
</v-btn>
</div>
<div class="arrow pt-6">
<em class="gg-arrow-long-right arrow-one"></em>
</div>
</div>
</v-col>
<v-col sm="3" md="3" class="mr-0 pr-0">
<div class="path">
<div class="steps">
<v-btn
@click.stop
outlined
fab
color="primary"
height="52"
:ripple="false"
plain
class="cursor"
>
<b v-if="!tab2Completed" class="number">2</b>
<v-icon v-if="tab2Completed" class="number">mdi-check</v-icon>
</v-btn>
</div>
<div class="arrow pt-6">
<em class="gg-arrow-long-right arrow-two"></em>
</div>
</div>
</v-col>
<v-col sm="3" md="3" class="mr-0 pr-0">
<div class="path">
<div class="steps">
<v-btn
@click.stop
outlined
fab
color="primary"
height="52"
:ripple="false"
plain
class="cursor"
>
<b v-if="!tab3Completed" class="number">3</b>
<v-icon v-if="tab3Completed" class="number">mdi-check</v-icon>
</v-btn>
</div>
<div class="arrow pt-6">
<em class="gg-arrow-long-right arrow-three"></em>
</div>
</div>
</v-col>
<v-col sm="3" md="3" class="last-step">
<v-btn
@click.stop
outlined
fab
color="primary"
height="52"
:ripple="false"
plain
class="cursor align-left"
left
>
<b v-if="!tab4Completed" class="number">4</b>
<v-icon v-if="tab4Completed" class="number">mdi-check</v-icon>
</v-btn>
<div></div>
</v-col>
</v-row>
<v-row class="">
<v-col md="3" class="mr-0 pr-0">
<h4
class="hidden-sm-and-down p1-grey ml-12 ml-lg-0 ml-md-0 mr-lg-4 ml-xl-12"
>
{{ tabs["tab-1"][0] }} <br />
{{ tabs["tab-1"][1] }}
</h4>
</v-col>
<v-col md="3" class="mr-0 second-text">
<h4
class="hidden-sm-and-down ml-10 ml-lg-0 ml-md-0 p1-grey ml-xl-10"
>
{{ tabs["tab-2"][0] }} <br />
{{ tabs["tab-2"][1] }}
</h4>
</v-col>
<v-col md="3" class="ml-0 pl-0 third-text">
<h4
class="hidden-sm-and-down p1-grey mr-n12 ml-md-n4 mr-lg-0 ml-lg-4 ml-xl-16"
>
{{ tabs["tab-3"][0] }} <br />
{{ tabs["tab-3"][1] }}
</h4>
</v-col>
<v-col md="3" class="ml-0 pl-0 last-text">
<h4
class="hidden-sm-and-down p1-grey mr-n12 ml-md-n4 mr-lg-0 ml-lg-4 ml-xl-16"
>
{{ tabs["tab-4"][0] }} <br />
{{ tabs["tab-4"][1] }}
</h4>
</v-col>
</v-row>
</v-container>
<v-tabs-items v-model="currentTab" class="background-transparent">
<v-tab-item value="tab-1">
<v-card flat color="transparent">
<v-card-text>
<h2 class="pb-10">Important first steps</h2>
<div class="text-left pb-6 form-font">
<p class="first-steps-text">
Before moving on to the next section please make sure you have
completed the following
</p>
<ul class="ml-4">
<li>
Please reference
<a
href="https://repo1.dsop.io/dsop/dccscr/-/tree/master/contributor-onboarding"
target="_blank"
rel="noopener noreferrer"
>this guide</a
>
for what you need to do to be ready for Iron Bank.
</li>
<li>
The Iron Bank Onboarding Sessions are held every Wednesday
from 1530-1630EST. You can register for an onboarding
session in advance
<a
href="https://www.zoomgov.com/meeting/register/vJIsce6rpzkqGq9hHHRscNfGENYqvRL1s10"
target="_blank"
rel="noopener noreferrer"
>here</a
>.
</li>
<li>
Although not required, you can join the AMA session to
answer any questions you might have. These sessions are held
every Wednesday from 1630-1730EST. You can also register for
this session in advance by clicking
<a
href="https://www.zoomgov.com/meeting/register/vJIsf-ytpz8qHSN_JW8Hl9Qf0AZZXSCSmfo"
target="_blank"
rel="noopener noreferrer"
>here</a
>.
</li>
</ul>
<p class="note mt-4">
Note: After registering for either meeting, you will receive a
confirmation email containing information about joining the
meeting.
</p>
</div>
<!-- Could probably have form fields generate by JSON in the future -->
<v-form
v-model="formSectionOneValid"
ref="formSectionOne"
lazy-validation
>
<RadioGroup
label="I have attended an onboarding session or have reviewed the virtual materials."
:required="true"
description="Read the above paragraph for more information. We highly recommend attending the onboarding session prior to submitting a container hardening request."
:options="['Yes', 'No']"
:excludeInitialSelect="true"
:includeOtherOption="true"
ref="entry.319867378"
/>
</v-form>
<div class="text-left pb-6">
<v-btn color="primary" class="my-6" @click="checkSectionOne()">
Next
</v-btn>
</div>
</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item value="tab-2">
<v-card flat color="transparent">
<v-card-text>
<h2>Qualifying Questions</h2>
<h3 class="font-weight-thin pb-9">Iron Bank Terms</h3>
<div class="text-left pb-6 form-font">
<p>
Below is a collection of questions that you need to
acknowledge before onboarding to Iron Bank. Not all questions
are required to be a "yes" at this point in time, but most
will need to be before your application is approved by an
Authorizing Official. Completing these questions will allow
Iron Bank to provide support in a timely manner using the
information provided.
</p>
</div>
<v-form
v-model="formSectionTwoValid"
ref="formSectionTwo"
lazy-validation
>
<RadioGroup
label="1.) Are you okay with your containers being publicly available?"
description="A yes is required to proceed with onboarding into Iron Bank. The containers are going to be published on an IL2 (publicly available) environment. With a yes, you are affirming there is no classified component to your application."
:required="true"
:options="['Yes', 'No']"
:excludeInitialSelect="true"
:includeOtherOption="true"
ref="entry.855341231"
/>
<RadioGroup
label="2.) Are you okay if your security findings are public?"
description="A yes is required to proceed with onboarding into Iron Bank. We have findings published in our VAT tool and scans are visible in the Iron Bank registry."
:required="true"
:options="['Yes', 'No']"
:excludeInitialSelect="true"
:includeOtherOption="true"
ref="entry.367786873"
/>
<RadioGroup
label="3.) If your application requires a license, do your containers implement a license model to prevent unauthorized usage?"
description="Iron Bank does not currently support any licensing architecture. A vendor will need to implement their own licensing model."
:required="true"
:options="['Yes', 'No']"
:excludeInitialSelect="true"
:includeOtherOption="true"
ref="entry.1046023860"
/>
<RadioGroup
label="4.) Do you agree to submit your application upon every update, the day of the update?"
description="Whenever your application is updated commercially (if applicable), you must update your container the same day. This rule applies for all versions: major, minor, patch, etc."
:required="true"
:options="['Yes', 'No']"
:excludeInitialSelect="true"
:includeOtherOption="true"
ref="entry.1507741445"
/>
<RadioGroup
label="5.) Do you agree to provide timely justifications on any findings discovered during our hardening and scanning process? "
description="Your application will run through the pipeline every 12 hours. You must respond to your vulnerabilities and findings in a timely manner."
:required="true"
:options="['Yes', 'No']"
:excludeInitialSelect="true"
:includeOtherOption="true"
ref="entry.17089736"
/>
<RadioGroup
label="6.) Do you agree to work towards correcting any findings that may be identified as unacceptable based on the Authorizing Officials' review process?"
description="Security findings or vulnerabilities may come up in containers that need to be addressed. If the Authorizing Officials' do not initially approve your container, you will need to update your justifications in order to be pushed to the Iron Bank Registry."
:required="true"
:options="['Yes', 'No']"
:excludeInitialSelect="true"
:includeOtherOption="true"
ref="entry.847595280"
/>
</v-form>
<div class="text-left pb-6">
<v-btn
color="secondary"
class="my-6 mr-6"
@click="selectTab('tab-1')"
>
Previous
</v-btn>
<v-btn color="primary" class="my-6" @click="checkSectionTwo()">
Next
</v-btn>
</div>
</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item value="tab-3">
<v-card flat color="transparent">
<v-card-text>
<h2>Qualifying Questions</h2>
<h3 class="font-weight-thin pb-9">Technical Questions</h3>
<div class="text-left pb-6 form-font">
<p>
These are some of the basic prerequisites you need to have in
order to get approved on the Iron Bank. Whether you are a
program office or a vendor, these are the technical baselines
that need to be adhered to in order to pass the Iron Bank
Pipelines. Answering no, will not stop further onboarding, but
these will need to be a yes before going up for approval.
</p>
</div>
<v-form
v-model="formSectionThreeValid"
ref="formSectionThree"
lazy-validation
>
<RadioGroup
label="7.) Is your application currently containerized?"
description="For your application to be in Iron Bank, it needs to be effectively running in a container."
:required="true"
:options="['Yes', 'No']"
:excludeInitialSelect="true"
:includeOtherOption="true"
ref="entry.585195391"
/>
<RadioGroup
label="8.) Does it run on Linux containers?"
description="We currently only have support for Linux containers in the Iron Bank pipeline. We can support dotnet containers, but they must be Linux containers running the dotnet framework. If you currently do not support this, you will need to shift your architecture to run on Linux containers in order to pass Iron Bank pipelines."
:required="true"
:options="['Yes', 'No']"
:excludeInitialSelect="true"
:includeOtherOption="true"
ref="entry.1860893727"
/>
<RadioGroup
label="9.) Is your application running on or able to rebase to one of these images? (ubi7, ubi8, Distroless)"
description="You can use any Iron Bank approved container as a base image, but they must inherit from one of these three. For example, you can use Python 3.6 as a base image as it inherits from ubi8."
:required="true"
:options="['Yes', 'No']"
:excludeInitialSelect="true"
:includeOtherOption="true"
ref="entry.410485481"
/>
<RadioGroup
label="10.) Can your application build and run in a completely offline/air-gapped environment?"
description="The Iron Bank build process is offline, so your container will not pass the pipeline unless it supports this requirement."
:required="true"
:options="['Yes', 'No']"
:excludeInitialSelect="true"
:includeOtherOption="true"
ref="entry.1059787352"
/>
<RadioGroup
label="11.) Is your container FIPS compliant?"
description="This helps Iron Bank identify what kind of compute nodes your container can run on. This may not be required if your container does not handle encryption, SSL, etc."
:required="true"
:options="['Yes', 'No', 'N/A']"
:excludeInitialSelect="true"
:includeOtherOption="true"
ref="entry.847240916"
/>
<RadioGroup
label="12.) Can your application include DNF commands to ensure ALL the latest updates are applied?"
description="Our pipelines have a step that run DNF update utilities so we are able to get all required packages and relevant security updates for your container."
:required="true"
:options="[
'Yes',
'No',
'My container uses a Distroless image',
]"
:excludeInitialSelect="true"
:includeOtherOption="true"
ref="entry.104773678"
/>
<TextField
label="13.) List all dependencies your application requires in order to deploy."
description="Be sure to include any 3rd Party dependencies such as AWS S3, COTs/FOSS, open-source database or init packages."
:required="true"
ref="entry.1343420594"
/>
<RadioGroup
label="14.) Have you checked that any containerized
dependencies are already hardened within Iron Bank?"
description="You will need to harden your own dependencies to
deploy your application if they do not already exist within Iron
Bank. The easiest way to find containers within Iron Bank is in
our"
:required="true"
link="https://ironbank.dso.mil/repomap/products"
linkText="registry ."
:options="['Yes', 'No']"
:excludeInitialSelect="true"
:includeOtherOption="true"
ref="entry.1950733027"
/>
<TextField
label="15.) Are there any end of life dependencies your application requires?"
description="Some common examples include: MySQL 5.6, old versions of Postgres, Python 2.7, etc. "
:required="true"
ref="entry.69315081"
/>
<TextField
label="16.) Do any of your containers require 'root' user to start? If so, which ones and why?"
description="Containers are allowed to run as 'root' only if it is absolutely required for the container to run. This will need to be justified in order to be approved by an Authorizing Official."
:required="true"
ref="entry.2109418202"
/>
<TextField
label="17.) Do any files within your containers include special permissions such as SUID or SGID? If so, which ones and why?"
description="Containers are allowed to include these special permissions only if it is absolutely required for the container to run. This will need to be justified in order to be approved by an Authorizing Official."
:required="true"
ref="entry.1109718997"
/>
<TextField
label="18.) Are there any import/export controls regarding your application? If yes, please list which containers and which controls."
description="It is a legal requirement for Iron Bank to abide by import/export regulations."
:required="true"
ref="entry.1286541874"
/>
</v-form>
<div class="text-left pb-6">
<v-btn
color="secondary"
class="my-6 mr-6"
@click="selectTab('tab-2')"
>
Previous
</v-btn>
<v-btn
color="primary"
class="my-6"
@click="checkSectionThree()"
>
Next
</v-btn>
</div>
</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item value="tab-4">
<v-card flat color="transparent">
<v-card-text>
<h2 class="pb-10">Onboarding Questions</h2>
<div class="text-left pb-6 form-font">
<p>
This section is meant to go over your company name, POCs, and
container information. Please be sure to double check spelling
and provide links if applicable.
</p>
</div>
<v-form
v-model="formSectionFourValid"
ref="formSectionFour"
lazy-validation
>
<TextField
label="19.) Name of company (Vendor) or program office"
:required="true"
ref="entry.1363283294"
/>
<TextField
label="20.) Name of primary company POC"
description="Put your project manager or team lead here."
:required="true"
ref="entry.1923105257"
/>
<TextField
label="21.) Email of primary company POC"
description="Put your project manager or team lead’s email here."
:required="true"
icon="mdi-email"
validationRules="Email"
ref="entry.1541410627"
/>
<TextField
label="22.) Phone number of primary company POC"
description="Put your project manager or team lead’s phone number here."
:required="true"
icon="mdi-phone"
validationRules="Phone"
ref="entry.1284577478"
/>
<TextField
label="23.) Name of primary engineer for the container"
description="Put who will be responsible for maintaining the container here."
:required="true"
ref="entry.1046415923"
/>
<TextField
label="24.) Email of primary engineer for the container"
description="Put the email of who will be responsible for maintaining the container here."
:required="true"
icon="mdi-email"
validationRules="Email"
ref="entry.199036782"
/>
<TextField
label="25.) Phone number of primary engineer for the container"
description="Put the phone number of who will be responsible for maintaining the container here."
:required="true"
icon="mdi-phone"
validationRules="Phone"
ref="entry.2010977036"
/>
<TextField
label="26.) What are the Repo One usernames for ALL of your engineers working the container?"
description="If they do not have a Repo1 account, please mention that. You should be able to access this link if you have an account set up:"
linkText="https://repo1.dso.mil/dsop ."
link="https://repo1.dso.mil/dsop"
:required="true"
ref="entry.1540386624"
/>
<TextField
label="27.) Name of government sponsor working with Platform One"
description='If you do not have a government sponsor, please put "N/A".'
:required="true"
ref="entry.1727816852"
/>
<TextField
label="28.) Email of government sponsor working with Platform One"
description='If you do not have a government sponsor, please put "N/A".'
:required="true"
icon="mdi-email"
validationRules="Email"
ref="entry.574103292"
/>
<TextField
label="29.) What containers need to be added?"
description="Please provide the container names, what type of container it is, and what version it is. You will need to upload your Dockerfile and supporting files to your repo."
:required="true"
ref="entry.858995886"
/>
<TextField
label="30.) What would you like your repo naming convention to be?"
description="Typically we will make something along the lines of <company/product name>/<container name>"
:required="true"
ref="entry.418059336"
/>
<DatePicker
label="31.) What is your deployment timeframe?"
description="When would you like this deployed by? We cannot guarantee meeting your deployment timeline."
:required="true"
icon="mdi-calendar-month"
ref="entry.91910347"
/>
<CheckboxGroup
label="32.) What environment are you deploying to?"
:required="true"
:includeOtherOption="true"
:options="[
{ label: 'IL-2', checked: false },
{ label: 'IL-4', checked: false },
{ label: 'IL-5', checked: false },
{ label: '> IL-5', checked: false },
]"
ref="entry.1947787157"
/>
</v-form>
<div class="text-left pb-6">
<v-btn
color="secondary"
class="my-6 mr-6"
@click="selectTab('tab-3')"
>
Previous
</v-btn>
<v-btn
color="primary"
class="my-6"
@click="checkSectionFour()"
:loading="submittingForm"
>
Submit
</v-btn>
</div>
</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item value="tab-5">
<v-card flat color="transparent">
<v-card-text>
<div class="d-flex justify-content-center mx-3 px-10">
<v-img
src="@/assets/images/PlatformOne_MissonObsessed.webp"
class="mt-5 px-4 image"
></v-img>
</div>
<h1 class="p1-green">Thank You!</h1>
<div class="pb-6 form-font">
<p>
Thanks for your onboarding request submission to the Platform
One Iron Bank, we will get back with you on the next steps
within the next several business days.
</p>
<p>
If you have any questions we have Iron Bank Get Unstuck/AMA
Working Sessions every Wednesday from 1630-1730EST.
</p>
<p>
Need some help with your containers getting through Iron Bank?
Have questions on where things are at? Are you feeling stuck
and want to figure out the next steps? This is the meeting for
you! Come meet with the Iron Bank leadership and engineers to
get answers to your questions.
</p>
<p>
Register in advance for this
<a
href="https://www.zoomgov.com/meeting/register/vJIsf-ytpz8qHSN_JW8Hl9Qf0AZZXSCSmfo"
target="_blank"
rel="noopener noreferrer"
>meeting</a
>.
</p>
<p>
After registering, you will receive a confirmation email
containing information about joining the meeting.
</p>
</div>
<div class="pb-6 finish-button">
<v-btn
color="secondary"
class="my-6 mr-6 ml-6"
to="/"
@click="selectTab('tab-3')"
>
Return Home
</v-btn>
<v-btn
color="primary"
class="my-6"
href="https://ironbank.dso.mil/"
target="_blank"
rel="noopener noreferrer"
:loading="submittingForm"
>
<v-icon color="#202020" left>mdi-lock</v-icon> Visit Iron Bank
</v-btn>
</div>
</v-card-text>
</v-card>
</v-tab-item>
</v-tabs-items>
</v-container>
<Wave :bottom="false">
<div class="container">
<div class="row justify-content-center px-8">
<div class="col-md-6">
<div>
<h2 class="mx-auto">Have More Questions?</h2>
</div>
<p class="mx-auto">Check out our FAQ page.</p>
</div>
</div>
<div>
<v-btn
class="mx-auto mt-6"
color="primary"
href="https://confluence.il2.dso.mil/cq/questions.action?spaceKey=P1"
target="_blank"
rel="noopener noreferrer"
><v-icon color="#202020" left>mdi-lock</v-icon>FAQ</v-btn
>
</div>
</div>
</Wave>
<v-dialog v-model="errorModal" width="500">
<v-card>
<v-card-title> </v-card-title>
<v-card-text class="mt-8 mb-4">
<p class="error-font">
{{ errorModalMessage }}
</p>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" @click="errorModal = false"> Close </v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
import { PageMeta } from "@/constants/PageMeta";
import Wave from "@/components/Wave";
import IBLogo from "@/assets/images/logos/Iron_Bank_Logo_LIGHT.webp";
import TextField from "@/components/Forms/TextField";
import RadioGroup from "@/components/Forms/RadioGroup";
import CheckboxGroup from "@/components/Forms/CheckboxGroup";
import DatePicker from "@/components/Forms/DatePicker";
export default {
name: "IronBankGettingStarted",
components: {
PageHeader,
Wave,
TextField,
RadioGroup,
CheckboxGroup,
DatePicker,
},
data: function () {
return {
PageMetaIbgs: PageMeta.IronBankGettingStarted,
initialScrollSet: false,
ibLogo: IBLogo,
errorModal: false,
errorModalMessage: "One or more required fields has not been filled out.",
formSectionOneValid: true,
formSectionTwoValid: true,
formSectionThreeValid: true,
formSectionFourValid: true,
submittingForm: false,
currentTab: "tab-1",
tabs: {
"tab-1": ["STEP ONE:", "IMPORTANT FIRST STEPS"],
"tab-2": ["STEP TWO:", "IRON BANK TERMS"],
"tab-3": ["STEP THREE:", "TECHNICAL QUESTIONS"],
"tab-4": ["STEP FOUR:", "ONBOARDING QUESTIONS"],
},
formData: {},
formPartsIds: {
sectionOne: ["entry.319867378"],
sectionTwo: [
"entry.855341231",
"entry.367786873",
"entry.1046023860",
"entry.1507741445",
"entry.17089736",
"entry.847595280",
],
sectionThree: [
"entry.585195391",
"entry.1860893727",
"entry.410485481",
"entry.1059787352",
"entry.847240916",
"entry.104773678",
"entry.1343420594",
"entry.1950733027",
"entry.69315081",
"entry.2109418202",
"entry.1109718997",
"entry.1286541874",
],
sectionFour: [
"entry.1363283294",
"entry.1923105257",
"entry.1541410627",
"entry.1284577478",
"entry.1046415923",
"entry.199036782",
"entry.2010977036",
"entry.1540386624",
"entry.1727816852",
"entry.574103292",
"entry.858995886",
"entry.418059336",
"entry.91910347",
"entry.1947787157",
],
},
};
},
methods: {
displayRequiredFieldsModal() {
this.errorModal = true;
this.errorModalMessage =
"One or more required fields has not been filled out.";
},
selectTab(tab) {
document.getElementById("form-stepper-section").scrollIntoView();
this.currentTab = tab;
},
checkSectionOne() {
const validationItems = this.formPartsIds.sectionOne.map((id) => {
return this.$refs[id].failedValidation();
});
this.$refs.formSectionOne.validate();
if (!validationItems.includes(true)) {
this.selectTab("tab-2");
document.getElementsByClassName("arrow-one")[0].style.color = "#BDC931";
} else {
this.displayRequiredFieldsModal();
}
},
checkSectionTwo() {
const validationItems = this.formPartsIds.sectionTwo.map((id) => {
return this.$refs[id].failedValidation();
});
this.$refs.formSectionTwo.validate();
if (!validationItems.includes(true)) {
this.selectTab("tab-3");
document.getElementsByClassName("arrow-two")[0].style.color = "#BDC931";
} else {
this.displayRequiredFieldsModal();
}
},
checkSectionThree() {
const validationItems = this.formPartsIds.sectionThree.map((id) => {
return this.$refs[id].failedValidation();
});
this.$refs.formSectionThree.validate();
if (!validationItems.includes(true)) {
this.selectTab("tab-4");
document.getElementsByClassName("arrow-three")[0].style.color =
"#BDC931";
} else {
this.displayRequiredFieldsModal();
}
},
checkSectionFour() {
const validationItems = this.formPartsIds.sectionFour.map((id) => {
return this.$refs[id].failedValidation();
});
this.$refs.formSectionFour.validate();
if (!validationItems.includes(true)) {
this.submitForm();
this.selectTab("tab-5");
} else {
this.displayRequiredFieldsModal();
}
},
createEntryData(section) {
const sectionData = {};
section.forEach((id) => {
const data = this.$refs[id].getData();
if (typeof data === "object") {
sectionData[id + ".other_option_response"] =
data.other_option_response;
sectionData[id] = "__other_option__";
} else if (Array.isArray(data)) {
for (let key in data) {
if (typeof key === "object") {
sectionData[id + ".other_option_response"] =
data.other_option_response;
sectionData[id] = "__other_option__";
} else {
sectionData[id] = key;
}
}
} else {
sectionData[id] = data;
}
});
return sectionData;
},
buildBody() {
const { sectionOne, sectionTwo, sectionThree, sectionFour } =
this.formPartsIds;
const sectionOneData = this.createEntryData(sectionOne);
const sectionTwoData = this.createEntryData(sectionTwo);
const sectionThreeData = this.createEntryData(
sectionThree.concat(sectionFour)
);
//const sectionFourData = this.createEntryData(sectionFour);
const body = {
...sectionOneData,
...sectionTwoData,
...sectionThreeData,
//...sectionFourData,
pageHistory: "0,1,2", // four pages in google form; this must match up with exact number of pages in google form
};
return body;
},
async submitForm() {
this.submittingForm = true;
try {
await this.doPost();
this.submittingForm = false;
this.selectTab("tab-5");
} catch (e) {
this.errorModal = true;
this.errorModalMessage = "Error occurred during form submission.";
}
},
async doPost() {
// this is the `action` attribute of your Google Forms form
const formUrl =
"https://docs.google.com/forms/u/0/d/e/1FAIpQLSdqXyCxM-toMjzLWTU9SA4wAeIoIIDqvMGkCSliVwrG2IavXg/formResponse";
// assemble the POST body
const bodyParts = this.buildBody();
// google expects each form attr to be encoded
const body = Object.entries(bodyParts)
.map(([key, val]) => {
if (Array.isArray(val)) {
let values = [];
val.forEach((value) => {
if (value) {
values.push(`${key}=${encodeURIComponent(value)}`);
}
});
return values.join("&");
}
return `${key}=${encodeURIComponent(val)}`;
})
.join("&");
return await fetch(formUrl, {
method: "POST",
mode: "no-cors",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
body,
});
},
},
computed: {
tab1Completed() {
return !["tab-1"].includes(this.currentTab);
},
tab2Completed() {
return !["tab-1", "tab-2"].includes(this.currentTab);
},
tab3Completed() {
return !["tab-1", "tab-2", "tab-3"].includes(this.currentTab);
},
tab4Completed() {
return !["tab-1", "tab-2", "tab-3", "tab-4"].includes(this.currentTab);
},
},
};
</script>
<style lang="scss" scoped>
.iron-bank-getting-started {
}
.gg-arrow-long-right {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--ggs, 1));
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
box-shadow: inset 0 0 0 2px;
@media (max-width: 1903px) {
width: 205px;
}
@media (max-width: 1263px) {
width: 140px;
}
@media (max-width: 960px) {
width: 135px;
}
@media (max-width: 900px) {
width: 115px;
}
@media (max-width: 800px) {
width: 105px;
}
@media (max-width: 775px) {
width: 100px;
}
@media (max-width: 760px) {
width: 100px;
}
@media (max-width: 725px) {
width: 90px;
}
@media (max-width: 690px) {
width: 85px;
}
@media (max-width: 650px) {
width: 75px;
}
@media (max-width: 610px) {
width: 70px;
}
@media (max-width: 575px) {
width: 60px;
}
@media (max-width: 545px) {
width: 55px;
}
@media (max-width: 535px) {
width: 50px;
}
@media (max-width: 525px) {
width: 47.5px;
}
@media (max-width: 515px) {
width: 42.5px;
}
@media (max-width: 500px) {
width: 35px;
}
@media (max-width: 475px) {
width: 30px;
}
@media (max-width: 465px) {
width: 27.5px;
}
@media (max-width: 455px) {
width: 25px;
}
@media (max-width: 442px) {
width: 22.5px;
}
@media (max-width: 415px) {
width: 20px;
}
@media (max-width: 408px) {
width: 17.5px;
}
@media (max-width: 408px) {
width: 15px;
}
@media (max-width: 385px) {
width: 0px;
}
width: 350px;
height: 4px;
}
.last-text {
@media (min-width: 1903px) {
padding-right: 95px;
}
@media (min-width: 1256px) and (max-width: 1450px) {
padding-right: 15px;
}
@media (min-width: 1050px) and (max-width: 1256px) {
padding-right: 35px;
}
@media (max-width: 1050px) {
padding-right: 35px;
}
}
.third-text {
@media (min-width: 1903px) {
padding-right: 65px;
}
@media (min-width: 1256px) and (max-width: 1450px) {
padding-right: 5px;
}
@media (min-width: 1050px) and (max-width: 1256px) {
padding-right: 35px;
}
@media (max-width: 1050px) {
padding-right: 35px;
}
}
.second-text {
@media (min-width: 1903px) {
padding-right: 25px;
}
padding-right: 7.5px;
@media (max-width: 1256px) {
padding-right: 5px;
}
}
.row-alignment {
@media (min-width: 1903px) {
padding-right: 60px;
}
@media (max-width: 1256px) {
padding-right: 15px;
}
@media (max-width: 1200px) {
padding-right: 20px;
}
@media (max-width: 960px) {
padding-left: 40px;
}
@media (max-width: 930px) {
padding-left: 35px;
}
@media (max-width: 910px) {
padding-left: 27.5px;
}
@media (max-width: 910px) {
padding-left: 27.5px;
}
@media (max-width: 880px) {
padding-left: 25px;
}
@media (max-width: 840px) {
padding-left: 20px;
}
@media (max-width: 820px) {
padding-left: 17px;
}
@media (max-width: 800px) {
padding-left: 10px;
}
@media (max-width: 775px) {
padding-left: 7px;
}
@media (max-width: 755px) {
padding-left: 0px;
}
@media (max-width: 750px) {
padding-left: 47px;
}
@media (max-width: 735px) {
padding-left: 43.5px;
}
@media (max-width: 720px) {
padding-left: 45px;
}
@media (max-width: 705px) {
padding-left: 40px;
}
@media (max-width: 697px) {
padding-left: 38px;
}
@media (max-width: 690px) {
padding-left: 37.5px;
}
@media (max-width: 690px) {
padding-left: 35px;
}
@media (max-width: 670px) {
padding-left: 33px;
}
@media (max-width: 660px) {
padding-left: 32.5px;
}
@media (max-width: 650px) {
padding-left: 30px;
}
@media (max-width: 643px) {
padding-left: 32px;
}
@media (max-width: 635px) {
padding-left: 35px;
}
@media (max-width: 620px) {
padding-left: 28px;
}
@media (max-width: 610px) {
padding-left: 30px;
}
@media (max-width: 600px) {
padding-left: 40px;
}
@media (max-width: 599px) {
padding-left: 15px;
}
@media (max-width: 585px) {
padding-left: 6px;
}
@media (max-width: 575px) {
padding-left: 20px;
}
@media (max-width: 565px) {
padding-left: 15px;
}
@media (max-width: 555px) {
padding-left: 7px;
}
@media (max-width: 545px) {
padding-left: 10px;
}
@media (max-width: 535px) {
padding-left: 15px;
}
@media (max-width: 525px) {
padding-left: 13px;
}
@media (max-width: 515px) {
padding-left: 15px;
}
@media (max-width: 500px) {
padding-left: 13px;
}
@media (max-width: 480px) {
padding-left: 8.5px;
}
@media (max-width: 475px) {
padding-left: 14px;
}
@media (max-width: 465px) {
padding-left: 13px;
}
@media (max-width: 455px) {
padding-left: 10px;
}
@media (max-width: 445px) {
padding-left: 8px;
}
@media (max-width: 437px) {
padding-left: 17.5px;
}
@media (max-width: 425px) {
padding-left: 10px;
}
@media (max-width: 418px) {
padding-left: 7.5px;
}
@media (max-width: 407px) {
padding-left: 13px;
}
@media (max-width: 401px) {
padding-left: 22px;
}
@media (max-width: 397px) {
padding-left: 17.5px;
}
@media (max-width: 388px) {
padding-left: 15px;
}
@media (max-width: 385px) {
padding-left: 25px;
}
@media (max-width: 363px) {
padding-left: 22.5px;
}
@media (max-width: 340px) {
padding-left: 1px;
}
}
.arrow-one {
color: #979797;
}
.arrow-two {
color: #979797;
}
.arrow-three {
color: #979797;
}
.number {
margin-right: 1px;
}
.finish-button {
padding-right: 24px;
@media (max-width: 448px) {
padding-left: 24px;
}
}
.gg-arrow-long-right::after {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 20px;
height: 20px;
border-top: 3px solid;
border-right: 3px solid;
transform: rotate(45deg);
right: 0;
bottom: -9px;
border-radius: 3px 3px 3px 3px;
@media (max-width: 385px) {
width: 0px;
height: 0px;
border-top: 0px solid;
border-right: 0px solid;
}
}
.path {
display: flex;
}
.steps {
flex: 1;
text-align: start;
@media (max-width: 1903px) {
padding-left: 100px;
}
@media (max-width: 1263px) {
padding-left: 70px;
}
@media (max-width: 960px) {
padding-left: 50px;
}
@media (max-width: 750px) {
padding-left: 20px;
}
@media (max-width: 642px) {
padding-left: 15px;
}
@media (max-width: 600px) {
padding-left: 8px;
}
@media (max-width: 437px) {
padding-left: 5px;
}
@media (max-width: 402px) {
padding-left: 0px;
}
padding-left: 200px;
}
.last-step {
text-align: start;
@media (max-width: 1903px) {
padding-left: 110px;
}
@media (max-width: 1263px) {
padding-left: 82px;
padding-right: 10px;
}
@media (max-width: 960px) {
padding-left: 62px;
}
@media (max-width: 750px) {
padding-left: 32px;
}
@media (max-width: 642px) {
padding-left: 27px;
}
@media (max-width: 600px) {
padding-left: 22px;
}
@media (max-width: 437px) {
padding-left: 12px;
}
padding-left: 210px;
}
.first-steps-text {
font-weight: 900;
font-size: 16px;
}
.note {
font-weight: 900;
font-size: 14px;
}
.p1-grey {
color: #979797;
}
.p1-green {
color: #bdc931;
}
.cursor {
cursor: default;
padding-left: 1px;
}
.form-font {
color: black;
font-weight: 600;
}
.background-transparent {
background-color: transparent;
}
.error-font {
font-weight: 600;
font-size: 16px;
}
.image {
padding-top: 20px;
@media (min-width: 520px) {
max-width: 500px;
}
@media (max-width: 520px) {
max-width: 300px;
}
}
</style>