logto-io · charIeszhao · Oct 23, 2024 · Oct 21, 2024 · Oct 22, 2024 · Oct 23, 2024
diff --git a/packages/sign-up-with-password/.eslintrc.cjs b/packages/sign-up-with-password/.eslintrc.cjs
@@ -0,0 +1,24 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  extends: '@silverhand/eslint-config',
+  rules: {
+    'jsx-a11y/no-autofocus': 'off',
+    'unicorn/prefer-string-replace-all': 'off',
+    'no-restricted-syntax': 'off',
+    '@silverhand/fp/no-mutation': 'off',
+  },
+  overrides: [
+    {
+      files: ['*.config.js', '*.config.ts', '*.d.ts'],
+      rules: {
+        'import/no-unused-modules': 'off',
+      },
+    },
+    {
+      files: ['*.d.ts'],
+      rules: {
+        'import/no-unassigned-import': 'off',
+      },
+    },
+  ],
+};
diff --git a/packages/sign-up-with-password/favicon.ico b/packages/sign-up-with-password/favicon.ico
diff --git a/packages/sign-up-with-password/index.html b/packages/sign-up-with-password/index.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Logto experience sample</title>
+    <link rel="icon" href="./favicon.ico" />
+    <script type="module" src="src/index.ts"></script>
+  </head>
+
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div class="app">
+      <form>
+        <img fetchpriority="high" class="logo" src="https://logto.io/logo.svg" alt="Logto branding logo" />
+        <div class="input-field">
+          <label for="username">Username</label>
+          <input type="text" name="username" required />
+        </div>
+        <div class="input-field">
+          <label for="password">Password</label>
+          <input type="password" name="password" required />
+        </div>
+        <div class="input-field">
+          <label for="confirm-password">Confirm password</label>
+          <input type="password" name="confirm-password" required />
+        </div>
+        <button class="submit-button" type="submit">
+          <span>Register</span>
+          <div class="spinner"></div>
+        </button>
+      </form>
+      <div class="error-message hidden"></div>
+    </div>
+  </body>
+</html>
diff --git a/packages/sign-up-with-password/package.json b/packages/sign-up-with-password/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@logto/experience-sample-password-sign-up",
+  "description": "A sample project demonstrates how to use Logto Experience API to build a identifier & password sign-up page.",
+  "author": "Silverhand Inc. <contact@silverhand.io>",
+  "license": "MIT",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "precommit": "lint-staged",
+    "start": "vite",
+    "dev": "logto-tunnel --verbose & vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint --ext .ts src",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@logto/experience-sample-shared": "workspace:^",
+    "@logto/schemas": "^1.19.0",
+    "@silverhand/eslint-config": "^6.0.1",
+    "@silverhand/ts-config": "^6.0.0",
+    "eslint": "^8.56.0",
+    "lint-staged": "^15.0.0",
+    "prettier": "^3.0.0",
+    "stylelint": "^15.0.0",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.0"
+  },
+  "stylelint": {
+    "extends": "@silverhand/eslint-config/.stylelintrc"
+  },
+  "prettier": "@silverhand/eslint-config/.prettierrc"
+}
diff --git a/packages/sign-up-with-password/src/include.d/vite-env.d.ts b/packages/sign-up-with-password/src/include.d/vite-env.d.ts
@@ -0,0 +1 @@
+import 'vite/client';
diff --git a/packages/sign-up-with-password/src/index.ts b/packages/sign-up-with-password/src/index.ts
@@ -0,0 +1,64 @@
+import { Api } from '@logto/experience-sample-shared/api';
+import { clearError, handleError, setSubmitLoading } from '@logto/experience-sample-shared/utils';
+import { InteractionEvent } from '@logto/schemas';
+
+import '@logto/experience-sample-shared/scss/normalized.scss';
+
+const api = new Api({ baseUrl: window.location.origin });
+
+window.addEventListener('load', () => {
+  const form = document.querySelector('form');
+
+  form?.addEventListener('submit', async (event) => {
+    event.preventDefault();
+    setSubmitLoading(true);
+    clearError();
+
+    try {
+      const formData = new FormData(form);
+      const username = formData.get('username')?.toString();
+      const password = formData.get('password')?.toString();
+      const confirmPassword = formData.get('confirm-password')?.toString();
+
+      if (!username || !password) {
+        throw new Error('Username and password are required.');
+      }
+
+      if (password !== confirmPassword) {
+        throw new Error('Passwords do not match.');
+      }
+
+      /**
+       * Step 1: Initialize a register type interaction.
+       */
+      await api.experience.initInteraction({ interactionEvent: InteractionEvent.Register });
+
+      /**
+       * Step 2: Ensure the username is not already taken.
+       */
+      await api.experience.addUserProfile({ type: 'username', value: username });
+
+      /**
+       * Step 3: Continue registering with password.
+       */
+      await api.experience.addUserProfile({ type: 'password', value: password });
+
+      /**
+       * Step 4: Identify the user.
+       *
+       * Note: Unlike registering with verification code or social, register with identifier and password
+       * does not require a verification step in prior, but the identification step is still required.
+       */
+      await api.experience.identifyUser({});
+
+      /**
+       * Step 5: Submit the interaction and redirect back to your app after the interaction is completed.
+       */
+      const { redirectTo } = await api.experience.submitInteraction();
+      window.location.replace(redirectTo);
+    } catch (error) {
+      handleError(error);
+      setSubmitLoading(false);
+    }
+  });
+});
diff --git a/packages/sign-up-with-password/tsconfig.json b/packages/sign-up-with-password/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "@silverhand/ts-config/tsconfig.base",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "dist",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml