@globalbrain/sefirot 3.49.0 → 3.51.0

package/lib/components/SLoginPage.vue

@@ -1,8 +1,12 @@
 <script setup lang="ts">
+import LockKey from '@iconify-icons/ph/lock-key-fill'
 import IconGoogle from '@iconify-icons/ri/google-fill'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import { usePower } from '../composables/Power'
 import SButton from './SButton.vue'
 import SLink from './SLink.vue'
+import SLoginPagePasswordDialog from './SLoginPagePasswordDialog.vue'
+import SModal from './SModal.vue'
 import SIconGbLogoWhite from './icon/SIconGbLogoWhite.vue'
 
 export interface CoverTitle {
@@ -15,11 +19,20 @@ export interface CoverPhotographer {
   link: string
 }
 
-export interface Action {
+export type Action = ActionPassword | ActionSocial
+
+export interface ActionPassword {
+  type: 'password'
+  onSubmit(email: string, password: string): Promise<boolean>
+}
+
+export interface ActionSocial {
   type: 'google'
-  onClick: () => Promise<void>
+  onClick(): Promise<void>
 }
 
+export type ActionType = 'password' | 'google'
+
 const props = defineProps<{
   cover: string
   coverTitle: CoverTitle
@@ -27,23 +40,51 @@ const props = defineProps<{
   actions: Action[]
 }>()
 
+const passwordDialog = usePower()
+
+const selectedPasswordAction = ref<ActionPassword | null>(null)
+const actionInProgress = ref(false)
+const actionError = ref(false)
+
 const coverBgImageStyle = computed(() => `url(${props.cover})`)
 
-function getActionLabel(type: Action['type']) {
+function getActionLabel(type: ActionType) {
   switch (type) {
+    case 'password':
+      return 'Sign in via Password'
     case 'google':
       return 'Sign in via Google'
-    default:
-      throw new Error('[sefirot] Invalid action type')
   }
 }
 
-function getIconComponent(type: Action['type']) {
+function getIconComponent(type: ActionType) {
   switch (type) {
+    case 'password':
+      return LockKey
     case 'google':
       return IconGoogle
-    default:
-      throw new Error('[sefirot] Invalid action type')
+  }
+}
+
+function onAction(action: Action) {
+  switch (action.type) {
+    case 'password':
+      selectedPasswordAction.value = action
+      return passwordDialog.on()
+    case 'google':
+      return action.onClick()
+  }
+}
+
+async function onSubmit(email: string, password: string) {
+  actionInProgress.value = true
+
+  actionError.value = !(await selectedPasswordAction.value!.onSubmit(email, password))
+
+  actionInProgress.value = false
+
+  if (!actionError.value) {
+    passwordDialog.off()
   }
 }
 </script>
@@ -74,20 +115,30 @@ function getIconComponent(type: Action['type']) {
           <p class="form-lead">This is a very closed login form meant for specific audiences only. If you can’t login, well, you know who to ask.</p>
         </div>
 
-        <div class="form-actions">
-          <SButton
-            v-for="action in actions"
-            :key="action.type"
-            size="large"
-            mode="white"
-            rounded
-            :label="getActionLabel(action.type)"
-            :icon="getIconComponent(action.type)"
-            @click="action.onClick"
-          />
+        <div class="form-actions" :class="{ multi: actions.length > 1 }">
+          <div v-for="action in actions" :key="action.type" class="form-action">
+            <SButton
+              size="large"
+              mode="white"
+              block
+              rounded
+              :label="getActionLabel(action.type)"
+              :icon="getIconComponent(action.type)"
+              @click="onAction(action)"
+            />
+          </div>
         </div>
       </div>
     </div>
+
+    <SModal :open="passwordDialog.state.value" @close="passwordDialog.off">
+      <SLoginPagePasswordDialog
+        :loading="actionInProgress"
+        :error="actionError"
+        @cancel="passwordDialog.off"
+        @submit="onSubmit"
+      />
+    </SModal>
   </div>
 </template>
 
@@ -196,9 +247,15 @@ function getIconComponent(type: Action['type']) {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 8px;
+  gap: 16px;
   padding-top: 24px;
   text-align: center;
   margin: 0 auto;
 }
+
+.form-actions.multi .form-action {
+  display: block;
+  width: 100%;
+  max-width: 256px;
+}
 </style>

package/lib/components/SLoginPagePasswordDialog.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { useD } from '../composables/D'
+import { useV } from '../composables/V'
+import { email, maxLength, required } from '../validation/rules'
+import SAlert from './SAlert.vue'
+import SCard from './SCard.vue'
+import SCardBlock from './SCardBlock.vue'
+import SContent from './SContent.vue'
+import SControl from './SControl.vue'
+import SControlButton from './SControlButton.vue'
+import SControlRight from './SControlRight.vue'
+import SDoc from './SDoc.vue'
+import SInputText from './SInputText.vue'
+
+defineProps<{
+  loading: boolean
+  error: boolean
+}>()
+
+const emit = defineEmits<{
+  cancel: []
+  submit: [email: string, password: string]
+}>()
+
+const { data } = useD({
+  email: null as string | null,
+  password: null as string | null
+})
+
+const { validation, validateAndNotify } = useV(data, {
+  email: {
+    required: required(),
+    maxLength: maxLength(255),
+    email: email()
+  },
+  password: {
+    required: required(),
+    maxLength: maxLength(255)
+  }
+})
+
+async function onSubmit() {
+  if (await validateAndNotify()) {
+    emit('submit', data.value.email!, data.value.password!)
+  }
+}
+</script>
+
+<template>
+  <SCard size="small">
+    <SCardBlock class="s-p-24">
+      <SDoc>
+        <SContent>
+          <h2>Sign in to account</h2>
+        </SContent>
+        <SAlert v-if="error" mode="danger">
+          <p>Invalid email or password.</p>
+        </SAlert>
+        <SInputText
+          name="email"
+          type="email"
+          label="Email"
+          placeholder="john.doe@example.com"
+          v-model="data.email"
+          :validation="validation.email"
+        />
+        <SInputText
+          name="password"
+          type="password"
+          label="Password"
+          placeholder="Password"
+          v-model="data.password"
+          :validation="validation.password"
+        />
+      </SDoc>
+    </SCardBlock>
+    <SCardBlock size="xlarge" class="s-px-24">
+      <SControl>
+        <SControlRight>
+          <SControlButton
+            label="Cancel"
+            :disabled="loading"
+            @click="$emit('cancel')"
+          />
+          <SControlButton
+            mode="info"
+            label="Sign in"
+            :loading="loading"
+            @click="onSubmit"
+          />
+        </SControlRight>
+      </SControl>
+    </SCardBlock>
+  </SCard>
+</template>

package/lib/http/Http.ts

@@ -5,6 +5,8 @@ import { type FetchOptions, type FetchRequest, type FetchResponse, ofetch } from
 import { stringify } from 'qs'
 import { type Lang } from '../composables/Lang'
 
+type Awaitable<T> = T | PromiseLike<T>
+
 export interface HttpClient {
   <T = any>(request: FetchRequest, options?: Omit<FetchOptions, 'method'>): Promise<T>
   raw<T = any>(request: FetchRequest, options?: Omit<FetchOptions, 'method'>): Promise<FetchResponse<T>>
@@ -16,6 +18,7 @@ export interface HttpOptions {
   client?: HttpClient
   lang?: Lang
   payloadKey?: string
+  headers?: () => Awaitable<Record<string, string>>
 }
 
 export class Http {
@@ -24,6 +27,7 @@ export class Http {
   private static client: HttpClient = ofetch
   private static lang: Lang | undefined = undefined
   private static payloadKey = '__payload__'
+  private static headers: () => Awaitable<Record<string, string>> = async () => ({})
 
   static config(options: HttpOptions) {
     if (options.baseUrl) {
@@ -41,6 +45,9 @@ export class Http {
     if (options.payloadKey) {
       Http.payloadKey = options.payloadKey
     }
+    if (options.headers) {
+      Http.headers = options.headers
+    }
   }
 
   private async ensureXsrfToken(): Promise<string | undefined> {
@@ -81,6 +88,7 @@ export class Http {
         ...options,
         headers: {
           Accept: 'application/json',
+          ...(await Http.headers()),
           ...(xsrfToken && { 'X-Xsrf-Token': xsrfToken }),
           ...(Http.lang && { 'Accept-Language': Http.lang }),
           ...options.headers

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "3.49.0",
+  "version": "3.51.0",
   "packageManager": "pnpm@9.1.1",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",