add org creation page

frontend/.eslintrc.js

@@ -19,5 +19,6 @@ module.exports = {
                 allowModifiers: true,
             },
         ],
+        'vue/valid-template-root': 'off', // dum false positive
     },
 };

frontend/components/UserAvatar.vue

@@ -60,4 +60,8 @@ export default class UserAvatar extends Vue {
     width: 50px;
     height: 50px;
 }
+.user-avatar-xs {
+    width: 32px;
+    height: 32px;
+}
 </style>

frontend/components/UserSelectionForm.vue

@@ -0,0 +1,35 @@
+<template>
+    <div>
+        <v-list>
+            <v-list-item v-for="user in users" :key="user.id">
+                <UserAvatar :username="user.name" :avatar-url="$util.avatarUrl(user.name)" clazz="user-avatar-xs" />
+                {{ user.name }}
+                ROLE HERE
+                <!-- todo role -->
+            </v-list-item>
+            <v-divider />
+            <v-list-item>
+                <!-- todo auto suggest users here -->
+                <v-text-field :label="$t('form.userSelection.addUser')"></v-text-field>
+            </v-list-item>
+            <v-divider />
+        </v-list>
+        <v-btn>{{ $t('form.userSelection.create') }}</v-btn>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'nuxt-property-decorator';
+import { User } from 'hangar-api';
+import UserAvatar from '~/components/UserAvatar.vue';
+
+// TODO v-model for users
+@Component({
+    components: { UserAvatar },
+})
+export default class UserSelectionForm extends Vue {
+    users: Array<User> = [{ id: 1, name: 'Test' }];
+}
+</script>
+
+<style lang="scss" scoped></style>

frontend/locales/en.ts

@@ -120,6 +120,19 @@ const msgs: LocaleMessageObject = {
         },
         sendForApproval: 'Send for approval',
     },
+    organization: {
+        new: {
+            title: 'Create a new Organization',
+            text: 'Organizations allow you group users provide closer collaboration between them within your projects on Hangar.',
+            name: 'Organization Name',
+        },
+    },
+    form: {
+        userSelection: {
+            addUser: 'Add User...',
+            create: 'Create',
+        },
+    },
     visibility: {
         notice: {
             needsChanges: 'This project requires changes: {0}',

frontend/pages/organizations/new.vue

@@ -1,13 +1,21 @@
 <template>
-    <div>{{ $nuxt.$route.name }}</div>
+    <v-card>
+        <v-card-title v-text="$t('organization.new.title')" />
+        <v-card-text v-text="$t('organization.new.text')" />
+        <v-text-field type="text" :label="$t('organization.new.name')"></v-text-field>
+        <v-divider />
+        <UserSelectionForm />
+    </v-card>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'nuxt-property-decorator';
+import UserSelectionForm from '~/components/UserSelectionForm.vue';
 
 // TODO implement OrganizationsNewPage
-
-@Component
+@Component({
+    components: { UserSelectionForm },
+})
 export default class OrganizationsNewPage extends Vue {}
 </script>