github.com/covergates/covergates@v0.2.2-0.20201009050117-42ef8a19fb95/web/src/views/User.vue (about)

     1  <template>
     2    <perfect-scrollbar class="page-container">
     3      <v-container fill-height class="d-flex justify-center">
     4        <v-card flat width="600">
     5          <div class="d-md-flex flex-no-wrap justify-space-around align-center">
     6            <div class="d-flex flex-column justify-center align-center">
     7              <v-avatar size="128" color="grey">
     8                <v-icon size="64" v-if="avatar===''">mdi-account</v-icon>
     9                <img :src="avatar" :alt="`${name}-avatar`" v-else />
    10              </v-avatar>
    11              <v-card-title class="text-h4">{{name}}</v-card-title>
    12              <v-card-subtitle class="text-subtitles">{{mail}}</v-card-subtitle>
    13            </div>
    14            <div class="user-content">
    15              <v-card-text>
    16                <v-list>
    17                  <v-banner class="text-h5">SCM Accounts</v-banner>
    18                  <v-list-item v-for="(bind, index) in bindings" :key="index">
    19                    <v-list-item-icon>
    20                      <v-icon size="28">{{scmIcon(bind.name)}}</v-icon>
    21                    </v-list-item-icon>
    22                    <v-list-item-content class="text-uppercase">{{bind.name}}</v-list-item-content>
    23                    <v-list-item-action>
    24                      <v-icon v-if="bind.active">mdi-check</v-icon>
    25                      <v-btn text v-else color="red" @click="bindAccount(bind.name)">Link</v-btn>
    26                    </v-list-item-action>
    27                  </v-list-item>
    28                </v-list>
    29              </v-card-text>
    30            </div>
    31          </div>
    32        </v-card>
    33      </v-container>
    34    </perfect-scrollbar>
    35  </template>
    36  
    37  <script lang="ts">
    38  import { Component } from 'vue-property-decorator';
    39  import Vue from '@/vue';
    40  
    41  type bind = {
    42    name: string;
    43    active: boolean;
    44  };
    45  
    46  @Component({})
    47  export default class UserClass extends Vue {
    48    get user(): User | undefined {
    49      return this.$store.state.user.current;
    50    }
    51  
    52    get scm(): Record<string, boolean> | undefined {
    53      return this.$store.state.user.scm;
    54    }
    55  
    56    get avatar(): string {
    57      return this.user && this.user.avatar ? this.user.avatar : '';
    58    }
    59  
    60    get name(): string {
    61      return this.user && this.user.login ? this.user.login : '';
    62    }
    63  
    64    get mail(): string {
    65      return this.user && this.user.email ? this.user.email : '';
    66    }
    67  
    68    get bindings(): bind[] {
    69      const result = [] as bind[];
    70      if (this.scm) {
    71        for (const key in this.scm) {
    72          result.push({
    73            name: key,
    74            active: this.scm[key]
    75          });
    76        }
    77      }
    78      return result;
    79    }
    80  
    81    scmIcon(scm: string): string {
    82      switch (scm) {
    83        case 'github': {
    84          return 'mdi-github';
    85        }
    86        case 'gitea': {
    87          return '$vuetify.icons.gitea';
    88        }
    89        case 'gitlab': {
    90          return 'mdi-gitlab';
    91        }
    92        default: {
    93          return 'mdi-source-repository';
    94        }
    95      }
    96    }
    97  
    98    bindAccount(scm: string) {
    99      const base = this.$store.state.base;
   100      window.location.href = `${base}/login/${scm}?bind`;
   101    }
   102  }
   103  </script>
   104  
   105  <style lang="scss" scoped>
   106  .user-content {
   107    min-width: 300px;
   108  }
   109  </style>