From 95abc5476ec0b0859eed04aa8dc0361d7c400e1d Mon Sep 17 00:00:00 2001
From: raghosh <raghosh@loaner-laptop-13.local>
Date: Thu, 2 Jun 2022 17:53:59 +0200
Subject: [PATCH] #79: header and footer design changed. Added avatar for user
login which have all submitted changes, profile and logout options as
submenu.
---
web/src/App.vue | 6 +-
web/src/components/AboutPage.vue | 14 +-
web/src/components/BiomolecularPage.vue | 91 +++---
web/src/components/Condensates.vue | 94 +++---
web/src/components/Footers.vue | 178 +++++++++++-
web/src/components/LandingPage.vue | 26 +-
web/src/components/Navigation/TheNavBar.vue | 165 ++++++-----
web/src/components/Proteins.vue | 36 +--
web/src/components/SearchPage.vue | 100 ++++---
web/src/components/StatPage.vue | 32 +-
web/src/components/SyntheticPage.vue | 89 +++---
web/src/components/js/const.js | 12 +-
web/src/main.js | 4 +-
web/src/views/Help.vue | 6 +-
web/src/views/Login.vue | 15 +-
web/src/views/Profile.vue | 55 ++--
web/src/views/SignUp.vue | 307 ++++++++------------
web/tailwind.config.js | 21 +-
18 files changed, 659 insertions(+), 592 deletions(-)
diff --git a/web/src/App.vue b/web/src/App.vue
index 0993d8b..0bfaf3c 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,5 +1,5 @@
<template>
- <div id="app">
+ <div id="app" class="flex flex-col h-screen justify-between">
<!-- <img alt="logo" src="./assets/dd-code-1.png" width="200">-->
<!-- <div class="row">
<div
@@ -21,8 +21,10 @@
<the-nav-bar />
<!--<h1>DD-CODE Development Project</h1>-->
+ <main class="flex flex-col">
+ <router-view />
+ </main>
- <router-view />
<footers />
</div>
</template>
diff --git a/web/src/components/AboutPage.vue b/web/src/components/AboutPage.vue
index 2417b3a..b74c952 100644
--- a/web/src/components/AboutPage.vue
+++ b/web/src/components/AboutPage.vue
@@ -1,7 +1,7 @@
<template>
<div
id="page-content-wrapper"
- class="flex flex-wrap justify-center"
+ class="flex flex-wrap justify-center mb-14"
>
<div class="w-5/6">
<h2 class="font-bold">
@@ -201,10 +201,10 @@
</template>
<script>
-const _ = require('lodash');
+const _ = require("lodash");
export default {
- name: 'LandingPage',
+ name: "LandingPage",
components: {},
props: {
msg: String,
@@ -212,10 +212,10 @@ export default {
data() {
return {
driversList: [
- 'Undergo phase separation or self-assembly into liquid droplets independent of other proteins (1/3 stars).',
- 'Induce the formation of a condensate (2/3 stars).',
- 'Are essential for the integrity of a condensate (3/3 stars).',
- ]
+ "Undergo phase separation or self-assembly into liquid droplets independent of other proteins (1/3 stars).",
+ "Induce the formation of a condensate (2/3 stars).",
+ "Are essential for the integrity of a condensate (3/3 stars).",
+ ],
};
},
computed: {},
diff --git a/web/src/components/BiomolecularPage.vue b/web/src/components/BiomolecularPage.vue
index fb72dfc..66a3f80 100644
--- a/web/src/components/BiomolecularPage.vue
+++ b/web/src/components/BiomolecularPage.vue
@@ -1,11 +1,10 @@
<template>
- <div
-
- class="flex flex-wrap justify-center"
- >
+ <div class="flex flex-wrap mb-14 justify-center">
<div class="w-5/6">
<div class="p-4">
- <h2>Biomolecular Condensates (Membrane-less Organelles)</h2>
+ <h2 class="font-bold">
+ Biomolecular Condensates (Membrane-less Organelles)
+ </h2>
</div>
<data-table
@@ -18,57 +17,55 @@
</template>
<script>
- import DataTable from '@/components/Datatable/CondensateDataTable';
- const _ = require('lodash')
+import DataTable from "@/components/Datatable/CondensateDataTable";
+const _ = require("lodash");
- export default {
- name: 'BiomolecularPage',
- components: {
- DataTable
- },
- props: {
- msg: String
- },
- data() {
- return {
- isDev: process.env.NODE_ENV === 'development'
- }
- },
- computed: {
- },
- methods: {
- }
- }
+export default {
+ name: "BiomolecularPage",
+ components: {
+ DataTable,
+ },
+ props: {
+ msg: String,
+ },
+ data() {
+ return {
+ isDev: process.env.NODE_ENV === "development",
+ };
+ },
+ computed: {},
+ methods: {},
+};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
- @import url('~@/assets/bootstrap.css');
- @import url('~@/assets/datatable.css');
+@import url("~@/assets/bootstrap.css");
+@import url("~@/assets/datatable.css");
- .main {
- margin: 1.5rem;
- }
+.main {
+ margin: 1.5rem;
+}
- h3 {
- margin: 40px 0 0;
- }
+h3 {
+ margin: 40px 0 0;
+}
- a {
- color: #ef0087 !important;
- }
+a {
+ color: #ef0087 !important;
+}
- ul.a {
- list-style-type: disc;
- list-style-position: inside;
- }
+ul.a {
+ list-style-type: disc;
+ list-style-position: inside;
+}
- input[type="radio"] {
- margin: 2px;
- }
+input[type="radio"] {
+ margin: 2px;
+}
- .radio-label {
- margin-left: 0px;
- margin-right: 5px;
- }
+.radio-label {
+ margin-left: 0px;
+ margin-right: 5px;
+}
</style>
diff --git a/web/src/components/Condensates.vue b/web/src/components/Condensates.vue
index e23bd6f..0efdf0f 100644
--- a/web/src/components/Condensates.vue
+++ b/web/src/components/Condensates.vue
@@ -1,73 +1,65 @@
<template>
- <div
-
- class="flex flex-wrap justify-center"
- >
+ <div class="flex flex-wrap mb-14 justify-center">
<div class="w-5/6">
<div class="p-4">
- <h2>Condensates</h2>
+ <h2 class="font-bold">Condensates</h2>
</div>
- <data-table
- id="condensateTable"
- category="condensate"
- />
+ <data-table id="condensateTable" category="condensate" />
</div>
</div>
</template>
<script>
- import DataTable from '@/components/Datatable/CondensateDataTable';
- const _ = require('lodash')
+import DataTable from "@/components/Datatable/CondensateDataTable";
+const _ = require("lodash");
- export default {
- name: 'Condensates',
- components: {
- DataTable
- },
- props: {
- msg: String
- },
- data() {
- return {
- isDev: process.env.NODE_ENV === 'development'
- }
- },
- computed: {
- },
- methods: {
- }
- }
+export default {
+ name: "Condensates",
+ components: {
+ DataTable,
+ },
+ props: {
+ msg: String,
+ },
+ data() {
+ return {
+ isDev: process.env.NODE_ENV === "development",
+ };
+ },
+ computed: {},
+ methods: {},
+};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
- @import url('~@/assets/bootstrap.css');
- @import url('~@/assets/datatable.css');
+@import url("~@/assets/bootstrap.css");
+@import url("~@/assets/datatable.css");
- .main {
- margin: 1.5rem;
- }
+.main {
+ margin: 1.5rem;
+}
- h3 {
- margin: 40px 0 0;
- }
+h3 {
+ margin: 40px 0 0;
+}
- a {
- color: #ef0087 !important;
- }
+a {
+ color: #ef0087 !important;
+}
- ul.a {
- list-style-type: disc;
- list-style-position: inside;
- }
+ul.a {
+ list-style-type: disc;
+ list-style-position: inside;
+}
- input[type="radio"] {
- margin: 2px;
- }
+input[type="radio"] {
+ margin: 2px;
+}
- .radio-label {
- margin-left: 0px;
- margin-right: 5px;
- }
+.radio-label {
+ margin-left: 0px;
+ margin-right: 5px;
+}
</style>
diff --git a/web/src/components/Footers.vue b/web/src/components/Footers.vue
index 4c61f5f..595c8ae 100644
--- a/web/src/components/Footers.vue
+++ b/web/src/components/Footers.vue
@@ -1,5 +1,5 @@
<template>
- <div
+ <!-- <div
style="margin: 1.5rem; float: left"
class="main-wrapper"
>
@@ -9,21 +9,177 @@
class="color-accent-color"
href="mailto:cdcode@mpi-cbg.de"
>cdcode@mpi-cbg.de</a>
- </p>
- <!-- <h3>Reference</h3>-->
- <!-- <p>-->
- <!-- New publication authors will be provided.-->
- <!-- <strong>New publication title will be provided.</strong> Journal Name: ***-***.<br>-->
- <!-- <a href="http://www.ncbi.nlm.nih.gov/pubmed/[id]">[PubMed]</a>-->
- <!-- </p>-->
+ </p> -->
+ <!-- <h3>Reference</h3>-->
+ <!-- <p>-->
+ <!-- New publication authors will be provided.-->
+ <!-- <strong>New publication title will be provided.</strong> Journal Name: ***-***.<br>-->
+ <!-- <a href="http://www.ncbi.nlm.nih.gov/pubmed/[id]">[PubMed]</a>-->
+ <!-- </p>-->
+ <!-- </div> -->
+ <div>
+ <footer class="p-4 bg-gray-800 shadow md:px-6 md:py-8 dark:bg-gray-800">
+ <div class="sm:flex sm:items-center sm:justify-between">
+ <a href="/" class="flex items-center mb-4 sm:mb-0">
+ <img src="@/assets/cd-code-logo.png" class="mr-3 h-12" alt="Logo" />
+ <span
+ class="
+ self-center
+ text-2xl text-white-base
+ font-semibold
+ whitespace-nowrap
+ dark:text-white
+ "
+ >CD-CODE</span
+ >
+ </a>
+ <ul
+ class="
+ flex flex-wrap
+ items-center
+ mb-6
+ text-2xl text-white-base
+ sm:mb-0
+ dark:text-gray-400
+ "
+ >
+ <li>
+ <router-link
+ to="/about"
+ :class="{ active: $route.name === 'about' }"
+ @mouseover.native="openCondensateSubMenu = false"
+ class="mr-4 hover:underline hover:text-pink-base md:mr-6"
+ >
+ <span>About</span>
+ </router-link>
+ </li>
+ <li>
+ <a
+ href="#"
+ class="mr-4 hover:underline hover:text-pink-base md:mr-6"
+ >Privacy Policy</a
+ >
+ </li>
+ <!-- <li>
+ <a
+ href="#"
+ class="mr-4 hover:underline hover:text-pink-base md:mr-6"
+ >Licensing</a
+ >
+ </li> -->
+ <li>
+ <a
+ href="mailto:cdcode@mpi-cbg.de"
+ class="hover:underline hover:text-pink-base"
+ >Contact</a
+ >
+ </li>
+ </ul>
+ </div>
+ <hr
+ class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8"
+ />
+ <!-- <span
+ class="block text-2xl text-white-base sm:text-center dark:text-gray-400"
+ >© 2022 <a href="/" class="hover:underline">CD-CODE</a>. All Rights
+ Reserved.
+ </span> -->
+ <div class="sm:flex sm:items-center sm:justify-between">
+ <!-- <span class="text-2xl text-white-base sm:text-center dark:text-gray-400">
+
+ </span> -->
+ <a
+ href="mailto:cdcode@mpi-cbg.de"
+ class="text-white-base hover:text-pink-base dark:hover:text-white"
+ >
+ <font-awesome-icon size="xl" icon="fa-solid fa-envelope" />
+ <span class="text-2xl"> cdcode@mpi-cbg.de </span>
+ </a>
+
+ <span class="text-2xl text-white-base sm:text-center dark:text-gray-400"
+ >© 2022
+ <a href="/" class="hover:underline hover:text-pink-base">CD-CODE</a>.
+ All Rights Reserved.
+ </span>
+ <div class="flex mt-4 space-x-6 sm:justify-center sm:mt-0">
+ <!-- <a
+ href="#"
+ class="text-white-base hover:text-pink-base dark:hover:text-white"
+ >
+ <svg
+ class="w-10 h-10"
+ fill="currentColor"
+ viewBox="0 0 24 24"
+ aria-hidden="true"
+ >
+ <path
+ fill-rule="evenodd"
+ d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
+ clip-rule="evenodd"
+ />
+ </svg>
+ </a>
+ <a
+ href="#"
+ class="text-white-base hover:text-pink-base dark:hover:text-white"
+ >
+ <svg
+ class="w-10 h-10"
+ fill="currentColor"
+ viewBox="0 0 24 24"
+ aria-hidden="true"
+ >
+ <path
+ fill-rule="evenodd"
+ d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
+ clip-rule="evenodd"
+ />
+ </svg>
+ </a> -->
+ <a
+ href="https://twitter.com/cdcode_org"
+ target="_blank"
+ class="text-white-base hover:text-pink-base dark:hover:text-white"
+ >
+ <svg
+ class="w-10 h-10"
+ fill="currentColor"
+ viewBox="0 0 24 24"
+ aria-hidden="true"
+ >
+ <path
+ d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"
+ />
+ </svg>
+ </a>
+ <!-- <a
+ href="#"
+ class="text-white-base hover:text-pink-base dark:hover:text-white"
+ >
+ <svg
+ class="w-10 h-10"
+ fill="currentColor"
+ viewBox="0 0 24 24"
+ aria-hidden="true"
+ >
+ <path
+ fill-rule="evenodd"
+ d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+ clip-rule="evenodd"
+ />
+ </svg>
+ </a> -->
+ </div>
+ </div>
+ </footer>
</div>
</template>
<script>
export default {
- name: 'Footer',
+ name: "Footer",
mounted: function () {
// console.log(this.$route.name)
- }
-}
+ },
+};
</script>
diff --git a/web/src/components/LandingPage.vue b/web/src/components/LandingPage.vue
index 0a828fc..769a923 100644
--- a/web/src/components/LandingPage.vue
+++ b/web/src/components/LandingPage.vue
@@ -15,8 +15,12 @@
<br />
</p>
- <form class="form-horizontal" autocomplete="off" onSubmit="return false;">
- <div class="row mb-4">
+ <form
+ class="form-horizontal border border-gray-300 rounded-lg p-6"
+ autocomplete="off"
+ onSubmit="return false;"
+ >
+ <div class="row">
<label class="control-label col-sm-2" />
<div class="col-sm-4 input-sm">
<input
@@ -106,8 +110,6 @@
class="
text-white
bg-blue-500
- hover:bg-blue-700
- focus:ring-2 focus:ring-blue-300
rounded-lg
inline-flex
items-center
@@ -129,11 +131,10 @@
<div class="col-sm-4 input-sm">
<span style="float: right">
Examples:
- <span class="text-accent-color">
- <router-link class="color-accent-color" to="/protein_example"
- >UNE6</router-link
+ <span class="text-pink-base">
+ <router-link to="/protein_example">UNE6</router-link
>,
- <router-link class="color-accent-color" to="/condensate_example"
+ <router-link to="/condensate_example"
>nucleolus__3702</router-link
>
</span>
@@ -205,6 +206,15 @@ export default {
};
},
computed: {
+ jwt: function () {
+ return this.$store.getters["User/jwt"];
+ },
+ userData: function () {
+ return this.$store.getters["User/userData"];
+ },
+ getRole: function () {
+ return this.$store.getters["User/userRole"];
+ },
proteinNameList: {
get() {
return _.map(this.proteinList, (d) => {
diff --git a/web/src/components/Navigation/TheNavBar.vue b/web/src/components/Navigation/TheNavBar.vue
index b78538c..2a09217 100644
--- a/web/src/components/Navigation/TheNavBar.vue
+++ b/web/src/components/Navigation/TheNavBar.vue
@@ -7,6 +7,7 @@
bg-gradient-to-r
from-white-base
to-blue-base
+ bg-blue-base
flex flex-wrap
items-center
justify-between
@@ -41,7 +42,7 @@
items-center
text-3xl
font-medium
- hover:opacity-75
+ hover:text-pink-base
"
>Home</span
>
@@ -62,7 +63,6 @@
hover:text-pink-base
text-3xl
font-medium
- hover:opacity-75
"
>About</span
>
@@ -122,13 +122,12 @@
z-50
grid grid-cols-1
left-0
- bg-gray-800
+ bg-black
min-w-max
rounded-lg
shadow-lg
border border-gray-200
divide-y divide-white-base
- bg-white
"
@mouseleave="openCondensateSubMenu = false"
>
@@ -145,6 +144,9 @@
text-3xl
font-medium
"
+ :class="
+ $route.name === 'biomolecular' ? 'text-pink-base' : ''
+ "
>
Biomolecular Condensates</span
>
@@ -163,6 +165,7 @@
text-3xl
font-medium
"
+ :class="$route.name === 'synthetic' ? 'text-pink-base' : ''"
>Synthetic Condensates</span
>
</router-link>
@@ -226,36 +229,6 @@
>
</a>
- <router-link
- to="/updateItems"
- v-show="
- userData !== null &&
- (userRole === 'Contributor' || userRole === 'Maintainer')
- "
- role="presentation"
- :class="{ active: $route.name === 'updateItems' }"
- @mouseover.native="openCondensateSubMenu = false"
- class="rounded-lg"
- >
- <span
- class="
- px-4
- py-4
- hover:text-pink-base
- flex
- items-center
- text-3xl
- font-medium
- "
- >
- {{
- userRole === "Maintainer"
- ? "All Submitted Changes"
- : "My Submitted Changes"
- }}
- </span>
- </router-link>
-
<router-link
to="/help"
:class="{ active: $route.name === 'help' }"
@@ -278,27 +251,55 @@
</div>
<div class="relative z-10 mr-4">
- <router-link
- to="/login"
- v-if="userData === null"
- role="presentation"
- :class="{ active: $route.name === 'login' }"
- @mouseover.native="openCondensateSubMenu = false"
- class="rounded-lg"
- >
- <span
- class="
- px-4
- py-4
- hover:text-pink-base
- flex
- items-center
- text-3xl
- font-medium
+ <div class="flex space-x-2">
+ <router-link
+ to="/login"
+ v-if="userData === null"
+ role="presentation"
+ :class="
+ $route.name === 'login' ? 'text-pink-base border-pink-base' : ''
"
- >Login</span
+ @mouseover.native="openCondensateSubMenu = false"
+ class="rounded-lg border-2 border-gray-500 hover:border-pink-base"
>
- </router-link>
+ <span
+ class="
+ px-4
+ py-4
+ hover:text-pink-base
+ flex
+ items-center
+ text-3xl
+ font-medium
+ "
+ >Sign in</span
+ >
+ </router-link>
+ <router-link
+ to="/signup"
+ v-if="userData === null"
+ role="presentation"
+ :class="
+ $route.name === 'signup' ? 'text-pink-base border-pink-base' : ''
+ "
+ @mouseover.native="openCondensateSubMenu = false"
+ class="rounded-lg border-2 border-gray-500 hover:border-pink-base"
+ >
+ <span
+ class="
+ px-4
+ py-4
+ hover:text-pink-base
+ flex
+ items-center
+ text-3xl
+ font-medium
+ "
+ >Sign up</span
+ >
+ </router-link>
+ </div>
+
<button
v-if="userData !== null"
type="button"
@@ -342,7 +343,7 @@
h-full
flex
place-content-center
- bg-gray-800
+ bg-gray-900
align-center
text-center
items-center
@@ -371,12 +372,11 @@
grid grid-cols-1
right-0
bg-gray-800
- w-80
+ w-96
rounded-lg
shadow-lg
border border-gray-200
divide-y divide-white-500
- bg-white
"
>
<div class="p-4">
@@ -408,6 +408,38 @@
>
</router-link>
</div>
+ <div>
+ <router-link
+ to="/updateItems"
+ v-show="
+ userData !== null &&
+ (userRole === 'Contributor' || userRole === 'Maintainer')
+ "
+ role="presentation"
+ :class="{ active: $route.name === 'updateItems' }"
+ @mouseover.native="openCondensateSubMenu = false"
+ class="rounded-lg"
+ >
+ <span
+ class="
+ px-4
+ py-4
+ text-white-base
+ hover:text-pink-base
+ flex
+ items-center
+ text-3xl
+ font-medium
+ "
+ >
+ {{
+ userRole === "Maintainer"
+ ? "All Submitted Changes"
+ : "My Submitted Changes"
+ }}
+ </span>
+ </router-link>
+ </div>
<div>
<router-link
to="/login"
@@ -494,7 +526,6 @@ export default {
return initials;
},
openCondensateMenu() {
- console.log("hover working");
this.openCondensateSubMenu = true;
},
openProfileMenu() {
@@ -516,26 +547,6 @@ a {
color: black;
}
-/* a:hover {
- color: #ef0087 !important;
- background-color: #a7ebfb;
-} */
-.avatar {
- background-color: #a7ebfb;
-}
-
-.submenu span:hover {
- color: #ef0087 !important;
-}
-.submenu:hover {
- background-color: #a7ebfb;
- border-radius: 5px;
-}
-.submenu a:hover {
- color: #ef0087 !important;
- border-radius: 5px;
-}
-
.active {
color: #ef0087 !important;
}
diff --git a/web/src/components/Proteins.vue b/web/src/components/Proteins.vue
index 7af752e..9cf57c9 100644
--- a/web/src/components/Proteins.vue
+++ b/web/src/components/Proteins.vue
@@ -1,47 +1,41 @@
<template>
- <div
- class="flex flex-wrap justify-center"
- >
+ <div class="flex flex-wrap mb-14 justify-center">
<div class="w-5/6">
<div class="p-4">
- <h2>Proteins</h2>
+ <h2 class="font-bold">Proteins</h2>
</div>
- <data-table
- id="proteinTable"
- />
+ <data-table id="proteinTable" />
</div>
</div>
</template>
<script>
-import DataTable from '@/components/Datatable/ProteinDataTable.vue'
-const _ = require('lodash')
+import DataTable from "@/components/Datatable/ProteinDataTable.vue";
+const _ = require("lodash");
export default {
- name: 'Proteins',
+ name: "Proteins",
components: {
- DataTable
+ DataTable,
},
props: {
- msg: String
+ msg: String,
},
data() {
return {
- isDev: process.env.NODE_ENV === 'development'
- }
+ isDev: process.env.NODE_ENV === "development",
+ };
},
- computed: {
- },
- methods: {
- }
-}
+ computed: {},
+ methods: {},
+};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
-@import url('~@/assets/bootstrap.css');
-@import url('~@/assets/datatable.css');
+@import url("~@/assets/bootstrap.css");
+@import url("~@/assets/datatable.css");
.main {
margin: 1.5rem;
diff --git a/web/src/components/SearchPage.vue b/web/src/components/SearchPage.vue
index 081c383..2aefd34 100644
--- a/web/src/components/SearchPage.vue
+++ b/web/src/components/SearchPage.vue
@@ -1,9 +1,6 @@
<template>
- <div
- id="page-content-wrapper"
- class="main"
- >
- <h2>
+ <div id="page-content-wrapper" class="main mb-14">
+ <h2 class="font-bold">
Dresden Condensate Database and Encyclopedia
{{ isDev ? "(Dev version)" : "" }}
</h2>
@@ -18,15 +15,12 @@
<div class="mt-20">
<Search ref="search">
<template slot-scope="{ response, loading }">
- <div v-if="loading">
- Loading...
- </div>
+ <div v-if="loading">Loading...</div>
<div v-else-if="response">
<div v-show="response.count === 0">
- Seems like we could not understand what you were searching for, please go to the
- <router-link to="/proteins">
- Protein list page
- </router-link> or
+ Seems like we could not understand what you were searching for,
+ please go to the
+ <router-link to="/proteins"> Protein list page </router-link> or
<router-link to="/condensates">
Condensate list page
</router-link>
@@ -46,14 +40,14 @@
</template>
<script>
-import Search from '@/components/Search.vue';
-import DataTable from '@/components/DataTable.vue';;
+import Search from "@/components/Search.vue";
+import DataTable from "@/components/DataTable.vue";
-const _ = require('lodash');
-const apikey = require('./js/const').apikey;
+const _ = require("lodash");
+const apikey = require("./js/const").apikey;
export default {
- name: 'SearchPage',
+ name: "SearchPage",
components: {
Search,
DataTable,
@@ -63,13 +57,13 @@ export default {
},
data() {
return {
- selected: '',
+ selected: "",
keyword: this.$route.params.keyword,
- species: 'All',
- searchKeyword: '',
- pick: 'protein',
- searchPick: '',
- isDev: process.env.NODE_ENV === 'development',
+ species: "All",
+ searchKeyword: "",
+ pick: "protein",
+ searchPick: "",
+ isDev: process.env.NODE_ENV === "development",
};
},
mounted() {
@@ -77,7 +71,11 @@ export default {
// console.log(this.$route)
// console.log(this.$route.query)
// console.log(this.$route.query.q)
- this.searchWithKeyword(this.$route.query.q, this.$route.query.t, this.$route.query.s)
+ this.searchWithKeyword(
+ this.$route.query.q,
+ this.$route.query.t,
+ this.$route.query.s
+ );
},
methods: {
removeNullItems(data) {
@@ -89,28 +87,28 @@ export default {
const query = vm.keyword;
let host = vm.isDev
- ? require('./js/const').devHost
- : require('./js/const').host;
+ ? require("./js/const").devHost
+ : require("./js/const").host;
const taxId =
- vm.species === 'All' ? 'all' : /\((\d+)\)$/gm.exec(vm.species)[1];
+ vm.species === "All" ? "all" : /\((\d+)\)$/gm.exec(vm.species)[1];
let url =
- vm.species === 'All'
- ? `${host}/${vm.pick}s?query=${query}&size=10000`
- : `${host}/${vm.pick}s?query=${query}&species_tax_id=${taxId}&size=10000`;
+ vm.species === "All"
+ ? `${host}/${vm.pick}s?query=${query}&size=10000`
+ : `${host}/${vm.pick}s?query=${query}&species_tax_id=${taxId}&size=10000`;
// console.log(process.env.VUE_APP_TITLE)
// console.log(process.env.VUE_APP_API_KEY)
return fetch(url, {
- method: 'GET',
- mode: 'cors',
- cache: 'no-cache',
+ method: "GET",
+ mode: "cors",
+ cache: "no-cache",
headers: {
Authorization: `Bearer ${apikey}`,
},
})
- .then((response) => response.json())
- .then((json) => _.uniq(_.map(json.data, (c) => c.gene_name || c.name)));
+ .then((response) => response.json())
+ .then((json) => _.uniq(_.map(json.data, (c) => c.gene_name || c.name)));
},
searchWithKeyword(q, t, s) {
const vm = this;
@@ -120,41 +118,41 @@ export default {
// console.log(vm.pick)
vm.searchPick = t;
- if (t === 'protein') {
- if(q.includes('('))
- {
- const id = /\((\S*)\)/gm.exec(q)[1]
+ if (t === "protein") {
+ if (q.includes("(")) {
+ const id = /\((\S*)\)/gm.exec(q)[1];
const url = `/protein/${id}`;
vm.$router.replace({
- name: 'home',
+ name: "home",
query: {
- q: '',
+ q: "",
t: vm.pick,
s: s,
- }})
+ },
+ });
// eslint-disable-next-line
- vm.$router.push(url)
+ vm.$router.push(url);
} else {
vm.$refs.search.fetchProteinList(q, s);
}
- } else if (t === 'condensate') {
- if(q.includes('('))
- {
- const id = /\((\S*)\)/gm.exec(q)[1]
+ } else if (t === "condensate") {
+ if (q.includes("(")) {
+ const id = /\((\S*)\)/gm.exec(q)[1];
const url = `/condensate/${id}`;
vm.$router.replace({
- name: 'home',
+ name: "home",
query: {
- q: '',
+ q: "",
t: vm.pick,
s: s,
- }})
+ },
+ });
// eslint-disable-next-line
- vm.$router.push(url)
+ vm.$router.push(url);
} else {
vm.$refs.search.fetchCondensateList(q, s);
}
diff --git a/web/src/components/StatPage.vue b/web/src/components/StatPage.vue
index 820b05c..929908c 100644
--- a/web/src/components/StatPage.vue
+++ b/web/src/components/StatPage.vue
@@ -1,10 +1,7 @@
<template>
- <div
- id="page-content-wrapper"
- class="flex flex-wrap justify-center"
- >
+ <div id="page-content-wrapper" class="flex flex-wrap justify-center">
<div class="w-5/6">
- <h2>Statistics</h2>
+ <h2 class="font-bold">Statistics</h2>
<fetch-stats>
<template slot-scope="{ response, loading, fetchError }">
@@ -35,29 +32,24 @@
</template>
</fetch-stats>
<div class="border border-gray-300 my-14 rounded-lg p-8">
- <h4 class="round mb-8">
- All Contributors
- </h4>
- <contributor-list-table
- id="all"
- entity="all"
- />
+ <h4 class="round mb-8">All Contributors</h4>
+ <contributor-list-table id="all" entity="all" />
</div>
</div>
</div>
</template>
<script>
-import FetchStats from '@/components/DDCODE/fetchStats.vue';
-import SpeciesChart from '@/components/SpeciesChart';
-import Histograms from '@/components/Histograms';
-import BaseSpinner from './UI/BaseSpinner.vue';
-import ContributorListTable from './ContributorListTable.vue';
+import FetchStats from "@/components/DDCODE/fetchStats.vue";
+import SpeciesChart from "@/components/SpeciesChart";
+import Histograms from "@/components/Histograms";
+import BaseSpinner from "./UI/BaseSpinner.vue";
+import ContributorListTable from "./ContributorListTable.vue";
// import EvidenceChart from "@/components/EvidenceChart";
-const _ = require('lodash');
+const _ = require("lodash");
export default {
- name: 'LandingPage',
+ name: "LandingPage",
components: {
FetchStats,
SpeciesChart,
@@ -70,7 +62,7 @@ export default {
},
data() {
return {
- isDev: process.env.NODE_ENV === 'development',
+ isDev: process.env.NODE_ENV === "development",
};
},
computed: {},
diff --git a/web/src/components/SyntheticPage.vue b/web/src/components/SyntheticPage.vue
index cd207a3..e415743 100644
--- a/web/src/components/SyntheticPage.vue
+++ b/web/src/components/SyntheticPage.vue
@@ -1,11 +1,8 @@
<template>
- <div
-
- class="flex flex-wrap justify-center"
- >
+ <div class="flex flex-wrap mb-14 justify-center">
<div class="w-5/6">
<div class="p-4">
- <h2>Synthetic Condensates (Experiments)</h2>
+ <h2 class="font-bold">Synthetic Condensates (Experiments)</h2>
</div>
<data-table
@@ -18,57 +15,55 @@
</template>
<script>
- import DataTable from '@/components/Datatable/CondensateDataTable';
- const _ = require('lodash')
+import DataTable from "@/components/Datatable/CondensateDataTable";
+const _ = require("lodash");
- export default {
- name: 'SyntheticPage',
- components: {
- DataTable,
- },
- props: {
- msg: String
- },
- data() {
- return {
- isDev: process.env.NODE_ENV === 'development'
- }
- },
- computed: {
- },
- methods: {
- }
- }
+export default {
+ name: "SyntheticPage",
+ components: {
+ DataTable,
+ },
+ props: {
+ msg: String,
+ },
+ data() {
+ return {
+ isDev: process.env.NODE_ENV === "development",
+ };
+ },
+ computed: {},
+ methods: {},
+};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
- @import url('~@/assets/bootstrap.css');
- @import url('~@/assets/datatable.css');
+@import url("~@/assets/bootstrap.css");
+@import url("~@/assets/datatable.css");
- .main {
- margin: 1.5rem;
- }
+.main {
+ margin: 1.5rem;
+}
- h3 {
- margin: 40px 0 0;
- }
+h3 {
+ margin: 40px 0 0;
+}
- a {
- color: #ef0087 !important;
- }
+a {
+ color: #ef0087 !important;
+}
- ul.a {
- list-style-type: disc;
- list-style-position: inside;
- }
+ul.a {
+ list-style-type: disc;
+ list-style-position: inside;
+}
- input[type="radio"] {
- margin: 2px;
- }
+input[type="radio"] {
+ margin: 2px;
+}
- .radio-label {
- margin-left: 0px;
- margin-right: 5px;
- }
+.radio-label {
+ margin-left: 0px;
+ margin-right: 5px;
+}
</style>
diff --git a/web/src/components/js/const.js b/web/src/components/js/const.js
index c3a351c..7c333b3 100644
--- a/web/src/components/js/const.js
+++ b/web/src/components/js/const.js
@@ -1,12 +1,12 @@
export const host = '/api';
-// export const devHost = '/api';
-// export const apiHost = '/cms';
-// export const devApiHost = '/cms';
+export const devHost = '/api';
+export const apiHost = '/cms';
+export const devApiHost = '/cms';
-export const devHost = 'https://dev.cd-code.org/api';
+// export const devHost = 'https://dev.cd-code.org/api';
// export const devHost = 'http://localhost:5001';
-export const apiHost = 'http://localhost:1337';
-export const devApiHost = 'http://localhost:1337';
+// export const apiHost = 'http://localhost:1337';
+// export const devApiHost = 'http://localhost:1337';
// apikey should be give here:
export const apikey = process.env.VUE_APP_API_KEY;
diff --git a/web/src/main.js b/web/src/main.js
index 726efeb..b9374ce 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -20,6 +20,8 @@ import { faRightToBracket } from '@fortawesome/free-solid-svg-icons';
import { faCircleArrowLeft } from '@fortawesome/free-solid-svg-icons';
import { faUserPen } from '@fortawesome/free-solid-svg-icons';
import { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
+import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
+
/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
@@ -28,7 +30,7 @@ import store from './store';
import router from './router';
/* add icons to the library */
-library.add(faPenToSquare, faThumbsUp, faCircleXmark, faRightToBracket, faCircleArrowLeft, faUserPen, faTriangleExclamation);
+library.add(faPenToSquare, faThumbsUp, faCircleXmark, faRightToBracket, faCircleArrowLeft, faUserPen, faTriangleExclamation, faEnvelope);
/* add font awesome icon component */
Vue.component('FontAwesomeIcon', FontAwesomeIcon);
diff --git a/web/src/views/Help.vue b/web/src/views/Help.vue
index 248fc23..9456dab 100644
--- a/web/src/views/Help.vue
+++ b/web/src/views/Help.vue
@@ -1,10 +1,8 @@
<template>
<div class="flex flex-wrap justify-center">
<div class="w-5/6">
- <h2>Help</h2>
- <p class="text-3xl">
- Content of this page coming soon..
- </p>
+ <h2 class="font-bold">Help</h2>
+ <p class="text-3xl">Content of this page coming soon..</p>
</div>
</div>
</template>
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index 29804d7..1232ad6 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -109,10 +109,7 @@
</button>
<p class="my-2 font-bold">
<router-link
- class="
- text-blue-500 text-2xl
- hover:text-blue-600 hover:no-underline
- "
+ class="text-pink-base hover:text-pink-base text-2xl"
to="/forgotpassword"
>
Forgot Password?
@@ -121,11 +118,7 @@
<h4>
Don't have an account yet?
<router-link
- class="
- text-blue-500 text-2xl
- font-bold
- hover:text-blue-600 hover:no-underline
- "
+ class="text-pink-base hover:text-pink-base text-2xl font-bold"
to="/signup"
>
Join CD-CODE as a contributor.
@@ -295,9 +288,9 @@ export default {
<style scoped>
@import url("~@/assets/bootstrap.css");
-a {
+/* a {
color: #ef0087 !important;
-}
+} */
.invalid h1 {
color: red;
}
diff --git a/web/src/views/Profile.vue b/web/src/views/Profile.vue
index bfe0e9d..7765123 100644
--- a/web/src/views/Profile.vue
+++ b/web/src/views/Profile.vue
@@ -28,7 +28,7 @@
</div>
<div v-else>
<!-- {{response}}-->
- <h4 class="round">User Profile</h4>
+ <h2 class="round font-bold">User Profile</h2>
<div class="panel panel-default">
<div class="panel-body">
<div class="container-fluid col-md-12">
@@ -61,59 +61,58 @@
icon="fa-solid fa-user-pen"
/>
</button>
+ <button
+ v-if="isOpen"
+ tabindex="-1"
+ @click="isOpen = false"
+ class="fixed inset-0 cursor-default h-full w-full"
+ ></button>
<div
v-if="isOpen"
class="
- mt-2
absolute
+ mt-2
z-50
+ grid grid-cols-1
right-0
+ bg-black
+ min-w-max
rounded-lg
- py-4
- w-80
shadow-lg
- bg-white
+ border border-gray-200
+ divide-y divide-white-base
"
>
<!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
<a
class="
- rounded-lg
- block
- px-6
+ px-4
py-4
- text-2xl
- hover:bg-gray-200
- hover:text-white
- hover:no-underline
+ rounded-lg
+ text-2xl text-white-base
+ hover:text-pink-base hover:no-underline
"
@click="openScientificDisciplineEdit"
>Scientific Discipline</a
>
<a
class="
- block
- px-6
- rounded-lg
+ px-4
py-4
- text-2xl
- hover:bg-gray-200
- hover:text-white
- hover:no-underline
+ rounded-lg
+ text-2xl text-white-base
+ hover:text-pink-base hover:no-underline
"
@click="openProfileLinkEdit"
>Profile Link</a
>
<a
class="
- block
- px-6
- rounded-lg
+ px-4
py-4
- text-2xl
- hover:bg-gray-200
- hover:text-white
- hover:no-underline
+ rounded-lg
+ text-2xl text-white-base
+ hover:text-pink-base hover:no-underline
"
@click="openChangePassword"
>Password</a
@@ -665,9 +664,9 @@ h3 {
margin: 40px 0 0;
}
-a {
+/* a {
color: #ef0087 !important;
-}
+} */
.panel {
font-size: 1.2rem;
diff --git a/web/src/views/SignUp.vue b/web/src/views/SignUp.vue
index 7c2bc66..c0ae787 100644
--- a/web/src/views/SignUp.vue
+++ b/web/src/views/SignUp.vue
@@ -1,9 +1,6 @@
<template>
<div>
- <base-toaster
- :open="toasterIsOpen"
- @close="hideDialog"
- >
+ <base-toaster :open="toasterIsOpen" @close="hideDialog">
<div class="flex justify-between space-x-4 items-center">
<font-awesome-icon
class="ml-3"
@@ -17,19 +14,23 @@
. Please click the link to activate your account.
</h4>
- <button
- class="btn btn-outline"
- @click="hideDialog"
- >
- <font-awesome-icon
- icon="fa-regular fa-circle-xmark"
- size="2x"
- />
+ <button class="btn btn-outline" @click="hideDialog">
+ <font-awesome-icon icon="fa-regular fa-circle-xmark" size="2x" />
</button>
</div>
</base-toaster>
<div class="flex items-center justify-center">
- <div class="sm:block border border-gray-300 rounded-lg w-2/5 mt-6 rounded-lg p-4">
+ <div
+ class="
+ sm:block
+ border border-gray-300
+ rounded-lg
+ w-2/5
+ mt-6
+ rounded-lg
+ p-4
+ "
+ >
<div class="p-8 text-left">
<h1
class="
@@ -45,10 +46,7 @@
</h1>
<form @submit.prevent="register">
- <div
- class="my-4"
- :class="{ invalid: !name.isValid }"
- >
+ <div class="my-4" :class="{ invalid: !name.isValid }">
<div class="flex justify-between">
<h1
class="
@@ -93,18 +91,12 @@
"
placeholder="Enter full name."
@blur="clearValidity('name')"
- >
- <p
- v-if="!name.isValid"
- class="text-red-500"
- >
+ />
+ <p v-if="!name.isValid" class="text-red-500">
Name must not be empty.
</p>
</div>
- <div
- class="my-4"
- :class="{ invalid: !email.isValid }"
- >
+ <div class="my-4" :class="{ invalid: !email.isValid }">
<h1
class="
text-left
@@ -134,24 +126,15 @@
"
placeholder="Enter email."
@blur="clearValidity('email')"
- >
- <p
- v-if="!email.isValid"
- class="text-red-500"
- >
+ />
+ <p v-if="!email.isValid" class="text-red-500">
Email must not be empty.
</p>
- <p
- v-if="error && errorMsg"
- class="text-red-500"
- >
+ <p v-if="error && errorMsg" class="text-red-500">
{{ errorMsg }}
</p>
</div>
- <div
- class="my-4"
- :class="{ invalid: !password.isValid }"
- >
+ <div class="my-4" :class="{ invalid: !password.isValid }">
<h1
class="
text-left
@@ -181,18 +164,12 @@
"
placeholder="Password must be minimum 6 character."
@blur="clearValidity('password')"
- >
- <p
- v-if="!password.isValid"
- class="text-red-500"
- >
+ />
+ <p v-if="!password.isValid" class="text-red-500">
Password must not be empty or less than 6 character.
</p>
</div>
- <div
- class="my-4"
- :class="{ invalid: !username.isValid }"
- >
+ <div class="my-4" :class="{ invalid: !username.isValid }">
<h1
class="
text-left
@@ -223,18 +200,12 @@
"
placeholder="Username must be minimum 3 character."
@blur="clearValidity('username')"
- >
- <p
- v-if="!username.isValid"
- class="text-red-500"
- >
+ />
+ <p v-if="!username.isValid" class="text-red-500">
Username must not be empty.
</p>
</div>
- <div
- class="my-4"
- :class="{ invalid: !current_role.isValid }"
- >
+ <div class="my-4" :class="{ invalid: !current_role.isValid }">
<h1
class="
text-left
@@ -266,22 +237,9 @@
"
@blur="clearValidity('current_role')"
>
- <option
- id="phd"
- value="PhD"
- >
- PhD
- </option>
- <option
- id="postdoc"
- value="PostDoc"
- >
- PostDoc
- </option>
- <option
- id="research_scientist"
- value="Research_Scientist"
- >
+ <option id="phd" value="PhD">PhD</option>
+ <option id="postdoc" value="PostDoc">PostDoc</option>
+ <option id="research_scientist" value="Research_Scientist">
Research Scientist
</option>
<option
@@ -291,10 +249,7 @@
Principal Investigator
</option>
</select>
- <p
- v-if="!current_role.isValid"
- class="text-red-500"
- >
+ <p v-if="!current_role.isValid" class="text-red-500">
Select a current role.
</p>
</div>
@@ -326,25 +281,16 @@
:name="options"
:value="options.discipline"
@blur="clearValidity('scientific_discipline')"
- >
- <label
- class="mx-3"
- :for="options.id"
- >{{
+ />
+ <label class="mx-3" :for="options.id">{{
options.discipline
}}</label>
</div>
- <p
- v-if="!scientific_discipline.isValid"
- class="text-red-500"
- >
+ <p v-if="!scientific_discipline.isValid" class="text-red-500">
Please select atleast one scientific discipline.
</p>
</div>
- <div
- class="my-4"
- :class="{ invalid: !affiliation.isValid }"
- >
+ <div class="my-4" :class="{ invalid: !affiliation.isValid }">
<h1
class="
text-left
@@ -374,18 +320,12 @@
"
placeholder="Institute name currently associated with."
@blur="clearValidity('affiliation')"
- >
- <p
- v-if="!affiliation.isValid"
- class="text-red-500"
- >
+ />
+ <p v-if="!affiliation.isValid" class="text-red-500">
Affiliation must not be empty.
</p>
</div>
- <div
- class="my-4"
- :class="{ invalid: !profileLink.isValid }"
- >
+ <div class="my-4" :class="{ invalid: !profileLink.isValid }">
<h1
class="
text-left
@@ -415,11 +355,8 @@
"
placeholder="eg- https://www.google.com (optional)"
@blur="clearValidity('profileLink')"
- >
- <p
- v-if="!profileLink.isValid"
- class="text-red-500"
- >
+ />
+ <p v-if="!profileLink.isValid" class="text-red-500">
The url entered is invalid. Please check it again!
</p>
<p
@@ -429,10 +366,7 @@
{{ profileLinkErrMsg }}
</p>
</div>
- <div
- class="my-4"
- :class="{ invalid: !motivation.isValid }"
- >
+ <div class="my-4" :class="{ invalid: !motivation.isValid }">
<h1
class="
text-left
@@ -465,51 +399,44 @@
@blur="clearValidity('motivation')"
/>
</div>
- <p
- v-if="!motivation.isValid"
- class="text-red-500"
- >
+ <p v-if="!motivation.isValid" class="text-red-500">
Motivation text must not be empty.
</p>
- <p
- v-if="!formIsValid"
- class="font-bold text-red-400"
- >
+ <p v-if="!formIsValid" class="font-bold text-red-400">
Required fields were not provided.
</p>
- <p
- v-show="error"
- class="text-red-500"
- >
+ <p v-show="error" class="text-red-500">
{{ errorMsg }}
</p>
<div v-if="isLoading">
<base-spinner />
</div>
-
+
<button
type="submit"
class="
- bg-blue-500
- text-2xl
- font-bold
- rounded-lg
- p-5
- mr-4
- w-1/3
- text-white
- hover:bg-blue-700
- "
+ bg-blue-500
+ text-2xl
+ font-bold
+ rounded-lg
+ p-5
+ mr-4
+ w-full
+ text-white
+ hover:bg-blue-700
+ "
>
Create Account
</button>
-
+
<div>
<h4 class="mt-6">
- Already have an account? <a
- class="text-blue-500 hover:text-blue-600 hover:no-underline"
+ Already have an account?
+ <a
+ class="text-pink-base hover:text-pink-base hover:no-underline"
@click="$router.go(-1)"
- >Sign in</a>
+ >Sign in</a
+ >
</h4>
</div>
</form>
@@ -519,45 +446,45 @@
</div>
</template>
<script>
-import BaseSpinner from '../components/UI/BaseSpinner.vue';
-import BaseToaster from '../components/UI/BaseToaster.vue';
-let host = require('@/components/js/const').apiHost;
+import BaseSpinner from "../components/UI/BaseSpinner.vue";
+import BaseToaster from "../components/UI/BaseToaster.vue";
+let host = require("@/components/js/const").apiHost;
export default {
- name: 'Register',
+ name: "Register",
components: { BaseToaster, BaseSpinner },
data() {
return {
name: {
- val: '',
+ val: "",
isValid: true,
},
email: {
- val: '',
+ val: "",
isValid: true,
},
password: {
- val: '',
+ val: "",
isValid: true,
},
username: {
- val: '',
+ val: "",
isValid: true,
},
motivation: {
- val: '',
+ val: "",
isValid: true,
},
affiliation: {
- val: '',
+ val: "",
isValid: true,
},
current_role: {
- val: '',
+ val: "",
isValid: true,
},
profileLink: {
- val: '',
+ val: "",
isValid: true,
},
scientific_discipline: {
@@ -567,17 +494,17 @@ export default {
formIsValid: true,
error: false,
errorMsg: ``,
- isDev: process.env.NODE_ENV === 'development',
+ isDev: process.env.NODE_ENV === "development",
toasterIsOpen: false,
scientificDisciplineOptions: [
- { id: '1', discipline: 'Physics' },
- { id: '2', discipline: 'Chemistry' },
- { id: '3', discipline: 'Biology' },
- { id: '4', discipline: 'Computer Science' },
- { id: '5', discipline: 'Mathematics' },
+ { id: "1", discipline: "Physics" },
+ { id: "2", discipline: "Chemistry" },
+ { id: "3", discipline: "Biology" },
+ { id: "4", discipline: "Computer Science" },
+ { id: "5", discipline: "Mathematics" },
],
profileLinkError: false,
- profileLinkErrMsg: '',
+ profileLinkErrMsg: "",
selected: [],
isLoading: false,
};
@@ -589,24 +516,23 @@ export default {
},
validateForm() {
this.formIsValid = true;
- if (this.name.val === '') {
+ if (this.name.val === "") {
this.name.isValid = false;
this.formIsValid = false;
}
- if (this.email.val === '') {
+ if (this.email.val === "") {
this.email.isValid = false;
this.formIsValid = false;
}
- if (this.password.val === '' || this.password.val.length < 6) {
-
+ if (this.password.val === "" || this.password.val.length < 6) {
this.password.isValid = false;
this.formIsValid = false;
}
- if (this.username.val === '' || this.username.val.length < 3) {
+ if (this.username.val === "" || this.username.val.length < 3) {
this.username.isValid = false;
this.formIsValid = false;
}
- if (this.current_role.val === '') {
+ if (this.current_role.val === "") {
this.current_role.isValid = false;
this.formIsValid = false;
}
@@ -614,7 +540,7 @@ export default {
this.scientific_discipline.isValid = false;
this.formIsValid = false;
}
- if (this.affiliation.val === '') {
+ if (this.affiliation.val === "") {
this.affiliation.isValid = false;
this.formIsValid = false;
}
@@ -622,7 +548,7 @@ export default {
this.profileLink.isValid = false;
this.formIsValid = false;
}
- if (this.motivation.val === '') {
+ if (this.motivation.val === "") {
this.motivation.isValid = false;
this.formIsValid = false;
}
@@ -630,21 +556,21 @@ export default {
isValidHttpUrl() {
let timer = null;
let pattern = new RegExp(
- '^(https?:\\/\\/)?' + // protocol
- '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
- '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
- '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
- '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
- '(\\#[-a-z\\d_]*)?$',
- 'i'
+ "^(https?:\\/\\/)?" + // protocol
+ "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" + // domain name
+ "((\\d{1,3}\\.){3}\\d{1,3}))" + // OR ip (v4) address
+ "(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" + // port and path
+ "(\\?[;&a-z\\d%_.~+=-]*)?" + // query string
+ "(\\#[-a-z\\d_]*)?$",
+ "i"
); // fragment locator
let isValid;
- if (this.profileLink.val === '') {
- console.log('profile link empty');
+ if (this.profileLink.val === "") {
+ console.log("profile link empty");
return true;
} else {
isValid = pattern.test(this.profileLink.val);
- console.log('lint is there', isValid);
+ console.log("lint is there", isValid);
}
return isValid;
// if(!isValid){
@@ -674,7 +600,7 @@ export default {
},
hideDialog() {
this.toasterIsOpen = false;
- this.$router.push('login');
+ this.$router.push("login");
},
async register(e) {
const vm = this;
@@ -685,19 +611,19 @@ export default {
}
if (vm.isDev) {
- host = require('@/components/js/const').devApiHost;
+ host = require("@/components/js/const").devApiHost;
}
this.isLoading = true;
const res = await fetch(`${host}/api/auth/local/register`, {
- method: 'POST',
- mode: 'cors', // no-cors, *cors, same-origin
- cache: 'no-cache', // *default, no-cache, reload, force-cache,
+ method: "POST",
+ mode: "cors", // no-cors, *cors, same-origin
+ cache: "no-cache", // *default, no-cache, reload, force-cache,
headers: {
- 'Content-Type': 'application/json',
+ "Content-Type": "application/json",
// 'Content-Type': 'application/x-www-form-urlencoded',
},
body: JSON.stringify({
- full_name: vm.name.val,
+ full_name: vm.name.val,
password: vm.password.val,
email: vm.email.val,
username: vm.username.val,
@@ -708,7 +634,7 @@ export default {
profile_link: vm.profileLink.val,
}),
});
- if (!res.ok && res.status === 500) {
+ if (!res.ok && res.status === 500) {
this.isLoading = false;
this.error = true;
this.errorMsg = `${res.status} Internal Error, please write a mail to CDCode Admin`;
@@ -723,17 +649,22 @@ export default {
return;
}
const response = await res.json();
- if (!res.ok && response.error.status === 400 && response.error.message === 'Email is already taken') {
+ if (
+ !res.ok &&
+ response.error.status === 400 &&
+ response.error.message === "Email is already taken"
+ ) {
this.isLoading = false;
this.error = true;
- this.errorMsg = 'Email Address already registered with an existing account. You can reset your password by clicking forget password from sign up page.';
- this.password.val = '';
+ this.errorMsg =
+ "Email Address already registered with an existing account. You can reset your password by clicking forget password from sign up page.";
+ this.password.val = "";
return;
}
this.isLoading = false;
- vm.toasterIsOpen = true;
- this.error = false;
- this.errorMsg = '';
+ vm.toasterIsOpen = true;
+ this.error = false;
+ this.errorMsg = "";
// try {
// await vm.axios.post(`${host}/api/auth/local/register`, {
// full_name: vm.name.val,
@@ -764,7 +695,6 @@ export default {
// "Email Address already registered with an existing account. You can reset your password by clicking forget password from sign up page.";
// }
-
// }
},
},
@@ -773,9 +703,6 @@ export default {
<style scoped>
@import url("~@/assets/bootstrap.css");
-a {
- color: #ef0087 !important;
-}
.invalid h1,
.invalid label {
color: red;
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 5471015..c3d8372 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -4,19 +4,20 @@ module.exports = {
content: [],
theme: {
extend: {
- fontFamily: {
- 'pacifico': ['Pacifico'],
- 'montserrat': ['Montserrat'],
- 'roboto': ['Roboto'],
- 'righteous': ['Righteous'],
- 'lato': ['Lato'],
- 'raleway': ['Raleway'],
- },
+ // fontFamily: {
+ // 'pacifico': ['Pacifico'],
+ // 'montserrat': ['Montserrat'],
+ // 'roboto': ['Roboto'],
+ // 'righteous': ['Righteous'],
+ // 'lato': ['Lato'],
+ // 'raleway': ['Raleway'],
+ // },
colors: {
// Configure your color palette here
'white-base': '#fff',
- 'pink-base': '#ef0087',
- 'blue-base': '#a7ebfb'
+ 'pink-base': '#dd1473',
+ 'blue-base': '#a7e1f3',
+ 'green-base': '#3697b4'
// primary: '#ef0087'
},
},
--
GitLab