- redesign login page

- add authors and contributors for submitter via Subitter/DatasetController.ts - add Submitter/Person/Index.vue - add route subitter/person for listing persons
2023-09-14 15:37:36 +02:00 · 2023-09-14 15:37:36 +02:00 · 4ad281bcd4
commit 4ad281bcd4
parent b1d587d9f5
10 changed files with 485 additions and 57 deletions
--- a/resources/js/Components/SectionFullScreen.vue
+++ b/resources/js/Components/SectionFullScreen.vue
@ -1,39 +1,36 @@
 <script setup>
-import { computed } from 'vue'
-import { StyleService } from '@/Stores/style'
-import { gradientBgPurplePink, gradientBgDark, gradientBgPinkRed, gradientBgGreenBlue } from '@/colors'
+import { computed } from 'vue';
+import { StyleService } from '@/Stores/style';
+import { gradientBgPurplePink, gradientBgDark, gradientBgPinkRed, gradientBgGreenBlue } from '@/colors';

 const props = defineProps({
-  bg: {
-    type: String,
-    required: true,
-    validator: value => ['purplePink', 'pinkRed', 'greenBlue'].includes(value)
-  }
-})
+    bg: {
+        type: String,
+        required: true,
+        validator: (value) => ['purplePink', 'pinkRed', 'greenBlue'].includes(value),
+    },
+});

 const colorClass = computed(() => {
-  if (StyleService().darkMode) {
-    return gradientBgDark
-  }
+    if (StyleService().darkMode) {
+        return gradientBgDark;
+    }

-  switch (props.bg) {
-    case 'purplePink':
-      return gradientBgPurplePink
-    case 'pinkRed':
-      return  gradientBgPinkRed
-    case 'greenBlue':
-      return gradientBgGreenBlue
-  }
-  
-  return ''
-})
+    switch (props.bg) {
+        case 'purplePink':
+            return gradientBgPurplePink;
+        case 'pinkRed':
+            return gradientBgPinkRed;
+        case 'greenBlue':
+            return gradientBgGreenBlue;
+    }
+
+    return 'bg-white';
+});
 </script>

 <template>
-  <div
-    class="flex min-h-screen items-center justify-center"
-    :class="colorClass"
-  >
-    <slot card-class="w-11/12 md:w-7/12 lg:w-6/12 xl:w-4/12 shadow-2xl" />
-  </div>
+    <div class="mx-auto md:h-screen flex flex-col justify-center items-center px-6 pt-8 pt:mt-0" :class="colorClass">
+        <slot card-class="w-11/12 md:w-7/12 lg:w-6/12 xl:w-4/12 shadow-2xl" />
+    </div>
 </template>
--- a/resources/js/Pages/Auth/Login.vue
+++ b/resources/js/Pages/Auth/Login.vue
@ -32,9 +32,15 @@ import FormControl from '@/Components/FormControl.vue';

 <template>
    <LayoutGuest>
+
        <Head title="Login" />

-        <SectionFullScreen v-slot="{ cardClass }" :bg="'greenBlue'">
+        <SectionFullScreen v-slot="{ cardClass }">
+            <a class="text-2xl font-semibold flex justify-center items-center mb-8 lg:mb-10">
+                <img src="/logo.svg" class="h-10 mr-4" alt="Windster Logo">
+                <!-- <span class="self-center text-2xl font-bold whitespace-nowrap">Tethys</span> -->
+            </a>
+            <!-- Card -->
            <CardBox :class="cardClass" form @submit.prevent="submit">
                <FormValidationErrors v-bind:errors="errors" />

@ -43,18 +49,13 @@ import FormControl from '@/Components/FormControl.vue';
                </NotificationBarInCard>

                <FormField label="Email" label-for="email" help="Please enter your email">
-                    <FormControl v-model="form.email" :icon="mdiAccount" id="email" autocomplete="email" type="email" required />
+                    <FormControl v-model="form.email" :icon="mdiAccount" id="email" autocomplete="email" type="email"
+                        required />
                </FormField>

                <FormField label="Password" label-for="password" help="Please enter your password">
-                    <FormControl
-                        v-model="form.password"
-                        :icon="mdiAsterisk"
-                        type="password"
-                        id="password"
-                        autocomplete="current-password"
-                        required
-                    />
+                    <FormControl v-model="form.password" :icon="mdiAsterisk" type="password" id="password"
+                        autocomplete="current-password" required />
                </FormField>

                <FormCheckRadioGroup v-model="form.remember" name="remember" :options="{ remember: 'Remember' }" />
