linkout + some i18n

frontend/locales/en.ts

@@ -245,6 +245,21 @@ const msgs: LocaleMessageObject = {
             softDelete: 'Project deleted by {0}',
         },
     },
+    author: {
+        watching: 'Watching',
+        stars: 'Stars',
+        orgs: 'Organizations',
+        viewOnForums: 'View on forums ',
+        memberSince: 'A member since {}',
+        numProjects: '{0} project(s)',
+        addTagline: 'Add a tagline',
+    },
+    linkout: {
+        title: 'External Link Warning',
+        text: 'You have clicked on an external link to "{0}". If you did not intend to visit this link, please go back. Otherwise, click continue.',
+        abort: 'Go Back',
+        continue: 'Continue',
+    },
     message: 'Good morning!',
 };
 

frontend/pages/_author/_slug.vue

@@ -93,8 +93,7 @@
                     v-for="tab in tabs"
                     :key="tab.title"
                     :exact="!!tab.exact"
-                    :to="tab.external ? undefined : tab.link"
-                    :href="tab.external ? tab.link : undefined"
+                    :to="tab.external ? '/linkout?remoteUrl=' + tab.link : tab.link"
                     :nuxt="!tab.external"
                 >
                     <v-icon>{{ tab.icon }}</v-icon>

frontend/pages/_author/index.vue

@@ -19,7 +19,7 @@
                     <v-subheader>
                         <template v-if="user.tagline">{{ user.tagline }}</template>
                         <!-- TODO tagline edit -->
-                        <!--<template v-else-if="u.isCurrent() || canEditOrgSettings(u, o, so)">Add a tagline</template>-->
+                        <!--<template v-else-if="u.isCurrent() || canEditOrgSettings(u, o, so)">{{ $t('author.addTagline') }}</template>-->
                         <v-btn icon>
                             <v-icon>mdi-pencil</v-icon>
                         </v-btn>
@@ -28,10 +28,9 @@
             </v-col>
             <v-spacer />
             <v-col cols="2">
-                <!--TODO i18n-->
-                <v-subheader>{{ user.projectCount }} project(s)</v-subheader>
-                <v-subheader>A member since {{ $util.prettyDate(user.joinDate) }}</v-subheader>
-                <a :href="$util.forumUrl(user.name)">View on forums <v-icon>mdi-open-in-new</v-icon></a>
+                <v-subheader>{{ $t('author.numProjects', [user.projectCount]) }}</v-subheader>
+                <v-subheader>{{ $t('author.memberSince', [$util.prettyDate(user.joinDate)]) }}</v-subheader>
+                <a :href="$util.forumUrl(user.name)">{{ $t('author.viewForums') }}<v-icon>mdi-open-in-new</v-icon></a>
             </v-col>
         </v-row>
         <v-divider />
@@ -41,18 +40,15 @@
             </v-col>
             <v-col cols="12" md="4">
                 <v-list dense>
-                    <!-- todo i18n -->
-                    <v-subheader>Organizations</v-subheader>
+                    <v-subheader>{{ $t('author.orgs') }}</v-subheader>
                     <!-- todo display orgs -->
                 </v-list>
                 <v-list dense>
-                    <!-- todo i18n -->
-                    <v-subheader>Stars</v-subheader>
+                    <v-subheader>{{ $t('author.stars') }}</v-subheader>
                     <!-- todo display stars -->
                 </v-list>
                 <v-list dense>
-                    <!-- todo i18n -->
-                    <v-subheader>Watching</v-subheader>
+                    <v-subheader>{{ $t('author.watching') }}</v-subheader>
                     <!-- todo watching -->
                 </v-list>
             </v-col>
@@ -66,7 +62,7 @@ import { PaginatedResult, Project } from 'hangar-api';
 import { Context } from '@nuxt/types';
 import { HangarUser } from 'hangar-internal';
 import UserAvatar from '~/components/UserAvatar.vue';
-import ProjectList from '~/components/ProjectList.vue';
+import ProjectList from '~/components/projects/ProjectList.vue';
 
 interface Button {
     icon: String;

frontend/pages/index.vue

@@ -59,15 +59,10 @@
 <script lang="ts">
 import { Component, Vue } from 'nuxt-property-decorator';
 import { PaginatedResult, Project } from 'hangar-api';
-import ProjectList from '~/components/ProjectList.vue';
+import { Platform } from 'hangar-internal';
+import ProjectList from '~/components/projects/ProjectList.vue';
 import HangarSponsor from '~/components/layouts/Sponsor.vue';
 
-// TODO move somewhere else
-interface Platform {
-    icon: string;
-    text: string;
-}
-
 @Component({
     components: {
         ProjectList,

frontend/pages/linkout.vue

@@ -1,14 +1,29 @@
 <template>
-    <div>{{ $nuxt.$route.name }}</div>
+    <v-col cols="12" md="6" offset-md="3">
+        <v-card>
+            <v-card-title v-text="$t('linkout.title')" />
+            <v-card-text v-text="$t('linkout.text', [target])" />
+            <v-card-actions>
+                <v-btn @click="goBack" v-text="$t('linkout.abort')" />
+                <v-btn :href="target" v-text="$t('linkout.continue')" />
+            </v-card-actions>
+        </v-card>
+    </v-col>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'nuxt-property-decorator';
 
-// TODO linkout page
-
 @Component
-export default class LinkoutPage extends Vue {}
+export default class LinkoutPage extends Vue {
+    get target() {
+        return this.$route.query.remoteUrl;
+    }
+
+    goBack() {
+        window.history.back();
+    }
+}
 </script>
 
 <style lang="scss" scoped></style>

frontend/plugins/utils.ts

@@ -159,7 +159,7 @@ const createUtil = ({ store, error }: Context) => {
                 });
                 console.log(err);
             } else if (err.response) {
-                // TODO check is msg is a i18n key and use that instead
+                // TODO check is msg is a i18n key and use that instead (use $te to check existence of a key)
                 if (err.response.data.isHangarApiException) {
                     const data: HangarApiException = err.response.data;
                     store.dispatch('snackbar/SHOW_NOTIF', {

frontend/types/internal/data.d.ts

@@ -22,4 +22,9 @@ declare module 'hangar-internal' {
         name: string;
         hex: string;
     }
+
+    interface Platform {
+        icon: string;
+        text: string;
+    }
 }