@globalbrain/sefirot 3.48.0 → 3.50.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/validation/validators/email.ts

@@ -1,7 +1,7 @@
 import { isString } from '../../support/Utils'
 
 /* eslint-disable-next-line no-control-regex */
-const regExp = /^(?:[A-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[A-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0B\x0C\x0E-\x1F\x21\x23-\x5B\x5D-\x7F]|[\x01-\x09\x0B\x0C\x0E-\x7F])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9]{2,}(?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0B\x0C\x0E-\x1F\x21-\x5A\x53-\x7F]|\\[\x01-\x09\x0B\x0C\x0E-\x7F])+)\])$/i
+const regExp = /^(?:[A-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[A-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0B\x0C\x0E-\x1F\x21\x23-\x5B\x5D-\x7F]|[\x01-\x09\x0B\x0C\x0E-\x7F])*")@(?:(?:[a-z0-9](?:[a-z0-9-_]*[a-z0-9])?\.)+[a-z0-9]{2,}(?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0B\x0C\x0E-\x1F\x21-\x5A\x53-\x7F]|\\[\x01-\x09\x0B\x0C\x0E-\x7F])+)\])$/i
 
 export function email(value: unknown): boolean {
   if (!isString(value)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "3.48.0",
+  "version": "3.50.0",
   "packageManager": "pnpm@9.1.1",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
@@ -52,6 +52,7 @@
     "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^10.9.0",
     "body-scroll-lock": "4.0.0-beta.0",
+    "dayjs": "^1.11.11",
     "fuse.js": "^7.0.0",
     "lodash-es": "^4.17.21",
     "markdown-it": "^14.1.0",
@@ -70,7 +71,6 @@
     "@tinyhttp/cookie": "^2.1.0",
     "@types/file-saver": "^2.0.7",
     "@types/qs": "^6.9.15",
-    "dayjs": "^1.11.11",
     "file-saver": "^2.0.5",
     "ofetch": "^1.3.4",
     "qs": "^6.12.1"
@@ -95,6 +95,7 @@
     "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^10.9.0",
     "body-scroll-lock": "4.0.0-beta.0",
+    "dayjs": "^1.11.11",
     "eslint": "^8.57.0",
     "fuse.js": "^7.0.0",
     "happy-dom": "^14.10.2",