@drax/identity-front 0.0.7 → 0.0.8

package/package.json

@@ -3,12 +3,11 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
   "files": [
-    "dist",
     "src"
   ],
   "scripts": {
@@ -23,6 +22,9 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "format": "prettier --write src/"
   },
+  "dependencies": {
+    "@drax/common-front": "^0.0.8"
+  },
   "peerDependencies": {
     "pinia": "^2.1.7",
     "vue": "^3.4.21",
@@ -56,5 +58,5 @@
     "vue-tsc": "^2.0.11",
     "vuetify": "^3.6.4"
   },
-  "gitHead": "7fb7c130ba04e9c25d45b4e1f229e7c4c2e22068"
+  "gitHead": "46840505094d059c06338a8dfd76937a735cf05a"
 }

package/src/components/IdentityLogin/IdentityLogin.vue

@@ -1,24 +1,82 @@
 <script setup lang="ts">
-import { VCard, VCardText, VCardTitle, VCardActions } from 'vuetify/components/VCard'
-import { VBtn } from 'vuetify/components/VBtn'
+import { ref, computed, defineProps } from 'vue'
+import {useAuthStore} from "../../stores/auth/AuthStore.js";
 
-defineProps<{
-  msg: string
-}>()
+const {getAuthSystem} = useAuthStore()
+
+// Define props for customizing labels, title, and button text
+const props = defineProps({
+  title: {
+    type: String,
+    default: 'Login'
+  },
+  usernameLabel: {
+    type: String,
+    default: 'Username'
+  },
+  passwordLabel: {
+    type: String,
+    default: 'Password'
+  },
+  buttonText: {
+    type: String,
+    default: 'Login'
+  }
+})
+
+// Define reactive variables for form inputs
+const username = ref('')
+const password = ref('')
+
+// Compute whether the form is valid (both username and password are not empty)
+const isFormValid = computed(() => username.value.trim() !== '' && password.value.trim() !== '')
+
+// Function to handle form submission
+const submitForm = () => {
+  console.log('Submitting:', { username: username.value, password: password.value })
+  getAuthSystem?.login(username.value, password.value)
+  // Here you would typically send the data to your backend
+}
 </script>
 
 <template>
-
-  <v-card variant="tonal">
-    <v-card-title><h1>IDENTITY LOGIN</h1></v-card-title>
-    <v-card-text>INCA DRAX</v-card-text>
-    <v-card-text>{{ msg }}</v-card-text>
-    <v-card-actions>
-      <v-btn>BUTTON</v-btn>
-    </v-card-actions>
-  </v-card>
+  <v-container>
+    <v-row justify="center">
+      <v-col cols="12" sm="8" md="6" lg="5" xl="4" >
+        <v-form @submit.prevent="submitForm">
+          <v-card variant="tonal">
+            <v-card-title>{{ props.title }}</v-card-title>
+            <v-card-text>
+              <v-text-field
+                id="username-input"
+                v-model="username"
+                :label="props.usernameLabel"
+                required
+              ></v-text-field>
+              <v-text-field
+                id="password-input"
+                v-model="password"
+                :label="props.passwordLabel"
+                type="password"
+                required
+              ></v-text-field>
+            </v-card-text>
+            <v-card-actions>
+              <v-spacer></v-spacer>
+              <v-btn
+                id="submit-button"
+                type="submit"
+                color="primary"
+                :disabled="!isFormValid"
+              >{{ props.buttonText }}</v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-form>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <style scoped lang="sass">
-
+// Your styles here
 </style>

package/src/core/factories/providers/AuthProviderFactory.ts

