Catalog revamp

client/components/auth/ForgotPassword.vue

@@ -6,7 +6,7 @@
       class="mb-4 body-2">
       {{ error || 'Sending reset email...' }}
     </v-alert>
-    <form @submit.prevent="submit">
+    <form v-if="!error" @submit.prevent="submit">
       <v-text-field
         v-validate="{ required: true, email: true }"
         v-model="email"
@@ -15,13 +15,19 @@
         type="email"
         name="email"
         label="Please enter your email"/>
-      <v-btn :disabled="!isValid" color="primary" outline block type="submit">
+      <v-btn
+        :disabled="!isValid || showMessage"
+        color="primary"
+        outline
+        block
+        type="submit">
         Send reset email
       </v-btn>
       <div class="options">
         <a @click="$router.go(-1)">Back</a>
       </div>
     </form>
+    <a v-else @click.stop="resetInput">Retry</a>
   </div>
 </template>
 
@@ -30,15 +36,15 @@ import { delay } from 'bluebird';
 import { mapActions } from 'vuex';
 import { withValidation } from 'utils/validation';
 
+const getDefaultData = () => ({
+  email: '',
+  showMessage: false,
+  error: null
+});
+
 export default {
   mixins: [withValidation()],
-  data() {
-    return {
-      email: '',
-      showMessage: false,
-      error: null
-    };
-  },
+  data: () => getDefaultData(),
   computed: {
     isValid: vm => vm.email && vm.vErrors.count() === 0
   },
@@ -49,6 +55,9 @@ export default {
       Promise.all([this.forgotPassword({ email: this.email }), delay(3000)])
         .then(() => this.$router.push('/'))
         .catch(() => (this.error = 'Something went wrong!'));
+    },
+    resetInput() {
+      Object.assign(this, getDefaultData());
     }
   }
 };

client/components/auth/ResetPassword.vue

@@ -57,7 +57,8 @@ export default {
     ...mapActions(['resetPassword']),
     submit() {
       const { token } = this.$route.params;
-      this.$validator.validateAll().then(() => {
+      this.$validator.validateAll().then(isValid => {
+        if (!isValid) return;
         return this.resetPassword({ password: this.password, token })
           .then(() => this.$router.push('/'))
           .catch(() => (this.error = 'An error has occurred!'));

client/components/catalog/Card.vue

@@ -0,0 +1,103 @@
+<template>
+  <v-card @click="navigateTo" class="repository-card">
+    <div class="card-heading blue-grey darken-4">
+      <v-chip :color="repository.data.color" small label class="ml-3 mr-0"/>
+      <v-chip color="grey lighten-3" small label class="ml-0">
+        {{ schema }}
+      </v-chip>
+      <v-card-title class="headline grey--text text--lighten-4 pt-1">
+        {{ name }}
+      </v-card-title>
+    </div>
+    <div class="card-body">
+      <div class="pb-2 grey--text text--darken-2">
+        <v-icon color="primary" class="pr-1">mdi-history</v-icon>
+        <span>{{ userAction.createdAt | formatDate }}</span>
+        <div>{{ userAction.user.email }}</div>
+      </div>
+      <div class="desc grey--text text--darken-3">{{ description }}</div>
+    </div>
+    <v-card-actions class="px-2 py-1">
+      <v-btn @click.stop="pin({ id: repository.id, pin: !isPinned })" icon>
+        <v-icon
+          :color="isPinned ? 'pink': 'grey'"
+          :class="{ 'mdi-rotate-45': isPinned }">
+          mdi-pin
+        </v-icon>
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+import first from 'lodash/first';
+import get from 'lodash/get';
+import { getSchema } from 'shared/activities';
+import { mapActions } from 'vuex';
+import truncate from 'truncate';
+
+export default {
+  props: {
+    repository: { type: Object, required: true }
+  },
+  computed: {
+    name: ({ repository }) => truncate(repository.name, 70),
+    description: ({ repository }) => truncate(repository.description, 100),
+    schema: ({ repository }) => getSchema(repository.schema).name,
+    userAction: ({ repository }) => first(repository.revisions),
+    isPinned: ({ repository }) => get(repository, 'courseUser.pinned', false)
+  },
+  methods: {
+    ...mapActions('courses', ['pin']),
+    navigateTo() {
+      if (window.getSelection().toString()) return;
+      this.$router.push({
+        name: 'course',
+        params: { courseId: this.repository.id }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.repository-card {
+  text-align: left;
+  transition: box-shadow 0.1s ease;
+  cursor: pointer;
+
+  &:hover {
+    box-shadow: 0 10px 20px rgba(0,0,0,0.2), 0 8px 8px rgba(0,0,0,0.18);
+  }
+}
+
+.card-heading {
+  height: 146px;
+  padding: 8px 0 0;
+  overflow: hidden;
+
+  .v-chip {
+    font-weight: 600;
+    text-transform: uppercase;
+  }
+
+  @media (max-width: 1263px) {
+    height: 180px;
+  }
+}
+
+.card-body {
+  margin-bottom: 10px;
+  padding: 14px 24px 0;
+
+  .desc {
+    height: 60px;
+    font-weight: 500;
+    overflow: hidden;
+
+    @media (max-width: 1263px) {
+      height: 85px;
+    }
+  }
+}
+</style>