@rancher/shell 0.1.0

package/components/auth/SelectPrincipal.vue

@@ -0,0 +1,203 @@
+<script>
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import Principal from '@shell/components/auth/Principal';
+import debounce from 'lodash/debounce';
+import { _EDIT } from '@shell/config/query-params';
+import { NORMAN } from '@shell/config/types';
+
+export default {
+  components: {
+    LabeledSelect,
+    Principal,
+  },
+
+  props: {
+    mode: {
+      type:    String,
+      default: _EDIT,
+    },
+
+    showMyGroupTypes: {
+      type: Array,
+      default() {
+        return ['group', 'user'];
+      },
+    },
+
+    searchGroupTypes: {
+      type:    String,
+      default: null,
+      validator(val) {
+        return val === null || val === 'group' || val === 'user';
+      }
+    },
+
+    retainSelection: {
+      type:    Boolean,
+      default: false
+    },
+
+    project: {
+      type:    Boolean,
+      default: false
+    },
+  },
+
+  async fetch() {
+    this.principals = await this.$store.dispatch('rancher/findAll', {
+      type: NORMAN.PRINCIPAL,
+      opt:  { url: '/v3/principals' }
+    });
+
+    this.options = this.suggested;
+  },
+
+  data() {
+    return {
+      principals: null,
+      searchStr:  '',
+      options:    [],
+      newValue:   '',
+    };
+  },
+
+  computed: {
+    suggested() {
+      const out = this.principals.filter((x) => {
+        if ( !x.memberOf ) {
+          return false;
+        }
+
+        if ( !this.showMyGroupTypes.includes(x.principalType) ) {
+          return false;
+        }
+
+        return true;
+      })
+        .sort((a, b) => a.name.localeCompare(b.name))
+        .map(x => x.id);
+
+      return out;
+    },
+
+    label() {
+      return this.retainSelection ? this.t('cluster.memberRoles.addClusterMember.labelSelect') : this.t('cluster.memberRoles.addClusterMember.labelAdd');
+    },
+
+    placeholder() {
+      return this.project ? this.t('projectMembers.projectPermissions.searchForMember') : this.t('cluster.memberRoles.addClusterMember.placeholder');
+    }
+  },
+
+  created() {
+    this.debouncedSearch = debounce(this.search, 200);
+  },
+
+  methods: {
+    add(id) {
+      this.$emit('add', id);
+      if (!this.retainSelection) {
+        this.newValue = '';
+      }
+    },
+
+    onSearch(str, loading, vm) {
+      str = (str || '').trim();
+
+      this.searchStr = str;
+
+      if ( str ) {
+        loading(true);
+        this.debouncedSearch(str, loading);
+      } else {
+        this.search(null, loading);
+      }
+    },
+
+    async search(str, loading) {
+      if ( !str ) {
+        this.options = this.suggested.slice();
+        loading(false);
+
+        return;
+      }
+
+      try {
+        const res = await this.$store.dispatch('rancher/collectionAction', {
+          type:       NORMAN.PRINCIPAL,
+          actionName: 'search',
+          opt:        { url: '/v3/principals?action=search' },
+          body:       {
+            name:          str,
+            principalType: this.searchGroupTypes
+          }
+        });
+
+        if ( this.searchStr === str ) {
+          // If not, they've already typed something else
+          this.options = res.map(x => x.id);
+        }
+      } catch (e) {
+        this.options = [];
+      } finally {
+        loading(false);
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <LabeledSelect
+    ref="labeled-select"
+    v-model="newValue"
+    :mode="mode"
+    :label="label"
+    :placeholder="placeholder"
+    :options="options"
+    :searchable="true"
+    :filterable="false"
+    class="select-principal"
+    :class="{'retain-selection': retainSelection}"
+    @input="add"
+    @search="onSearch"
+  >
+    <template v-slot:no-options="{ searching }">
+      <template v-if="searching">
+        <span class="search-slot">
+          {{ t('cluster.memberRoles.addClusterMember.noResults') }}
+        </span>
+      </template>
+      <div v-else>
+        <em class="search-slot">
+          {{ t('cluster.memberRoles.addClusterMember.searchPlaceholder') }}
+        </em>
+      </div>
+    </template>
+
+    <template #option="option">
+      <Principal :key="option.label" :value="option.label" :use-muted="false" />
+    </template>
+
+    <template v-if="retainSelection" #selected-option="option">
+      <Principal :key="option.label" :value="option.label" :use-muted="false" class="mt-10 mb-10" />
+    </template>
+  </LabeledSelect>
+</template>
+
+<style lang="scss" scoped>
+  .search-slot{
+    color: var(--body-text);
+  }
+
+  .select-principal {
+    &.retain-selection {
+      min-height: 91px;
+      &.focused {
+        .principal {
+          display: none;
+        }
+      }
+    }
+  }
+</style>

package/components/auth/login/github.vue

@@ -0,0 +1,19 @@
+<script>
+import Login from '@shell/mixins/login';
+
+export default {
+  mixins: [Login],
+
+  methods: {
+    login() {
+      this.$store.dispatch('auth/redirectTo', { provider: 'github' });
+    },
+  },
+};
+</script>
+
+<template>
+  <button ref="btn" class="btn role-primary" @click="login">
+    Log In with GitHub
+  </button>
+</template>

package/components/auth/login/ldap.vue

@@ -0,0 +1,86 @@
+<script>
+import LabeledInput from '@shell/components/form/LabeledInput';
+import AsyncButton from '@shell/components/AsyncButton';
+import Login from '@shell/mixins/login';
+
+export default {
+  components: { LabeledInput, AsyncButton },
+  mixins:     [Login],
+
+  props: {
+    open: {
+      type:    Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return { username: '', password: '' };
+  },
+
+  methods: {
+    async login(buttonCb) {
+      try {
+        this.err = null;
+        await this.$store.dispatch('auth/login', {
+          provider: this.name,
+          body:     {
+            username: this.username,
+            password: this.password
+          }
+        });
+
+        buttonCb(true);
+        this.$router.replace('/');
+      } catch (err) {
+        this.err = err;
+        buttonCb(false);
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <form>
+    <template v-if="open">
+      <div class="span-6 offset-3">
+        <div class="mb-20">
+          <LabeledInput
+            v-model="username"
+            :label="t('login.username')"
+            autocomplete="username"
+          />
+        </div>
+        <div class="mb-20">
+          <LabeledInput
+            v-model="password"
+            type="password"
+            :label="t('login.password')"
+            autocomplete="password"
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col span-12 text-center">
+          <AsyncButton
+            ref="btn"
+            type="submit"
+            :action-label="t('login.loginWithProvider', {provider: displayName})"
+            :waiting-label="t('login.loggingIn')"
+            :success-label="t('login.loggedIn')"
+            :error-label="t('asyncButton.default.error')"
+            class="btn bg-primary"
+            style="font-size: 18px;"
+            @click="login"
+          />
+        </div>
+      </div>
+    </template>
+    <div v-else class="text-center">
+      <button style="font-size: 18px;" type="button" class="btn bg-primary" @click="$emit('showInputs')">
+        {{ t('login.loginWithProvider', {provider: displayName}) }}
+      </button>
+    </div>
+  </form>
+</template>

package/components/auth/login/oauth.vue

@@ -0,0 +1,21 @@
+<script>
+import Login from '@shell/mixins/login';
+
+export default {
+  mixins: [Login],
+
+  methods: {
+    login() {
+      this.$store.dispatch('auth/redirectTo', { provider: this.name });
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="text-center">
+    <button ref="btn" class="btn bg-primary" style="font-size: 18px;" @click="login">
+      {{ t('login.loginWithProvider', {provider: displayName}) }}
+    </button>
+  </div>
+</template>

package/components/auth/login/oidc.vue

@@ -0,0 +1,21 @@
+<script>
+import Login from '@shell/mixins/login';
+
+export default {
+  mixins: [Login],
+
+  methods: {
+    login() {
+      this.$store.dispatch('auth/redirectTo', { provider: this.name });
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="text-center">
+    <button ref="btn" class="btn bg-primary" style="font-size: 18px;" @click="login">
+      {{ t('login.loginWithProvider', {provider: displayName}) }}
+    </button>
+  </div>
+</template>

package/components/auth/login/saml.vue

@@ -0,0 +1,23 @@
+<script>
+import Login from '@shell/mixins/login';
+export default {
+  mixins: [Login],
+
+  methods: {
+    async login() {
+      const res = await this.$store.dispatch('auth/login', { provider: this.name, body: { finalRedirectUrl: window.location.origin } });
+      const { idpRedirectUrl } = res;
+
+      window.location.href = idpRedirectUrl;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="text-center">
+    <button ref="btn" class="btn bg-primary" style="font-size: 18px;" @click="login">
+      {{ t('login.loginWithProvider', {provider: displayName}) }}
+    </button>
+  </div>
+</template>

package/components/dialog/AddClusterMemberDialog.vue

@@ -0,0 +1,72 @@
+<script>
+import Card from '@shell/components/Card';
+import ClusterPermissionsEditor from '@shell/components/form/Members/ClusterPermissionsEditor';
+
+export default {
+  components: {
+    Card,
+    ClusterPermissionsEditor
+  },
+
+  props:      {
+    resources: {
+      type:     Array,
+      required: true
+    }
+  },
+
+  data() {
+    return { bindings: [] };
+  },
+
+  computed: {
+    onAdd() {
+      return this.resources[0];
+    },
+  },
+
+  methods: {
+    close() {
+      this.$emit('close');
+    },
+
+    apply() {
+      this.onAdd(this.bindings);
+      this.close();
+    },
+  }
+};
+</script>
+
+<template>
+  <Card class="prompt-rotate" :show-highlight-border="false">
+    <h4 slot="title" class="text-default-text" v-html="t('addClusterMemberDialog.title')" />
+
+    <div slot="body" class="pl-10 pr-10">
+      <ClusterPermissionsEditor v-model="bindings" :use-two-columns-for-custom="true" />
+    </div>
+
+    <div slot="actions" class="buttons">
+      <button class="btn role-secondary mr-10" @click="close">
+        {{ t('generic.cancel') }}
+      </button>
+
+      <button
+        class="btn role-primary"
+        @click="apply"
+      >
+        {{ t('generic.add') }}
+      </button>
+    </div>
+  </Card>
+</template>
+<style lang='scss' scoped>
+  .prompt-rotate {
+    margin: 0;
+  }
+  .buttons {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+  }
+</style>