@ -75,18 +76,20 @@ import FormControl from '@/Components/FormControl.vue';
                <!-- buttons -->
                <BaseLevel>
                    <BaseButtons>
-                        <BaseButton
-                            type="submit"
-                            color="info"
-                            label="Login"
-                            :class="{ 'opacity-25': form.processing }"
-                            v-bind:disabled="form.processing"
-                        />
+                        <!-- <BaseButton type="submit" color="info" label="Login" :class="{ 'opacity-25': form.processing }"
+                            v-bind:disabled="form.processing" /> -->
+                        <button type="submit" v-bind:disabled="form.processing" :class="{ 'opacity-25': form.processing }"
+                            class="text-white bg-cyan-600 hover:bg-cyan-700 focus:ring-4 focus:ring-cyan-200 font-medium rounded-lg text-base px-5 py-3 w-full sm:w-auto text-center">
+                            Login to your account
+                        </button>
                        <!-- <BaseButton v-if="canResetPassword" :route-name="route('password.request')" color="info" outline
 							label="Remind" /> -->
                    </BaseButtons>
                    <!-- <Link :href="stardust.route('app.register.show')"> Register </Link> -->
                </BaseLevel>
+                <div class="text-sm font-medium text-gray-500">
+                    Not registered? <a href="" class="text-teal-500 hover:underline">Create account</a>
+                </div>
            </CardBox>
        </SectionFullScreen>
    </LayoutGuest>
@ -104,7 +107,7 @@ import FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue';
 import FormField from '@/Components/FormField.vue';
 import FormControl from '@/Components/FormControl.vue';
 import BaseDivider from '@/Components/BaseDivider.vue';
-import BaseButton from '@/Components/BaseButton.vue';
+// import BaseButton from '@/Components/BaseButton.vue';
 import BaseButtons from '@/Components/BaseButtons.vue';
 import FormValidationErrors from '@/Components/FormValidationErrors.vue';
 import NotificationBarInCard from '@/Components/NotificationBarInCard.vue';
