[Vuejs]-Render the Python/Flask Backend to Vue.js Frontend

by

0👍

Finally was able to make it work like below.

<template>
  <div>
    <v-container fluid>
      <v-row align="center" class="mt-16">
        <v-col class="d-flex" cols="12" sm="4" offset-sm="4">
          <v-select
            :items="squads"
            label="Squads Name"
            v-model="selected_squad"
            outlined
          ></v-select>
        </v-col>
        <v-col class="d-flex" cols="12" sm="4" offset-sm="4">
          <v-select
            :items="accounts"
            item-text="name"
            item-value="id"
            v-model="selected_aws_account"
            label="AWS Accounts"
            outlined
          ></v-select>
        </v-col>
      </v-row>
      <v-row>
        <v-col class="d-flex justify-center">
          <v-btn elevation="17" x-large @click="printResult">Submit</v-btn>
        </v-col>
      </v-row>
      <v-row v-if="showResult">
        <v-col class="d-flex" cols="12" sm="4" offset-sm="4">
          <h4>
            Please browse to
            <a href="https://provider.com"
              >Okta Self Service Portal</a
            >
            then on the left pane of the page click on "Manage Access" and then click on "Self Service Access Request" and finally select "AWS" as the application. Good to fire the request!
          </h4>
        </v-col>
        <v-col class="d-flex" cols="12" sm="4" offset-sm="4">
          <v-text-field
        class
            :value="output"
            label="Role is:"
            outlined
            readonly
          ></v-text-field>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: "Home",
  data: () => ({
    squads: '',
    aws_accounts: [
      "account1(123456789)",
      "account2(123456789)",
      "account3(123456789)",
      "account4(123456789)",
      "account5(123456789)",
      "account6(123456789)",
    ],
    result: "",
    selected_squad: "",
    selected_aws_account: "",
    selected_aws_role: "",
    output: "",
    accounts: [
      { id: 123456789, name: "account1" },
      { id: 123456789, name: "account2" },
      { id: 123456789, name: "account3" },
      { id: 123456789, name: "account4" },
      { id: 123456789, name: "account5" },
      { id: 123456789, name: "account6" },
    ],
    showResult: false,
  }),
  methods: {
    getSquads() {
      const path = 'http://localhost:5000';
      axios.get(path)
        .then((res) => {
          this.squads = res.data;
        })
        .catch((error) => {
          console.error(error);
        });
    },
    printResult() {
      this.showResult = true;
      this.output = `AWS ${this.selected_aws_account} - ${this.selected_squad}`;
    },
  },
  created() {
    this.getSquads();
  },
  components: {},
};
</script>

Leave a comment