<p>Saya mencipta antara muka pengguna saya sendiri untuk proses persediaan Ory Kratos. Masalah yang saya hadapi ialah walaupun mesej kembali bahawa tetapan saya telah berjaya dikemas kini, kata laluan baharu saya tidak ditunjukkan dan saya tidak berjaya memulihkan akaun saya. Di bawah ialah coretan kod yang saya gunakan untuk memaparkan UI menggunakan Vue 3. </p> <pre class="brush:js;toolbar:false;">// SettingsVue.vue <template> <div id="tetapan"> <HomeTopbar :views="[]" <div class="setting-wrapper"> <h1 class="poppins fs_3 fw_6">Pulihkan kata laluan anda</h1> <OryFlow v-if="settingsFlow" :flow="settingsFlow" title="Log Masuk" form-id="setting-form" /> </div> </div> </template> <penyiapan skrip lang="ts"> import { ref } daripada 'vue'; /* ory */ import { injectStrict } daripada '@/utils'; import { $ory } daripada '@/plugins/ory'; import { makeHandleGetFlowError } daripada '@/utils/flows'; /* jenis */ jenis import { SelfServiceSettingsFlow } daripada '@ory/kratos-client'; /* boleh digubah */ import { useRoute, useRouter } daripada 'vue-router'; /* komponen */ import OryFlow daripada '@/components/flows/OryFlow.vue'; import HomeTopbar daripada '@/components/ui/HomeTopbar.vue'; const ory = injectStrict($ory); laluan const = useRoute(); penghala const = useRouter(); const settingsFlow = ref<SelfServiceSettingsFlow | undefined>(); const handleGetFlowError = makeHandleGetFlowError(router); // semak sama ada kita mempunyai param aliran const { flow } = route.query; const initializeSelfServiceSettingsFlowForBrowsers = () => ory .initializeSelfServiceSettingsFlowForBrowsers() .then((respons) => { settingsFlow.value = response.data; router.replace({ pertanyaan: { aliran: response.data.id, }, }); }) .catch(handleGetFlowError); jika (jenis aliran !== 'rentetan') { // jika tiada aliran dalam laluan kami, // kita perlu memulakan aliran log masuk kita initializeSelfServiceSettingsFlowForBrowsers(); } lain { ory .getSelfServiceSettingsFlow(flow) .then((respons) => { settingsFlow.value = response.data; }) .catch(handleGetFlowError); } </skrip> <style scoped lang="scss"> #settings { lebar: 100%; ketinggian: 100%; .setting-wrapper { margin: var(--space-5) auto 0 auto; padding: 0 var(--space-3); margin-top: var(--space-4); lebar: 300px; } } </style> </pra> <pre class="brush:js;toolbar:false;">#OryFlow.vue <template> <div class="ory-flow"> <form :id="formId" :action="flow.ui.action" :method="flow.ui.method"> <OryUiNode v-for="nod dalam flow.ui.nodes" :key="getNodeId(nod)" :id="getNodeId(nod)" :node="node" class="ui-node" /> </form> <div class="mesej" v-if="flow.ui.messages"> <OryUiMessage v-for="mesej dalam flow.ui.messages" :message="message" /> </div> </div> </template> <penyiapan skrip lang="ts"> jenis import { SelfServiceLoginFlow, SelfServiceRegistrationFlow, SelfServiceRecoveryFlow, SelfServiceSettingsFlow, SelfServiceVerificationFlow, } daripada '@ory/kratos-client'; import OryUiNode daripada './OryUiNode.vue'; import OryUiMessage daripada './OryUiMessage.vue'; import { getNodeId } daripada '@ory/integrations/ui'; defineProps<{ aliran: | SelfServiceLoginFlow | SelfServiceRegistrationFlow | SelfServiceRecoveryFlow | SelfServiceSettingsFlow | SelfServiceVerificationFlow; formId?: string; }>(); </skrip> <style scoped lang="scss"> .ui-node + .ui-node { margin-top: var(--space-2); } .message { margin-top: var(--space-2); } </style> </pra>

// OryFlow.vue现在支持通过'only'属性进行过滤
<template>
  <div class="ory-flow">
    <form :id="formId"
      :action="flow.ui.action"
      :method="flow.ui.method"
    >
      <OryUiNode v-for="node in nodes"
        :id="getNodeId(node)"
        :key="getNodeId(node)"
        :node="node"
        class="ui-node"
      />
    </form>
    <div v-if="flow.ui.messages"
      class="messages"
    >
      <OryUiMessage v-for="message in flow.ui.messages"
        :key="message.id"
        :message="message"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import type {
  SelfServiceLoginFlow,
  SelfServiceRegistrationFlow,
  SelfServiceRecoveryFlow,
  SelfServiceSettingsFlow,
  SelfServiceVerificationFlow,
} from '@ory/kratos-client';
import OryUiNode from './OryUiNode.vue';
import OryUiMessage from './OryUiMessage.vue';
import { getNodeId } from '@ory/integrations/ui';
import { computed, toRefs } from 'vue';

const props = defineProps<{
  flow:
    | SelfServiceLoginFlow
    | SelfServiceRegistrationFlow
    | SelfServiceRecoveryFlow
    | SelfServiceSettingsFlow
    | SelfServiceVerificationFlow;
  formId?: string;
  only?: string | string[];
}>();

const { flow, only } = toRefs(props);

const nodes = computed(() => {
  if (!only?.value) {
    return flow.value.ui.nodes;
  }

  const onlyArr: string[] = Array.isArray(only.value) ? only.value : [only.value];
  const onlyMap = onlyArr.reduce((acc, curr: string) => {
    acc[curr] = true;
    return acc;
  }, {} as Record<string, boolean>);

  return flow.value.ui.nodes.filter((node) => onlyMap[node.group]);
});
</script>

// SettingsView.vue
<template>
  <div id="settings">
    <HomeTopbar :views="[]" />

    <div class="settings-wrapper">
      <h1 class="poppins fs_3 fw_6">Recover your password</h1>
      <!-- 在这里添加only属性 -->
      <OryFlow v-if="settingsFlow"
        :flow="settingsFlow"
        title="Login"
        form-id="settings-form"
        :only="[ 'password', 'default' ]"
      />
    </div>
  </div>
</template>