--- a/resources/js/Pages/Submitter/Person/Index.vue
+++ b/resources/js/Pages/Submitter/Person/Index.vue
@ -0,0 +1,175 @@
+<script setup lang="ts">
+// import { Head, Link, useForm, usePage } from '@inertiajs/inertia-vue3';
+import { Head, usePage } from '@inertiajs/vue3';
+import { ComputedRef } from 'vue';
+import { mdiAlertBoxOutline } from '@mdi/js';
+import { computed } from 'vue';
+import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
+import SectionMain from '@/Components/SectionMain.vue';
+// import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
+// import BaseButton from '@/Components/BaseButton.vue';
+import CardBox from '@/Components/CardBox.vue';
+import BaseButtons from '@/Components/BaseButtons.vue';
+import NotificationBar from '@/Components/NotificationBar.vue';
+import Pagination from '@/Components/Admin/Pagination.vue';
+// import Sort from '@/Components/Admin/Sort.vue';
+// import { stardust } from '@eidellev/adonis-stardust/client';
+
+const props = defineProps({
+    persons: {
+        type: Object,
+        default: () => ({}),
+    },
+    filters: {
+        type: Object,
+        default: () => ({}),
+    },
+    can: {
+        type: Object,
+        default: () => ({}),
+    },
+    // user: {
+    //     type: Object,
+    //     default: () => ({}),
+    // }
+});
+
+// const search = computed(() => {
+// 	return props.filters.search;
+// });
+
+const flash: ComputedRef<any> = computed(() => {
+    // let test = usePage();
+    // console.log(test);
+    return usePage().props.flash;
+});
+
+// const errors: ComputedRef<any> = computed(() => {
+//     return usePage().props.errors;
+// });
+
+// const form = useForm({
+//     search: props.filters.search,
+// });
+
+// const formDelete = useForm({});
+
+// async function destroy(id) {
+// const destroy = async (id) => {
+//     // if (confirm('Are you sure you want to delete?')) {
+//     //     await formDelete.delete(stardust.route('dataset.destroy', [id]));
+//     // }
+// };
+</script>
+
+<template>
+    <LayoutAuthenticated>
+
+        <Head title="Submit Dataset" />
+        <SectionMain>
+            <!-- <FormValidationErrors v-bind:errors="errors" /> -->
+            <NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
+                {{ flash.message }}
+            </NotificationBar>
+            <NotificationBar v-if="flash.warning" color="warning" :icon="mdiAlertBoxOutline">
+                {{ flash.warning }}
+            </NotificationBar>
+
+            <!-- table -->
+            <CardBox class="mb-6" has-table>
+                <table>
+                    <thead class="bg-gray-100">
+                        <tr>
+                            <th scope="col" class="p-4 text-left text-xs font-medium text-gray-500 uppercase">
+                                Name
+                            </th>
+                            <!-- <th>
+                                <Sort label="Email" attribute="email" :search="form.search" />
+                           
+                            </th> -->
+                            <th scope="col" class="p-4 text-left text-xs font-medium text-gray-500 uppercase">
+                                ORCID
+                            </th>
+                            <th scope="col" class="p-4 text-left text-xs font-medium text-gray-500 uppercase">
+                                Type
+                            </th>
+                            <!-- <th>Date of last modification</th> -->
+                            <th scope="col" class="p-4 text-left text-xs font-medium text-gray-500 uppercase">
+                                Status
+                            </th>
+                            <th v-if="can.edit || can.delete">Actions</th>
+                        </tr>
+                    </thead>
+
+                    <tbody class="bg-white divide-y divide-gray-200">
+                        <tr v-for="person in props.persons.data" :key="person.id">
+                            <td data-label="Login">
+                                <!-- <Link v-bind:href="stardust.route('user.show', [user.id])"
+                                    class="no-underline hover:underline text-cyan-600 dark:text-cyan-400">
+                                {{ user.login }}
+                                </Link> -->
+                            <td class="p-4 flex items-center whitespace-nowrap space-x-6 mr-12 lg:mr-0">
+                                <!-- <img class="h-10 w-10 rounded-full" src="/images/users/{{ .avatar }}" alt="{{ .name }} avatar"> -->
+                                <div class="text-sm font-normal">
+                                    <div class="text-base font-semibold">{{ person.name }}</div>
+                                    <div class="text-sm font-normal">{{ person.email }}</div>
+                                </div>
+                            </td>
+                            </td>
+                            <td class="p-4 whitespace-nowrap text-base font-medium">{{ person.identifier_orcid ?
+                                person.identifier_orcid : '#' }}</td>
+                            <td class="p-4 whitespace-nowrap text-base font-medium">{{ person.name_type }}</td>
+                            <td class="p-4 whitespace-nowrap text-base font-normal">
+                                <div class="flex items-center">
+                                    <div v-if="person.status == true" class="h-2.5 w-2.5 rounded-full bg-green-400 mr-2">
+                                    </div>
+                                    <div v-else class="h-2.5 w-2.5 rounded-full bg-red-500 mr-2"></div>
+                                    {{ person.status ? 'active' : 'inactive' }}
+                                </div>
+                            </td>
+                            <!-- <td>
+                                {{ dataset.server_state }}
+                            </td>
+
+                            <td data-label="Created" class="lg:w-1 whitespace-nowrap">
+                                <small class="text-gray-500 dark:text-slate-400" :title="dataset.server_date_modified">{{
+                                    dataset.updated_at }}</small>
+                            </td> -->
+                            <td v-if="can.edit || can.delete" class="before:hidden lg:w-1 whitespace-nowrap">
+                                <BaseButtons type="justify-start lg:justify-end" no-wrap>
+                                    <!-- release created dataset -->
+                                    <!-- <BaseButton v-if="can.edit"
+                                        :route-name="stardust.route('dataset.release', [dataset.id])" color="info"
+                                        :icon="mdiLockOpen" :label="'Release'" small /> -->
+                                    <!-- && (dataset.server_state === 'inprogress' || dataset.server_state === 'rejected_editor')"   -->
+                                    <!-- <BaseButton v-if="can.edit" :route-name="stardust.route('dataset.edit', [dataset.id])"
+                                        color="info" :icon="mdiSquareEditOutline" :label="'Edit'" small /> -->
+                                    <!-- @click="destroy(dataset.id)" -->
+                                    <!-- <BaseButton v-if="can.delete" color="danger"
+                                        :route-name="stardust.route('dataset.delete', [dataset.id])" :icon="mdiTrashCan"
+                                        small /> -->
+                                </BaseButtons>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+                <div class="py-4">
+                    <Pagination v-bind:data="persons.meta" />
+                    <!-- <ul>
+                        <li>
+                            <a href="{{ users.page == 1 ? '#' : '?page=' + (users.page - 1) }}">Previous</a>
+                        </li>
+                        @each(page in ???)
+                        <li>
+                            <a href="?page={{ page }}">{{ page }}</a>
+                        </li>
+                        @endeach
+                        <li>
+                            <a href="{{ users.lastPage == users.page ? '#' : '?page=' + (users.page + 1) }}">Next</a>
+                        </li>
+                    </ul> -->
+                </div>
+            </CardBox>
+        </SectionMain>
+    </LayoutAuthenticated>
+</template>