Minor fixes

- make signup/login forms so pressing enter submits the form - add separate small circular version of image for logo - fix users table is_runner filter logic - use de locale for dates
ssciwr · Oct 2, 2024 · d940f31 · d940f31
1 parent 3a2496b
commit d940f31
Show file tree

Hide file tree

Showing 11 changed files with 90 additions and 80 deletions.
diff --git a/.gitignore b/.gitignore
@@ -178,3 +178,5 @@ dmypy.json
 
 # Cython debug symbols
 cython_debug/
+
+*.pem
diff --git a/frontend/public/logo.png b/frontend/public/logo.png
diff --git a/frontend/public/splash.jpg b/frontend/public/splash.jpg
diff --git a/frontend/public/splash.png b/frontend/public/splash.png
diff --git a/frontend/src/components/LoginComponent.vue b/frontend/src/components/LoginComponent.vue
@@ -32,27 +32,29 @@ function do_login() {
 
 <template>
   <div>
-    <fwb-input
-      v-model="login_email_address"
-      required
-      id="login_email"
-      placeholder="[email protected]"
-      maxlength="256"
-      autocomplete="username"
-      label="Email"
-      class="mb-2"
-    />
-    <fwb-input
-      v-model="login_password"
-      required
-      id="login_password"
-      type="password"
-      maxlength="256"
-      autocomplete="current-password"
-      label="Password"
-      class="mb-2"
-    />
-    <fwb-button @click="do_login" class="mb-2">Login</fwb-button>
+    <form @submit.prevent="do_login">
+      <fwb-input
+        v-model="login_email_address"
+        required
+        id="login_email"
+        placeholder="[email protected]"
+        maxlength="256"
+        autocomplete="username"
+        label="Email"
+        class="mb-2"
+      />
+      <fwb-input
+        v-model="login_password"
+        required
+        id="login_password"
+        type="password"
+        maxlength="256"
+        autocomplete="current-password"
+        label="Password"
+        class="mb-2"
+      />
+      <fwb-button type="submit" class="mb-2">Login</fwb-button>
+    </form>
     <fwb-alert type="danger" v-if="login_error_message.length > 0">
       {{ login_error_message }}
     </fwb-alert>

diff --git a/frontend/src/components/SamplesTable.vue b/frontend/src/components/SamplesTable.vue
@@ -39,7 +39,7 @@ defineProps<{
       <fwb-table-row v-for="sample in samples" :key="sample.id">
         <fwb-table-cell v-if="admin">{{ sample["id"] }}</fwb-table-cell>
         <fwb-table-cell>{{
-          new Date(sample["timestamp"] * 1000).toLocaleDateString()
+          new Date(sample["timestamp"] * 1000).toLocaleDateString("de-DE")
         }}</fwb-table-cell>
         <fwb-table-cell v-if="admin">{{ sample["email"] }}</fwb-table-cell>
         <fwb-table-cell>{{ sample["name"] }}</fwb-table-cell>

diff --git a/frontend/src/components/SignupComponent.vue b/frontend/src/components/SignupComponent.vue
@@ -44,49 +44,52 @@ function do_signup() {
       manually activated by an administrator before you are able to log in:
     </p>
     <div class="mt-4">
-      <fwb-input
-        v-model="signup_email_address"
-        required
-        id="signup_email"
-        placeholder=""
-        maxlength="256"
-        autocomplete="username"
-        label="Email"
-        class="mb-2"
-        :validation-status="
-          signup_email_address_message.length > 0 ? 'error' : 'success'
-        "
-      >
-        <template #validationMessage>
-          {{ signup_email_address_message }}
-        </template>
-      </fwb-input>
-      <fwb-input
-        v-model="signup_password"
-        required
-        id="signup_password"
-        type="password"
-        label="Password"
-        placeholder=""
-        maxlength="256"
-        class="mb-2"
-        :validation-status="
-          signup_password_message.length > 0 ? 'error' : 'success'
-        "
-      >
-        <template #validationMessage>
-          {{ signup_password_message }}
-        </template>
-      </fwb-input>
-      <fwb-button
-        @click="do_signup"
-        class="mb-2"
-        :disabled="
-          signup_email_address_message.length + signup_password_message.length >
-          0
-        "
-        >Sign up</fwb-button
-      >
+      <form @submit.prevent="do_signup">
+        <fwb-input
+          v-model="signup_email_address"
+          required
+          id="signup_email"
+          placeholder=""
+          maxlength="256"
+          autocomplete="username"
+          label="Email"
+          class="mb-2"
+          :validation-status="
+            signup_email_address_message.length > 0 ? 'error' : 'success'
+          "
+        >
+          <template #validationMessage>
+            {{ signup_email_address_message }}
+          </template>
+        </fwb-input>
+        <fwb-input
+          v-model="signup_password"
+          required
+          id="signup_password"
+          type="password"
+          label="Password"
+          placeholder=""
+          maxlength="256"
+          class="mb-2"
+          :validation-status="
+            signup_password_message.length > 0 ? 'error' : 'success'
+          "
+        >
+          <template #validationMessage>
+            {{ signup_password_message }}
+          </template>
+        </fwb-input>
+        <fwb-button
+          type="submit"
+          class="mb-2"
+          :disabled="
+            signup_email_address_message.length +
+              signup_password_message.length >
+            0
+          "
+          >Sign up</fwb-button
+        >
+      </form>
       <fwb-alert type="info" v-if="signup_response_message.length > 0">
         {{ signup_response_message }}
       </fwb-alert>

diff --git a/frontend/src/components/UsersTable.vue b/frontend/src/components/UsersTable.vue
@@ -11,13 +11,18 @@ import {
 } from "flowbite-vue";
 import type { User } from "@/utils/types";
 import { apiClient, logout } from "@/utils/api-client";
-import { ref } from "vue";
+import { ref, computed } from "vue";
 
-defineProps<{
-  runner: boolean;
+const props = defineProps<{
+  is_runner: boolean;
 }>();
 
 const users = ref([] as User[]);
+const filtered_users = computed(() => {
+  return users.value.filter((user) => {
+    return user.is_runner === props.is_runner;
+  });
+});
 
 function get_users() {
   apiClient
@@ -71,22 +76,21 @@ function disable_user(user_email: string) {
       <fwb-table-head-cell>Email</fwb-table-head-cell>
       <fwb-table-head-cell>Activated</fwb-table-head-cell>
       <fwb-table-head-cell>Enabled</fwb-table-head-cell>
-      <fwb-table-head-cell>Remaining quota</fwb-table-head-cell>
+      <fwb-table-head-cell>Quota</fwb-table-head-cell>
       <fwb-table-head-cell>Last submission</fwb-table-head-cell>
       <fwb-table-head-cell>Admin</fwb-table-head-cell>
-      <fwb-table-head-cell>Runner</fwb-table-head-cell>
       <fwb-table-head-cell>Enable/disable</fwb-table-head-cell>
     </fwb-table-head>
     <fwb-table-body>
       <fwb-table-row
-        v-for="user in users"
+        v-for="user in filtered_users"
         :key="user.id"
-        :class="{ disabled: !user.enabled }"
+        :class="user.enabled ? '!bg-slate-50' : '!bg-red-200'"
       >
         <fwb-table-cell>{{ user.id }}</fwb-table-cell>
         <fwb-table-cell>{{ user.email }}</fwb-table-cell>
-        <fwb-table-cell>{{ user.activated }}</fwb-table-cell>
-        <fwb-table-cell>{{ user.enabled }}</fwb-table-cell>
+        <fwb-table-cell>{{ user.activated ? "✓" : "✗" }}</fwb-table-cell>
+        <fwb-table-cell>{{ user.enabled ? "✓" : "✗" }}</fwb-table-cell>
         <fwb-table-cell>{{ user.quota }}</fwb-table-cell>
         <fwb-table-cell>
           {{
@@ -95,8 +99,7 @@ function disable_user(user_email: string) {
             )
           }}
         </fwb-table-cell>
-        <fwb-table-cell>{{ user.is_admin }}</fwb-table-cell>
-        <fwb-table-cell>{{ user.is_runner }}</fwb-table-cell>
+        <fwb-table-cell>{{ user.is_admin ? "✓" : "✗" }}</fwb-table-cell>
         <fwb-table-cell>
           <template v-if="user.enabled">
             <fwb-button @click="disable_user(user.email)" color="red"

diff --git a/frontend/src/views/AboutView.vue b/frontend/src/views/AboutView.vue
@@ -38,7 +38,7 @@ function openModalSignup() {
       header-classes="text-slate-100"
       sub-text="Prediction of tumor-reactive T cell receptors from scRNA-seq data for personalized T cell therapy."
       sub-text-classes="text-slate-300"
-      class="mb-4 bg-slate-800 bg-[url('/logo.png')] bg-no-repeat bg-center bg-cover md:rounded-lg"
+      class="mb-4 bg-slate-800 bg-splash bg-no-repeat bg-center bg-cover md:rounded-lg"
     >
       <div class="flex flex-row justify-center">
         <fwb-button

diff --git a/frontend/src/views/AdminView.vue b/frontend/src/views/AdminView.vue
@@ -80,7 +80,7 @@ get_samples();
           <fwb-timeline-content>
             <fwb-timeline-title>Runners</fwb-timeline-title>
             <fwb-timeline-body>
-              <UsersTable :runner="true"></UsersTable>
+              <UsersTable :is_runner="true"></UsersTable>
             </fwb-timeline-body>
           </fwb-timeline-content>
         </fwb-timeline-item>
@@ -91,7 +91,7 @@ get_samples();
           <fwb-timeline-content>
             <fwb-timeline-title>Users</fwb-timeline-title>
             <fwb-timeline-body>
-              <UsersTable :runner="false"></UsersTable>
+              <UsersTable :is_runner="false"></UsersTable>
             </fwb-timeline-body>
           </fwb-timeline-content>
         </fwb-timeline-item>

diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -11,7 +11,7 @@ export default {
   theme: {
     extend: {
       backgroundImage: {
-        "predictcr-logo": "url('http://localhost:5173/logo.png')",
+        splash: "url('/splash.jpg')",
       },
     },
   },