@raclettejs/workbench 0.0.1

package/services/frontend/src/orchestrator/LoginApp.vue

@@ -0,0 +1,62 @@
+<template>
+  <v-app>
+    <v-main>
+      <InitProjectScreen v-if="noUsers" @finish="onSubmitLogin" />
+      <LoginScreen v-else @submit="onSubmitLogin" />
+
+      <SnackStack />
+    </v-main>
+  </v-app>
+</template>
+
+<script setup lang="ts">
+import {
+  userNotifier,
+  type LoginResponse,
+} from "@raclettejs/core/frontend"
+import LoginScreen from "./components/LoginScreen.vue"
+import { SnackStack } from "@raclettejs/core/orchestrator"
+import { useTheme } from "vuetify"
+import { defineAsyncComponent } from "vue"
+
+const InitProjectScreen = defineAsyncComponent(
+  () => import("./components/InitProjectScreen.vue"),
+)
+
+const props = withDefaults(
+  defineProps<{
+    loginMethod?: ({
+      email,
+      password,
+    }: {
+      email: string
+      password: string
+    }) => Promise<LoginResponse>
+    noUsers: boolean
+  }>(),
+  { loginMethod: undefined },
+)
+
+useTheme().change("light")
+
+const onSubmitLogin = async ({
+  email,
+  password,
+}: {
+  email: string
+  password: string
+}) => {
+  if (props.loginMethod) {
+    const { success, message, redirect } = await props.loginMethod({
+      email,
+      password,
+    })
+
+    if (success) {
+      redirect?.()
+    } else if (message) {
+      userNotifier.add(message, "error")
+    }
+  }
+}
+</script>

package/services/frontend/src/orchestrator/WelcomeScreen.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="tw:p-4">
+    <h1 v-html="$t('workbench.welcomeScreen.title')"></h1>
+
+    <v-list density="compact" disabled>
+      <v-list-subheader
+        ><h3>
+          {{ $t("workbench.welcomeScreen.whatIsWhat") }}
+        </h3></v-list-subheader
+      >
+
+      <v-list-item
+        v-for="(item, i) in whatIsWhatItems"
+        :key="i"
+        :value="item"
+        color="primary"
+      >
+        <template #prepend>
+          <v-icon :icon="item.icon"></v-icon>
+        </template>
+
+        <v-list-item-title>
+          {{ $t("workbench.welcomeScreen." + item.i18nKey) }}
+        </v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+const whatIsWhatItems = ref([
+  { i18nKey: "compositionInfo", icon: "mdi-file-document" },
+  { i18nKey: "interactionLinkInfo", icon: "mdi-link-box-variant" },
+  { i18nKey: "userInfo", icon: "mdi-account-details" },
+  { i18nKey: "tagInfo", icon: "mdi-tag" },
+  { i18nKey: "pluginInfo", icon: "mdi-puzzle" },
+])
+</script>

package/services/frontend/src/orchestrator/assets/styles/themes/dark.ts

@@ -0,0 +1,39 @@
+/**
+ * dark theme
+ */
+export default {
+  background: "#212121",
+  surface: "#212121",
+  primary: "#DD8B41",
+  "primary-darken-1": "#C47A39",
+  "primary-darken-2": "#AB6A32",
+  "primary-darken-3": "#925A2B",
+  "primary-darken-4": "#784A24",
+  "primary-darken-5": "#5F3B1D",
+  "primary-darken-6": "#462B16",
+  "primary-darken-7": "#2D1C0F",
+  "primary-lighten-1": "#E39C5B",
+  "primary-lighten-2": "#E9AD76",
+  "primary-lighten-3": "#EEBE90",
+  "primary-lighten-4": "#F4CFAA",
+  "primary-lighten-5": "#F9E0C5",
+  "primary-lighten-6": "#FDF1DF",
+  "primary-lighten-7": "#FFFAF4",
+  secondary: "#3DB7E3",
+  "secondary-darken-1": "#2C99C1",
+  "secondary-darken-2": "#1F7A9D",
+  error: "#FF5252",
+  info: "#42A5F5",
+  success: "#3A823D",
+  warning: "#FFA726",
+  "surface-2": "#000",
+  "surface-3": "#333333",
+  "surface-4": "#666666",
+  "border-default": "#666666",
+  "signal-1": "#9aeba3",
+  "signal-2": "#dafdba",
+  "signal-3": "#a0c7d9",
+  "page-nav-bg": "#121212",
+  "page-nav-active": "#DD8B41",
+  "topbar-bg": "#FFEEDD",
+}

package/services/frontend/src/orchestrator/assets/styles/themes/highContrast.ts