@@ -0,0 +1,28 @@
+import type {IGqlClientInterface, IHttpClientInterface} from '@drax/common-front'
+import {GqlApolloClientFactory, HttpFetchClientFactory} from '@drax/common-front';
+import type {IAuthProviderInterface} from "@/core/interfaces/IAuthProviderInterface";
+import AuthRestProvider from "@/core/providers/gql/AuthGqlProvider";
+import AuthGqlProvider from "@/core/providers/gql/AuthGqlProvider";
+class AuthProviderFactory{
+    static create(type: string = 'rest'): IAuthProviderInterface {
+        if (type === 'gql') {
+            return AuthProviderFactory.createGql()
+        }
+        return AuthProviderFactory.createRest()
+    }
+
+    static createGql(): IAuthProviderInterface {
+        const gqlClient: IGqlClientInterface = GqlApolloClientFactory.create()
+        return new AuthGqlProvider(gqlClient)
+    }
+
+    static createRest(): IAuthProviderInterface {
+        const baseUrl = process.env.VUE_APP_BACKEND_URL ? process.env.VUE_APP_BACKEND_URL : ''
+        const baseHeaders = new Headers()
+        const httpClient: IHttpClientInterface = HttpFetchClientFactory.create(baseUrl,baseHeaders)
+        return new AuthRestProvider(httpClient)
+    }
+}
+
+export default AuthProviderFactory
+export {AuthProviderFactory}

package/src/core/factories/system/AuthSystemFactory.ts

@@ -0,0 +1,12 @@
+import AuthSystem from "@/core/system/AuthSystem";
+import type {IAuthProviderInterface} from "@/core/interfaces/IAuthProviderInterface";
+import AuthRestProviderFactory from "@/core/factories/providers/AuthProviderFactory";
+
+class AuthSystemFactory {
+
+    static create(type: string = 'rest'): AuthSystem {
+        const provider: IAuthProviderInterface = AuthRestProviderFactory.create(type)
+
+        return new AuthSystem(provider)
+    }
+}

package/src/core/interfaces/IAuthProviderInterface.ts

@@ -0,0 +1,5 @@
+interface IAuthProviderInterface{
+    login(username: string, password: string): Promise<object>
+}
+
+export type {IAuthProviderInterface}

package/src/core/providers/gql/AuthGqlProvider.ts

@@ -0,0 +1,19 @@
+import type {IGqlClientInterface} from '@drax/common-front'
+import type {IAuthProviderInterface} from "../../interfaces/IAuthProviderInterface.ts";
+class AuthGqlProvider implements IAuthProviderInterface{
+
+    gqlClient : IGqlClientInterface
+    constructor(gqlClient: IGqlClientInterface) {
+        this.gqlClient = gqlClient
+    }
+    async login(username: string, password: string): Promise<object> {
+
+        const url : string = ''
+        const data = {username, password}
+        let r = this.gqlClient.mutation(url, data)
+
+        return r
+    }
+}
+
+export default AuthGqlProvider

package/src/core/providers/rest/AuthRestProvider.ts

@@ -0,0 +1,19 @@
+import type {IHttpClientInterface} from '@drax/common-front'
+import type {IAuthProviderInterface} from "../../interfaces/IAuthProviderInterface.ts";
+class AuthRestProvider implements IAuthProviderInterface{
+
+    httpClient : IHttpClientInterface
+    constructor(httpClient: IHttpClientInterface) {
+        this.httpClient = httpClient
+    }
+    async login(username: string, password: string): Promise<object> {
+        const url = '/api/auth'
+        const data = {username,password}
+        let r = await this.httpClient.post(url,data)
+
+        return r
+    }
+}
+
+export default AuthRestProvider
+export {AuthRestProvider}

package/src/core/system/AuthSystem.ts

@@ -0,0 +1,21 @@
+import type {IAuthProviderInterface} from "../interfaces/IAuthProviderInterface.ts";
+
+class AuthSystem {
+
+    _provider : IAuthProviderInterface
+    prototype: string;
+    constructor(provider:IAuthProviderInterface) {
+        this._provider = provider;
+        this.prototype = 'AuthSystem'
+    }
+
+    async login(username:string, password:string):Promise<object> {
+        console.log("AuthSystem.login username",username)
+        const r = await this._provider.login(username, password)
+        console.log("AuthSystem.login",r)
+        return r
+    }
+}
+
+export default AuthSystem
+export {AuthSystem}

package/src/index.ts

@@ -1,6 +1,20 @@
 import IdentityLogin from "./components/IdentityLogin/IdentityLogin.vue";
