JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: migrated AGName component to use SFC composition api

Browse Source 
Change-Id: I3158a759db15922a3598cf7f5a519ca4df194f28
This commit is contained in:
Vitalii 2023-03-23 18:01:01 +02:00 committed by Vitalii Shpital
parent 0da9430462
commit 1480b5b9a0
1 changed files with 65 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
web/satellite/src/components/onboardingTour/steps/cliFlow/AGName.vue
View File

@ -24,8 +24,8 @@
</CLIFlowContainer>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
<script setup lang="ts">
import { computed, ref } from 'vue';
import { RouteConfig } from '@/router';
import { AccessGrant } from '@/types/accessGrants';
@ -33,87 +33,82 @@ import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import CLIFlowContainer from '@/components/onboardingTour/steps/common/CLIFlowContainer.vue';
import VInput from '@/components/common/VInput.vue';
import Icon from '@/../static/images/onboardingTour/accessGrant.svg';
// @vue/component
@Component({
components: {
CLIFlowContainer,
VInput,
Icon,
},
})
export default class AGName extends Vue {
private name = '';
private errorMessage = '';
private isLoading = false;
const store = useStore();
const router = useRouter();
const notify = useNotify();
private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
/**
* Changes name data from input value.
* @param value
*/
public onChangeName(value: string): void {
this.name = value.trim();
this.errorMessage = '';
const name = ref<string>('');
const errorMessage = ref<string>('');
const isLoading = ref<boolean>(false);
/**
* Returns back route from store.
*/
const backRoute = computed((): string => {
return store.state.appStateModule.viewsState.onbAGStepBackRoute;
});
/**
* Changes name data from input value.
* @param value
*/
function onChangeName(value: string): void {
name.value = value.trim();
errorMessage.value = '';
}
/**
* Holds on back button click logic.
* Navigates to previous screen.
*/
async function onBackClick(): Promise<void> {
analytics.pageVisit(RouteConfig.OverviewStep.path);
backRoute.value ?
await router.push(backRoute.value).catch(() => {return; }) :
await router.push({ name: RouteConfig.OverviewStep.name });
}
/**
* Holds on next button click logic.
*/
async function onNextClick(): Promise<void> {
if (isLoading.value) return;
if (!name.value) {
errorMessage.value = 'Access Grant name can\'t be empty';
analytics.errorEventTriggered(AnalyticsErrorEventSource.ONBOARDING_NAME_STEP);
return;
}
/**
* Holds on back button click logic.
* Navigates to previous screen.
*/
public async onBackClick(): Promise<void> {
this.analytics.pageVisit(RouteConfig.OverviewStep.path);
this.backRoute ?
await this.$router.push(this.backRoute).catch(() => {return; }) :
await this.$router.push({ name: RouteConfig.OverviewStep.name });
isLoading.value = true;
let createdAccessGrant: AccessGrant;
try {
createdAccessGrant = await store.dispatch(ACCESS_GRANTS_ACTIONS.CREATE, name.value);
await notify.success('New clean access grant was generated successfully.');
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.ONBOARDING_NAME_STEP);
return;
} finally {
isLoading.value = false;
}
/**
* Holds on next button click logic.
*/
public async onNextClick(): Promise<void> {
if (this.isLoading) return;
store.commit(APP_STATE_MUTATIONS.SET_ONB_CLEAN_API_KEY, createdAccessGrant.secret);
name.value = '';
if (!this.name) {
this.errorMessage = 'Access Grant name can\'t be empty';
this.analytics.errorEventTriggered(AnalyticsErrorEventSource.ONBOARDING_NAME_STEP);
return;
}
this.isLoading = true;
let createdAccessGrant: AccessGrant;
try {
createdAccessGrant = await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.CREATE, this.name);
await this.$notify.success('New clean access grant was generated successfully.');
} catch (error) {
await this.$notify.error(error.message, AnalyticsErrorEventSource.ONBOARDING_NAME_STEP);
return;
} finally {
this.isLoading = false;
}
this.$store.commit(APP_STATE_MUTATIONS.SET_ONB_CLEAN_API_KEY, createdAccessGrant.secret);
this.name = '';
this.analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.AGPermissions)).path);
await this.$router.push({ name: RouteConfig.AGPermissions.name });
}
/**
* Returns back route from store.
*/
private get backRoute(): string {
return this.$store.state.appStateModule.viewsState.onbAGStepBackRoute;
}
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.AGPermissions)).path);
await router.push({ name: RouteConfig.AGPermissions.name });
}
</script>