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

     1  <template>
     2    <v-app>
     3      <v-main>
     4        <v-container class="fill-height">
     5          <v-row align="center" justify="center">
     6            <v-col cols="12" md="5">
     7              <v-card color="accent" elevation="12" dark>
     8                <div class="d-flex justify-center logo-box">
     9                  <v-avatar color="primary" class="logo" size="56">
    10                    <img :src="require('@/assets/logo.png')" />
    11                  </v-avatar>
    12                </div>
    13                <v-card-title
    14                  primary-title
    15                  class="justify-center text-h4 font-weight-black"
    16                >Covergates</v-card-title>
    17                <v-card-text class="d-flex flex-column">
    18                  <v-btn
    19                    class="my-2 text-none text-h6"
    20                    tile
    21                    large
    22                    :href="login.url"
    23                    v-for="(login, index) in logins"
    24                    :key="index"
    25                  >
    26                    <v-icon large>{{login.icon}}</v-icon>
    27                    <v-spacer />
    28                    Login with {{login.name}}
    29                    <v-spacer />
    30                  </v-btn>
    31                </v-card-text>
    32              </v-card>
    33            </v-col>
    34          </v-row>
    35        </v-container>
    36      </v-main>
    37    </v-app>
    38  </template>
    39  
    40  <script lang="ts">
    41  import { Component } from 'vue-property-decorator';
    42  import Vue from '@/vue';
    43  
    44  interface LoginSCM {
    45    name: string;
    46    icon: string;
    47    url: string;
    48  }
    49  
    50  @Component
    51  export default class Login extends Vue {
    52    private logins: LoginSCM[] = [
    53      {
    54        name: 'Gitea',
    55        icon: '$gitea',
    56        url: `${this.$store.state.base}/login/gitea`
    57      },
    58      {
    59        name: 'Github',
    60        icon: 'mdi-github',
    61        url: `${this.$store.state.base}/login/github`
    62      },
    63      {
    64        name: 'GitLab',
    65        icon: 'mdi-gitlab',
    66        url: `${this.$store.state.base}/login/gitlab`
    67      }
    68    ];
    69  
    70    mounted() {
    71      console.log(this.$store.state.user.current);
    72    }
    73  }
    74  </script>
    75  
    76  <style lang="scss" scoped>
    77  .logo-box {
    78    max-height: 28px;
    79    .logo {
    80      position: 'relative';
    81      top: -28px;
    82    }
    83  }
    84  </style>