You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airavata.apache.org by is...@apache.org on 2020/10/12 12:07:23 UTC
[airavata-custos-portal] branch ux-improvement updated: gh-31:
Improve login and signup UI
This is an automated email from the ASF dual-hosted git repository.
isjarana pushed a commit to branch ux-improvement
in repository https://gitbox.apache.org/repos/asf/airavata-custos-portal.git
The following commit(s) were added to refs/heads/ux-improvement by this push:
new bc4bf5f gh-31: Improve login and signup UI
new 2eb127d Merge pull request #54 from dinukadesilva/gh-31-imrpove-login-and-signup-ui
bc4bf5f is described below
commit bc4bf5fec02160ef67a2272bb0956ed25ab8134f
Author: Dinuka De Silva <L....@gmail.com>
AuthorDate: Mon Oct 12 08:27:15 2020 +0530
gh-31: Improve login and signup UI
---
.../src/components/landing/Landing.vue | 24 ++++++++++++++++------
.../src/components/registration/CreateAccount.vue | 20 ++++++++++++++----
2 files changed, 34 insertions(+), 10 deletions(-)
diff --git a/custos-demo-gateway/src/components/landing/Landing.vue b/custos-demo-gateway/src/components/landing/Landing.vue
index 9f87d17..720d1ad 100644
--- a/custos-demo-gateway/src/components/landing/Landing.vue
+++ b/custos-demo-gateway/src/components/landing/Landing.vue
@@ -1,18 +1,25 @@
<template>
<b-container>
<b-row align-v="top" align-h="center">
- <b-col style="min-width: 300px; max-width: 100%">
+ <b-col style="min-width: 300px; max-width: 100%" class="text-center">
<h2>Welcome to Custos</h2>
<p class="h2-sub">Sign up and start authenticating</p>
+ <div class="main-links">
+ <b-link href="http://airavata.apache.org/custos/">Learn more</b-link>
+ <b-link class="ml-5"
+ href="https://cwiki.apache.org/confluence/display/CUSTOS/Gateways+2020%3ACustos+Tutorial">
+ Get started
+ </b-link>
+ </div>
<img class="w-100" src="./../../assets/custos_home.png">
</b-col>
- <b-col style="max-width: 300px;min-width: 400px;" align-h="center">
+ <b-col style="max-width: 600px;min-width: 300px;" align-h="center">
<b-card class="w-100 login-card">
<div class="p-2">
- <h3 class="mb-2">Do you have an Institution Login ?</h3>
+ <h3 class="mb-2">(Recommended Option)</h3>
<b-button class="primary-btn w-100 text-center mt-2" variant="warning"
v-on:click="this.loadAuthURL">
- Register or Login with the Institution Login
+ Register or Login with your Institution Identity
</b-button>
</div>
</b-card>
@@ -150,7 +157,6 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h2 {
- text-align: left;
font-family: Avenir;
font-size: 35px;
font-weight: 900;
@@ -160,7 +166,6 @@
.h2-sub {
font-family: Avenir-Roman;
font-size: 22px;
- text-align: left;
color: #203a43;
}
@@ -219,6 +224,13 @@
font-size: 15px;
}
+ .main-links a {
+ font-family: Avenir;
+ font-size: 20px;
+ font-weight: 600;
+ color: #ea6a0a;
+ }
+
.additional-links {
font-size: 13px;
}
diff --git a/custos-demo-gateway/src/components/registration/CreateAccount.vue b/custos-demo-gateway/src/components/registration/CreateAccount.vue
index 97f0bda..1642032 100644
--- a/custos-demo-gateway/src/components/registration/CreateAccount.vue
+++ b/custos-demo-gateway/src/components/registration/CreateAccount.vue
@@ -1,13 +1,20 @@
<template>
<b-container>
<b-row align-v="top" align-h="center">
- <b-col style="min-width: 300px; max-width: 100%">
+ <b-col style="min-width: 300px; max-width: 100%" class="text-center">
<h2>Welcome to Custos</h2>
<p class="h2-sub">Sign up and start authenticating</p>
+ <div class="main-links">
+ <b-link href="http://airavata.apache.org/custos/">Learn more</b-link>
+ <b-link class="ml-5"
+ href="https://cwiki.apache.org/confluence/display/CUSTOS/Gateways+2020%3ACustos+Tutorial">
+ Get started
+ </b-link>
+ </div>
<img class="w-100" src="./../../assets/custos_home.png">
</b-col>
<b-col style="max-width: 600px;min-width: 300px;" align-h="center">
- <b-card class="w-100 mt-3 login-card">
+ <b-card class="w-100 login-card">
<form v-on:submit.prevent="registerUser" class="p-2 text-left">
<h3 class="mb-3">Create Account</h3>
<div class="p-2">
@@ -229,7 +236,6 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h2 {
- text-align: left;
font-family: Avenir;
font-size: 35px;
font-weight: 900;
@@ -239,7 +245,6 @@
.h2-sub {
font-family: Avenir-Roman;
font-size: 22px;
- text-align: left;
color: #203a43;
}
@@ -298,6 +303,13 @@
font-size: 15px;
}
+ .main-links a {
+ font-family: Avenir;
+ font-size: 20px;
+ font-weight: 600;
+ color: #ea6a0a;
+ }
+
.additional-links {
font-size: 13px;
}