UI: Changes to AcademyTopSection

erpnext/public/js/education/web-academy/components/AcademyTopSection.vue

@@ -10,7 +10,7 @@
 		</ul>
 		<p class='lead' v-html="description"></p>
 		<p class="mt-4">
-			<a class="btn btn-primary btn-lg" href="/enroll">Explore Courses</a>
+			<AcademyTopSectionButton/>
 		</p>
 	</div>
 </section>
@@ -18,7 +18,10 @@
 <script>
 import AcademyTopSectionButton from "./AcademyTopSectionButton.vue"
 export default {
-	props: ['title', 'description', 'buttonName'],
+	props: ['title', 'description'],
     name: "AcademyTopSection",
+    components: {
+    	AcademyTopSectionButton
+    }
 };
 </script>

erpnext/public/js/education/web-academy/components/AcademyTopSectionButton.vue

@@ -1,5 +1,6 @@
 <template>
-	<button class='btn btn-primary btn-lg' @click="$router.push()">{{ buttonName }}</button>
+    <button v-if="isLoggedIn" class='btn btn-primary btn-lg' @click="getUrl()">{{ buttonName }}</button>
+	<a v-else class='btn btn-primary btn-lg' href="/login#signup">{{ buttonName }}</a>
 </template>
 <script>
 export default {
@@ -7,24 +8,30 @@ export default {
     data() {
         return {
             buttonName: '',
-            url: {}
+            isLoggedIn: this.$root.$data.checkLogin()
         }
     },
     mounted() {
-    	if(this.$route.name == 'home'){
+        if(this.$root.$data.checkLogin()){
-    		this.buttonName = 'Explore Courses'
+        	if(this.$route.name == 'home'){
-            this.url = {}
+                this.buttonName = 'Explore Courses'
-    	}
+        	}
-        else if(this.$route.name == 'program'){
+            else if(this.$route.name == 'program'){
-            this.buttonName = 'Start Course'
+                this.buttonName = 'Start Course'
-            this.url = {
+            }
-                name: 'content',
+        }
-                params: {
+        else{
-                    code: this.$route.params.code,
+            this.buttonName = 'Sign Up'
-                    course: this.$route.params.course,
+        }
-                    type: this.nextContentType,
+    },
-
+    methods: {
-                }
+        getUrl() {
+            console.log('method getUrl() called')
+            if(this.$route.name == 'home'){
+                return ''
+            }
+            else if(this.$route.name == 'program'){
+                return 'Program/' + this.$route.params.code + this.$route.params.course
             }
         }
     }