@@ -0,0 +1,39 @@
+/**
+ * dark theme
+ */
+export default {
+  background: "#000000",
+  surface: "#0A0A0A",
+  primary: "#FF9E30",
+  "primary-darken-1": "#E38B00",
+  "primary-darken-2": "#C67800",
+  "primary-darken-3": "#A96600",
+  "primary-darken-4": "#8C5300",
+  "primary-darken-5": "#6F4200",
+  "primary-darken-6": "#523000",
+  "primary-darken-7": "#351F00",
+  "primary-lighten-1": "#FFB55F",
+  "primary-lighten-2": "#FFCA8E",
+  "primary-lighten-3": "#FFDCB4",
+  "primary-lighten-4": "#FFEDD9",
+  "primary-lighten-5": "#FFF6EC",
+  "primary-lighten-6": "#FFFBF5",
+  "primary-lighten-7": "#FFFFFF",
+  secondary: "#00D9FF",
+  "secondary-darken-1": "#00B8D9",
+  "secondary-darken-2": "#0097B3",
+  error: "#FF2929",
+  info: "#29B6FF",
+  success: "#1FE01F",
+  warning: "#FFBB00",
+  "surface-2": "#111111",
+  "surface-3": "#333333",
+  "surface-4": "#555555",
+  "border-default": "#FFFFFF",
+  "signal-1": "#00FF00",
+  "signal-2": "#FFFF00",
+  "signal-3": "#00FFFF",
+  "page-nav-bg": "#0A0A0A",
+  "page-nav-active": "#FF9E30",
+  "topbar-bg": "#FFEEDD",
+}

package/services/frontend/src/orchestrator/assets/styles/themes/light.ts

@@ -0,0 +1,39 @@
+/**
+ * light theme
+ */
+export default {
+  background: "#F4F4F4",
+  surface: "#F4F4F4",
+  primary: "#DD8B41",
+  "primary-darken-1": "#B26F34",
+  "primary-darken-2": "#9D612E",
+  "primary-darken-3": "#875428",
+  "primary-darken-4": "#724622",
+  "primary-darken-5": "#5C391C",
+  "primary-darken-6": "#472C16",
+  "primary-darken-7": "#311F10",
+  "primary-lighten-1": "#E19D5D",
+  "primary-lighten-2": "#E6AE78",
+  "primary-lighten-3": "#EAC094",
+  "primary-lighten-4": "#EFD1B0",
+  "primary-lighten-5": "#F3E2CC",
+  "primary-lighten-6": "#F8F3E8",
+  "primary-lighten-7": "#FCF9F4",
+  secondary: "#2D9CCA",
+  "secondary-darken-1": "#247DA1",
+  "secondary-darken-2": "#1B5D78",
+  error: "#B00020",
+  info: "#2196F3",
+  success: "#3A823D",
+  warning: "#FB8C00",
+  "surface-2": "#F4F4F4",
+  "surface-3": "#CCCCCC",
+  "surface-4": "#888888",
+  "border-default": "#CCC",
+  "signal-1": "#9aeba3",
+  "signal-2": "#dafdba",
+  "signal-3": "#a0c7d9",
+  "page-nav-bg": "#F4F4F4",
+  "page-nav-active": "#DD8B41",
+  "topbar-bg": "#FFEEDD",
+}

package/services/frontend/src/orchestrator/components/InitProjectScreen.vue

@@ -0,0 +1,298 @@
+<template>
+  <StepNavigator
+    class="tw:h-full init-screen-gradient"
+    :steps
+    padding-top
+    :allow-free-navigation="false"
+    @save-and-finish="onFinish()"
+  >
+    <template #default="{ currentStep }">
+      <!-- Main Content -->
+      <AppModal>
+        <template #header>
+          <h1 class="tw:text-4xl tw:font-bold tw:text-gray-800 tw:mb-4">
+            {{ $t("workbench.welcomeScreen.wizard.title") }}
+            <span class="tw:font-bold tw:tracking-[1px] tw:font-[quicksand]">
+              raclette!
+            </span>
+          </h1>
+        </template>
+
+        <template #default>
+          <!-- Step Content -->
+          <template
+            v-if="
+              currentStep.id === 'application-name' ||
+              currentStep.id === 'register-admin'
+            "
+          >
+            <!-- @vue-generic {typeof newProject} -->
+            <DynamicForm
+              ref="dynamicFormRef"
+              v-model="newProject"
+              :data="getCurrentInputFields(currentStep.id)"
+              :validate-on-change="false"
+              :title="$t('workbench.welcomeScreen.wizard.setupTitle')"
+            />
+          </template>
+
+          <!-- Confirmation overview -->
+          <div v-else class="tw:space-y-8">
+            <div class="tw:text-center tw:mb-8">
+              <h2 class="tw:text-2xl tw:font-semibold tw:text-gray-700 tw:mb-2">
+                {{ $t("workbench.welcomeScreen.wizard.thatsIt") }}
+              </h2>
+            </div>
+
+            <div class="tw:space-y-6">
+              <div class="tw:bg-gray-50 tw:rounded-lg tw:p-6">
+                <h3
+                  class="tw:text-lg tw:font-semibold tw:text-gray-800 tw:mb-4"
+                >
+                  Summary of your configuration:
+                </h3>
+
+                <div class="tw:space-y-3">
+                  <div
+                    class="tw:flex tw:justify-between tw:items-center tw:py-2 tw:border-b tw:border-gray-200"
+                  >
+                    <span class="tw:text-gray-600">Application Name:</span>
+                    <span class="tw:font-medium tw:text-gray-800">{{
+                      newProject.projectTitle
+                    }}</span>
+                  </div>
+                  <div
+                    class="tw:flex tw:justify-between tw:items-center tw:py-2 tw:border-b tw:border-gray-200"
+                  >
+                    <span class="tw:text-gray-600">Admin Name:</span>
+                    <span class="tw:font-medium tw:text-gray-800"
+                      >{{ newProject.firstname }}
+                      {{ newProject.lastname }}</span
+                    >
+                  </div>
+                  <div
+                    class="tw:flex tw:justify-between tw:items-center tw:py-2 tw:border-b tw:border-gray-200"
+                  >
+                    <span class="tw:text-gray-600">Admin Email:</span>
+                    <span class="tw:font-medium tw:text-gray-800">{{
+                      newProject.email
+                    }}</span>
+                  </div>
+                  <div
+                    class="tw:flex tw:justify-between tw:items-center tw:py-2"
+                  >
+                    <span class="tw:text-gray-600">Password:</span>
+                    <div class="tw:flex tw:items-center tw:space-x-2">
+                      <span class="tw:font-medium tw:text-gray-800">
+                        {{
+                          showConfirmPassword ? newProject.password : "••••••••"
+                        }}
+                      </span>
+                      <button
+                        type="button"
+                        @click="showConfirmPassword = !showConfirmPassword"
+                        class="tw:text-gray-500 hover:tw:text-gray-700 tw:transition-colors"
+                      >
+                        <svg
+                          v-if="showConfirmPassword"
+                          class="tw:w-4 tw:h-4"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L8.464 8.464M9.878 9.878L8.464 11.05M14.12 14.12l1.415 1.415M14.12 14.12L15.536 15.536M14.12 14.12l1.415-1.415M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                          ></path>
+                        </svg>
+                        <svg
+                          v-else
+                          class="tw:w-4 tw:h-4"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                          ></path>
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                          ></path>
+                        </svg>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <v-alert type="info" variant="tonal">
+                <p>
+                  {{ $t("workbench.welcomeScreen.wizard.submitText") }}
+                </p>
+
+                <p>
+                  {{ $t("workbench.welcomeScreen.wizard.loginWithAccount") }}
+                </p>
+              </v-alert>
+            </div>
+          </div>
+        </template>
+      </AppModal>
+    </template>
+  </StepNavigator>
+</template>
+
+<script setup lang="ts">
+import DynamicForm from "@app/components/dynamicForm/DynamicForm.vue"
+import { DynamicFormItem } from "@app/components/dynamicForm/DynamicFormTypes"
+import StepNavigator from "@app/components/stepNavigator/StepNavigator.vue"
+import { Step } from "@app/components/stepNavigator/StepNavigatorTypes"
+import { computed, reactive, ref, useTemplateRef } from "vue"
+import { useI18n } from "vue-i18n"
+import AppModal from "./layout/AppModal.vue"
+import useWelcomeScreen from "../composables/useWelcomeScreen"
+import { userNotifier } from "@raclettejs/core/frontend"
+
+type StepKey = "confirm" | "application-name" | "register-admin"
+const emit = defineEmits<{ finish: [{ email: string; password: string }] }>()
+
+const dynamicFormRef = useTemplateRef("dynamicFormRef")
+
+const { initProject } = useWelcomeScreen()
+
+const { t } = useI18n()
+
+const newProject = reactive({
+  projectTitle: "",
+  email: "",
+  firstname: "",
+  lastname: "",
+  password: "",
+})
+
+const showConfirmPassword = ref(false)
+
+const steps = computed<Step<StepKey>[]>(() => [
+  {
+    id: "application-name",
+    validator: validateConfigStep,
+  },
+  {
+    id: "register-admin",
+    validator: validateConfigStep,
+  },
+  {
+    id: "confirm",
+  },
+])
+
+const validateConfigStep = (): boolean => {
+  const validateAllFields = dynamicFormRef.value?.validateAllFields
+
+  if (validateAllFields) {
+    const isValid = !!validateAllFields()
+
+    return isValid
+  }
+  return true
+}
+
+const inputFieldsStepApplicationName = computed<
+  DynamicFormItem<typeof newProject>[]
+>(() => [
+  {
+    title: t("workbench.welcomeScreen.wizard.projectTitle_title"),
+    description: t("workbench.welcomeScreen.wizard.projectTitle_description"),
+    inputType: "text",
+    field: "projectTitle",
+    validation: {
+      required: true,
+      maxLength: 200,
+    },
+  },
+])
+
+const inputFieldsStepRegisterAdmin = computed<
+  DynamicFormItem<typeof newProject>[]
+>(() => [
+  {
+    title: t("workbench.welcomeScreen.wizard.yourFirstName"),
+    inputType: "text",
+    field: "firstname",
+    validation: {
+      required: true,
+    },
+  },
+  {
+    title: t("workbench.welcomeScreen.wizard.yourLastName"),
+    inputType: "text",
+    field: "lastname",
+    validation: {
+      required: true,
+    },
+  },
+  {
+    title: t("workbench.welcomeScreen.wizard.email_title"),
+    description: t("workbench.welcomeScreen.wizard.email_description"),
+    inputType: "text",
+    field: "email",
+    validation: {
+      required: true,
+    },
+  },
+  {
+    title: t("workbench.welcomeScreen.wizard.password"),
+    inputType: "password",
+    field: "password",
+    validation: {
+      required: true,
+    },
+  },
+])
+
+const getCurrentInputFields = (stepId: string) => {
+  if (stepId === "application-name") {
+    return inputFieldsStepApplicationName.value
+  }
+  if (stepId === "register-admin") {
+    return inputFieldsStepRegisterAdmin.value
+  }
+  if (stepId === "confirm") {
+  }
+}
+
+const onFinish = async () => {
+  try {
+    await initProject({
+      title: newProject.projectTitle,
+      user: {
+        email: newProject.email,
+        password: newProject.password,
+        firstname: newProject.firstname,
+        lastname: newProject.lastname,
+      },
+    })
+    emit("finish", newProject)
+  } catch (error) {
+    console.error(error)
+    userNotifier.add(
+      error.response ? error.response?.data?.error : error.message,
+      "red",
+    )
+  }
+}
+</script>
+
+<style scoped>
+.init-screen-gradient {
+  background: linear-gradient(180deg, #ffeede 0%, #bc9979 100%);
+}
+</style>

package/services/frontend/src/orchestrator/components/LoginScreen.vue

@@ -0,0 +1,73 @@
+<template>
+  <div ref="rootContainer" class="tw:h-full">
+    <AppModal :title="$t('workbench.loginScreen.title')">
+      <v-form ref="formRef" @submit.prevent="onClickSubmit()">
+        <v-text-field
+          v-model="loginData.email"
+          :label="$t('workbench.loginScreen.eMail')"
+          variant="outlined"
+          type="email"
+          :rules="emailRules"
+          required
+          class="tw:mb-4"
+        />
+
+        <v-text-field
+          v-model="loginData.password"
+          :label="$t('workbench.loginScreen.password')"
+          variant="outlined"
+          :type="showPassword ? 'text' : 'password'"
+          :rules="passwordRules"
+          :append-inner-icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'"
+          @click:append-inner="showPassword = !showPassword"
+          required
+          class="tw:mb-4"
+        />
+
+        <AppButton class="tw:w-full" type="submit">
+          {{ $t("workbench.loginScreen.login") }}
+        </AppButton>
+      </v-form>
+    </AppModal>
+
+    <RacletteAdCorner />
+  </div>
+</template>
+
+<script setup lang="ts">
+import AppButton from "./layout/AppButton.vue"
+import { reactive, ref, useTemplateRef } from "vue"
+import AppModal from "./layout/AppModal.vue"
+import useVantaFog from "@app/composables/useVantaFog"
+import RacletteAdCorner from "./RacletteAdCorner.vue"
+
+const emit = defineEmits<{ submit: [{ email: string; password: string }] }>()
+
+const rootContainer = useTemplateRef("rootContainer")
+const formRef = ref()
+const showPassword = ref(false)
+
+useVantaFog(rootContainer)
+
+const loginData = reactive({ email: "", password: "" })
+
+const emailRules = [
+  (v: string) => !!v || "Email is required",
+  (v: string) => /.+@.+\..+/.test(v) || "Email must be valid",
+]
+
+const passwordRules = [
+  (v: string) => !!v || "Password is required",
+  (v: string) => v.length >= 6 || "Password must be at least 6 characters",
+]
+
+const onClickSubmit = async () => {
+  const { valid } = await formRef.value.validate()
+
+  if (!valid) {
+    return
+  }
+
+  emit("submit", loginData)
+}
+</script>