-
+import AuthSystem from "./core/system/AuthSystem.js"
+import AuthRestProvider from "./core/providers/rest/AuthRestProvider.js";
+import AuthGqlProvider from "./core/providers/gql/AuthGqlProvider.js";
+import {useAuthStore} from "./stores/auth/AuthStore.js";
 
 export {
-    IdentityLogin
+    //Vue Components
+    IdentityLogin,
+
+    //Providers
+    AuthRestProvider,
+    AuthGqlProvider,
+
+    //Systems
+    AuthSystem,
+
+    //Stores
+    useAuthStore
 }

package/src/stores/auth/AuthStore.ts

@@ -0,0 +1,19 @@
+// Utilities
+import { defineStore } from 'pinia'
+import AuthSystem from "../../core/system/AuthSystem.js";
+
+export const useAuthStore = defineStore('AuthStore', {
+  state: () => ({
+    authSystem : null as AuthSystem | null
+  }),
+  actions:{
+    setAuthSystem(authSystem:AuthSystem){
+      this.authSystem = authSystem
+    }
+  },
+  getters:{
+    getAuthSystem: (state) => {
+      return state.authSystem
+    }
+  }
+})

package/src/components/TheWelcome.vue

@@ -1,88 +0,0 @@
-<script setup lang="ts">
-import WelcomeItem from './WelcomeItem.vue'
-import DocumentationIcon from './icons/IconDocumentation.vue'
-import ToolingIcon from './icons/IconTooling.vue'
-import EcosystemIcon from './icons/IconEcosystem.vue'
-import CommunityIcon from './icons/IconCommunity.vue'
-import SupportIcon from './icons/IconSupport.vue'
-</script>
-
-<template>
-  <WelcomeItem>
-    <template #icon>
-      <DocumentationIcon />
-    </template>
-    <template #heading>Documentation</template>
-
-    Vue’s
-    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
-    provides you with all information you need to get started.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <ToolingIcon />
-    </template>
-    <template #heading>Tooling</template>
-
-    This project is served and bundled with
-    <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
-    recommended IDE setup is
-    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
-    you need to test your components and web pages, check out
-    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
-    <a href="https://on.cypress.io/component" target="_blank" rel="noopener"
-      >Cypress Component Testing</a
-    >.
-
-    <br />
-
-    More instructions are available in <code>README.md</code>.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <EcosystemIcon />
-    </template>
-    <template #heading>Ecosystem</template>
-
-    Get official tools and libraries for your project:
-    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
-    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
-    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
-    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
-    you need more resources, we suggest paying
-    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
-    a visit.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <CommunityIcon />
-    </template>
-    <template #heading>Community</template>
-
-    Got stuck? Ask your question on
-    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
-    Discord server, or
-    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
-      >StackOverflow</a
-    >. You should also subscribe to
-    <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
-    the official
-    <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
-    twitter account for latest news in the Vue world.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <SupportIcon />
-    </template>
-    <template #heading>Support Vue</template>
-
-    As an independent project, Vue relies on community backing for its sustainability. You can help
-    us by
-    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
-  </WelcomeItem>
-</template>

package/src/components/WelcomeItem.vue

@@ -1,87 +0,0 @@
-<template>
-  <div class="item">
-    <i>
-      <slot name="icon"></slot>
-    </i>
-    <div class="details">
-      <h3>
-        <slot name="heading"></slot>
-      </h3>
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.item {
-  margin-top: 2rem;
-  display: flex;
-  position: relative;
-}
-
-.details {
-  flex: 1;
-  margin-left: 1rem;
-}
-
-i {
-  display: flex;
-  place-items: center;
-  place-content: center;
-  width: 32px;
-  height: 32px;
-
-  color: var(--color-text);
-}
-
-h3 {
-  font-size: 1.2rem;
-  font-weight: 500;
-  margin-bottom: 0.4rem;
-  color: var(--color-heading);
-}
-
-@media (min-width: 1024px) {
-  .item {
-    margin-top: 0;
-    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
-  }
-
-  i {
-    top: calc(50% - 25px);
-    left: -26px;
-    position: absolute;
-    border: 1px solid var(--color-border);
-    background: var(--color-background);
-    border-radius: 8px;
-    width: 50px;
-    height: 50px;
-  }
-
-  .item:before {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    bottom: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:after {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    top: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:first-of-type:before {
-    display: none;
-  }
-
-  .item:last-of-type:after {
-    display: none;
-  }
-}
-</style>