Registration

import { SsoClient, SsoApiError } from '@drmhse/sso-sdk';

const sso = new SsoClient({
  baseURL: 'https://sso.example.com'
});

async function registerUser(email: string, password: string) {
  try {
    const response = await sso.auth.register({
      email: email,
      password: password
    });

    console.log(response.message);
    // "Registration successful. Please check your email to verify your account."
    return true;
  } catch (error) {
    if (error instanceof SsoApiError) {
      console.error('Registration failed:', error.message);
      // Handle specific errors (email already exists, weak password, etc.)
    }
    return false;
  }
}

async function registerUserWithOrgEmail(email: string, password: string) {
  try {
    const response = await sso.auth.register({
      email: email,
      password: password,
      org_slug: 'acme-corp' // Use organization-specific SMTP
    });

    console.log(response.message);
    return true;
  } catch (error) {
    if (error instanceof SsoApiError) {
      console.error('Registration failed:', error.message);
    }
    return false;
  }
}

import { useState } from 'react';
import { SsoClient, SsoApiError } from '@drmhse/sso-sdk';

const sso = new SsoClient({
  baseURL: process.env.REACT_APP_SSO_URL
});

export function RegistrationForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [error, setError] = useState('');
  const [success, setSuccess] = useState(false);
  const [loading, setLoading] = useState(false);

  const validatePassword = (pass: string): string | null => {
    if (pass.length < 8) {
      return 'Password must be at least 8 characters';
    }
    if (!/[A-Z]/.test(pass)) {
      return 'Password must contain at least one uppercase letter';
    }
    if (!/[a-z]/.test(pass)) {
      return 'Password must contain at least one lowercase letter';
    }
    if (!/[0-9]/.test(pass)) {
      return 'Password must contain at least one number';
    }
    return null;
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');

    // Validate password strength
    const passwordError = validatePassword(password);
    if (passwordError) {
      setError(passwordError);
      return;
    }

    // Verify passwords match
    if (password !== confirmPassword) {
      setError('Passwords do not match');
      return;
    }

    setLoading(true);

    try {
      await sso.auth.register({
        email,
        password,
        org_slug: 'acme-corp' // Optional
      });

      setSuccess(true);
    } catch (err) {
      if (err instanceof SsoApiError) {
        if (err.errorCode === 'DUPLICATE_CONSTRAINT') {
          setError('This email is already registered');
        } else {
          setError(err.message);
        }
      } else {
        setError('Registration failed. Please try again.');
      }
    } finally {
      setLoading(false);
    }
  };

  if (success) {
    return (
      <div className="success-message">
        <h2>Registration Successful!</h2>
        <p>Please check your email to verify your account before logging in.</p>
        <p>Check your spam folder if you don't see the email.</p>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit}>
      <h2>Create Account</h2>

      <div className="form-group">
        <label htmlFor="email">Email Address</label>
        <input
          id="email"
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
          placeholder="you@example.com"
        />
      </div>

      <div className="form-group">
        <label htmlFor="password">Password</label>
        <input
          id="password"
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
          placeholder="At least 8 characters"
        />
      </div>

      <div className="form-group">
        <label htmlFor="confirmPassword">Confirm Password</label>
        <input
          id="confirmPassword"
          type="password"
          value={confirmPassword}
          onChange={(e) => setConfirmPassword(e.target.value)}
          required
        />
      </div>

      {error && <div className="error">{error}</div>}

      <button type="submit" disabled={loading}>
        {loading ? 'Creating Account...' : 'Create Account'}
      </button>
    </form>
  );
}