nebula-starter-kit 0.0.1

package/templates/ui/src/components/Login.tsx

@@ -0,0 +1,171 @@
+import React, { useState } from 'react';
+
+import type { AxiosResponse } from 'axios';
+
+import axiosInstance from '../utils/axiosInstance';
+import { validate } from '../utils/util.function';
+import {
+  type Step,
+  type Values,
+  // decrypt,
+} from '../utils/util.type';
+import ErrorMessage from './Error';
+import FormInput from './FormInput';
+import { appServices } from '@/utils/variables';
+import { useAuth } from '@/app/context/AuthContext';
+
+type LoginProps = {
+  onShowSignup: () => void;
+  onSetLoggedIn: () => void;
+  onSetStep: () => void;
+  onFetchRecords: () => void;
+  onForgotPassword: () => void;
+};
+
+const Login: React.FC<LoginProps> = ({
+  onShowSignup,
+  onSetLoggedIn,
+  onSetStep,
+  onFetchRecords,
+  onForgotPassword
+}) => {
+    const { login, isLoggedIn, logout } = useAuth();
+  
+  const [values, setValues] = useState<Values>({
+    email: '',
+    password: '',
+    name: '',
+    confirmationCode: '',
+    score: '',
+  });
+  const [errors, setErrors] = useState<Partial<Values>>({});
+  const [touched, setTouched] = useState<
+    Partial<Record<keyof Values, boolean>>
+  >({});
+  const [loginLoading, setLoginLoading] = useState<boolean>(false);
+  const { email, password } = values;
+
+  const handleChange = (step: Step, field: keyof Values, value: string) => {
+    setValues((prev) => ({ ...prev, [field]: value }));
+    setTouched((prev) => ({ ...prev, [field]: true }));
+    const newErrors = validate(
+      step as any,
+      { ...values, [field]: value },
+      field,
+      value,
+    );
+    // console.log('handleChange', step, field, value, newErrors);
+    setErrors(newErrors);
+  };
+
+  const handleLogin = async () => {
+    try {
+      setErrors({});
+      // console.log('logging in');
+      const newErrors = validate('login', values);
+      // mark all fields as touched
+      setTouched(
+        Object.keys(values).reduce((acc, key) => ({ ...acc, [key]: true }), {}),
+      );
+      if (Object.keys(newErrors).length > 0) {
+        setErrors(newErrors);
+        return;
+      }
+      setLoginLoading(true);
+      const loginResponse: AxiosResponse = await axiosInstance.post(
+        `${appServices}/auth/login`,
+        {
+          email,
+          password,
+        },
+        {
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        },
+      );
+      const userData = loginResponse.data.data;
+      console.log('encrypted', loginResponse.data.data && 'valid');
+      console.log('decrypted', userData && 'valid');
+          // ✅ Persist session
+    localStorage.setItem('email', userData.email);
+    localStorage.setItem('token', userData.token || '');
+
+      // ✅ Update global auth state
+      login(); // from useAuth()
+      onSetLoggedIn();
+      onSetStep();
+      onFetchRecords();
+    } catch (err: any) {
+      console.log(err.message);
+      setLoginLoading(false);
+      setErrors((prev) => ({
+        ...prev,
+        loginError: err.message,
+      }));
+    } finally {
+      setLoginLoading(false);
+    }
+  };
+
+  return (
+    <div>
+      <h2 data-testid="login-header"></h2>
+
+      <FormInput
+        label='Email Address'
+        name="email"
+        type="text"
+        placeholder="email"
+        value={values.email}
+        onChange={(e) => handleChange('login', 'email', e.target.value)}
+        errors={errors}
+        touched={touched}
+      />
+      <FormInput
+        label='Password'
+        name="password"
+        type="password"
+        placeholder="Password"
+        value={values.password}
+        onChange={(e) => handleChange('login', 'password', e.target.value)}
+        errors={errors}
+        touched={touched}
+        allowTogglePassword
+      />
+
+      <p
+        className="text-md text-blue-500 cursor-pointer text-right mb-2"
+        onClick={() => onForgotPassword()}
+      >
+        Forgot Password?
+      </p>
+
+      {loginLoading ? (
+        <div className="spinner">
+          <div></div>
+        </div>
+      ) : (
+        <button
+          data-testid="submit-login-button"
+          className="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition cursor-pointer"
+          onClick={handleLogin}
+        >
+          Login
+        </button>
+      )}
+      <div className="mt-14">
+        Not registered?{' '}
+        <span className="click-link" onClick={onShowSignup}>
+          SignUp
+        </span>
+      </div>
+
+      <div>
+        <ErrorMessage id="login-error" touched message={errors.loginError} />
+      </div>
+    </div>
+  );
+};
+
+export default Login;

package/templates/ui/src/components/Popup.css

@@ -0,0 +1,90 @@
+.popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.popup-content {
+  background: white;
+  padding: 2rem;
+  border-radius: 12px;
+  text-align: center;
+  max-width: 400px;
+  width: 90%;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.popup-content h3 {
+  margin-bottom: 1rem;
+  color: green;
+}
+
+.popup-content button {
+  margin-top: 1rem;
+  padding: 0.5rem 1rem;
+  border: none;
+  background: #007bff;
+  color: white;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.popup-content .delete {
+  margin-top: 1rem;
+  padding: 0.5rem 1rem;
+  border: none;
+  background: #dc3545;
+  color: white;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.popup-content .cancel {
+  margin-top: 1rem;
+  padding: 0.5rem 1rem;
+  border: none;
+  background: #ddd;
+  color: #333;
+  border-radius: 8px;
+  cursor: pointer;
+  margin-right: 20px;
+}
+
+.popup-content .cancel:hover {
+  background: #ddd;
+  color: #000;
+}
+
+.popup-content button:hover {
+  background: #0056b3;
+}
+
+button[disabled] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.spinner {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #007bff;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/templates/ui/src/components/Signup.tsx

@@ -0,0 +1,155 @@
+import { useState } from 'react';
+
+import axiosInstance from '../utils/axiosInstance';
+import { validate } from '../utils/util.function';
+import type { Step, Values } from '../utils/util.type';
+import ErrorMessage from './Error';
+import FormInput from './FormInput';
+import { appServices } from '@/utils/variables';
+
+type SignupProps = {
+  onShowLogin: () => void;
+  onSetSignupSuccess: () => void;
+  onSetStep: () => void;
+};
+
+const Signup: React.FC<SignupProps> = ({
+  onShowLogin,
+  onSetSignupSuccess,
+  onSetStep,
+}) => {
+  const [values, setValues] = useState<Values>({
+    email: '',
+    password: '',
+    name: '',
+    confirmationCode: '',
+  });
+  const [errors, setErrors] = useState<Partial<Values>>({});
+  const [touched, setTouched] = useState<
+    Partial<Record<keyof Values, boolean>>
+  >({});
+  const [signupLoading, setSignupLoading] = useState<boolean>(false);
+  const { email, name, password } = values;
+
+  const handleChange = (step: Step, field: keyof Values, value: string) => {
+    setValues((prev) => ({ ...prev, [field]: value }));
+    setTouched((prev) => ({ ...prev, [field]: true }));
+    const newErrors = validate(
+      step as any,
+      { ...values, [field]: value },
+      field,
+      value,
+    );
+    // console.log('handleChange', step, field, value, newErrors);
+    setErrors(newErrors);
+  };
+
+  const handleSignup = async () => {
+    try {
+      setErrors({});
+      // console.log('signing up');
+      const newErrors = validate('signup', values);
+      // mark all fields as touched
+      setTouched(
+        Object.keys(values).reduce((acc, key) => ({ ...acc, [key]: true }), {}),
+      );
+      if (Object.keys(newErrors).length > 0) {
+        setErrors(newErrors);
+        return;
+      }
+      setSignupLoading(true);
+      localStorage.setItem('email', JSON.stringify(email));
+
+      await axiosInstance.post(
+        `${appServices}/auth/register`,
+        {
+          email,
+          name,
+          password,
+        },
+        {
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        },
+      );
+
+      onSetSignupSuccess();
+      onSetStep();
+    } catch (err: any) {
+      console.log(err.message);
+      setSignupLoading(false);
+      setErrors((prev) => ({
+        ...prev,
+        signupError: err.message,
+      }));
+    } finally {
+      setSignupLoading(false);
+    }
+  };
+
+  return (
+    <div>
+      <h2 data-testid="signup-header"></h2>
+      <FormInput
+        label='Email Address'
+        name="email"
+        type="text"
+        placeholder="Email"
+        value={values.email}
+        onChange={(e) => handleChange('signup', 'email', e.target.value)}
+        errors={errors}
+        touched={touched}
+      />
+      <FormInput
+        label='Name'
+        name="name"
+        type="text"
+        placeholder="Name"
+        value={values.name}
+        onChange={(e) => handleChange('signup', 'name', e.target.value)}
+        errors={errors}
+        touched={touched}
+      />
+      <FormInput
+        label='Password'
+        name="password"
+        type="password"
+        placeholder="Password"
+        value={values.password}
+        onChange={(e) => handleChange('signup', 'password', e.target.value)}
+        errors={errors}
+        touched={touched}
+        allowTogglePassword
+      />
+      <div className="mb-4">
+        {signupLoading ? (
+          <div className="spinner">
+            <div></div>
+          </div>
+        ) : (
+          // <>
+          <button
+            data-testid="submit-signup-button"
+            className="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition cursor-pointer"
+            onClick={handleSignup}
+          >
+            Sign Up
+          </button>
+        )}
+      </div>
+      {/* <div className="mt-14"> */}
+        Already registered?{' '}
+        <span className="click-link" onClick={onShowLogin}>
+          Login
+        </span>
+      {/* </div> */}
+
+      <div>
+        <ErrorMessage id="signup-error" touched message={errors.signupError} />
+      </div>
+    </div>
+  );
+};
+
+export default Signup;

package/templates/ui/src/utils/axiosInstance.ts

@@ -0,0 +1,37 @@
+import axios, { AxiosError } from 'axios';
+import { apiUrl } from './variables';
+
+const baseUrl = apiUrl || 'http://localhost:3001/';
+console.log('baseurl:', baseUrl);
+const axiosInstance = axios.create({
+  baseURL: baseUrl,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+axiosInstance.interceptors.response.use(
+  (response) => response,
+  (error: AxiosError<{ message?: string; details?: string }>) => {
+    let msg = 'Something went wrong';
+
+    if (error.response) {
+      msg =
+        error.response.data?.details ??
+        error.response.data?.message ??
+        error.message;
+
+      console.log('API Error:', msg, error.response);
+    } else if (error.request) {
+      msg = 'No response from server. Please try again.';
+      console.log('No response:', error.request);
+    } else {
+      msg = error.message || msg;
+      console.log('Unexpected:', msg);
+    }
+
+    return Promise.reject({ message: msg, original: error });
+  },
+);
+
+export default axiosInstance;

package/templates/ui/src/utils/axiosRawInstance.ts

@@ -0,0 +1,33 @@
+import axios, { AxiosError } from 'axios';
+
+const axiosRawInstance = axios.create({
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+axiosRawInstance.interceptors.response.use(
+  (response) => response,
+  (error: AxiosError<{ message?: string; details?: string }>) => {
+    let msg = 'Something went wrong';
+
+    if (error.response) {
+      msg =
+        error.response.data?.details ??
+        error.response.data?.message ??
+        error.message;
+
+      console.error('API Error:', msg, error.response);
+    } else if (error.request) {
+      msg = 'No response from server. Please try again.';
+      console.error('No response:', error.request);
+    } else {
+      msg = error.message || msg;
+      console.error('Unexpected:', msg);
+    }
+
+    return Promise.reject({ message: msg, original: error });
+  },
+);
+
+export default axiosRawInstance;

package/templates/ui/src/utils/util.function.ts

@@ -0,0 +1,165 @@
+import { format, formatDistanceToNow, isValid } from 'date-fns';
+import { Mode, Values } from './util.type';
+
+export const phoneRegex = /^(?:\+234|0)[7-9][0-1]\d{8}$/;
+export const emailRegex = /\S+@\S+\.\S+/;
+export const passwordRegex =
+  /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
+
+export type FormValues = {
+  email?: string;
+  name?: string;
+  password?: string;
+  confirmationCode?: string;
+  phone?: string;
+};
+
+export const passwordRules = [
+  {
+    test: (v: string) => /[A-Z]/.test(v),
+    message: 'Password must include an uppercase letter',
+  },
+  {
+    test: (v: string) => /[a-z]/.test(v),
+    message: 'Password must include a lowercase letter',
+  },
+  {
+    test: (v: string) => /\d/.test(v),
+    message: 'Password must include a number',
+  },
+  {
+    test: (v: string) => /[^A-Za-z0-9]/.test(v),
+    message: 'Password must include a special character',
+  },
+  {
+    test: (v: string) => v.length >= 8,
+    message: 'Password must be at least 8 characters',
+  },
+];
+
+function validatePassword(value: string): string | null {
+  if (!value) return 'Password is required';
+
+  for (const rule of passwordRules) {
+    if (!rule.test(value)) {
+      return rule.message; // ⬅️ stops at first unmet requirement
+    }
+  }
+
+  return null; // ✅ all requirements met
+}
+
+export const validate = (
+  type: Mode,
+  values: any,
+  field?: string,
+  currentValue?: string,
+) => {
+  const {
+    email,
+    password,
+    confirmPassword,
+    name,
+    newPassword,
+    lastName,
+    phone,
+  } = values;
+  const newErrors: Record<string, string> = {};
+  const isEmpty = (value?: string) => !value || !value.trim();
+
+  // reset only the field being validated (so old error messages disappear if fixed)
+  if (field) delete newErrors[field];
+
+  // Dynamic lookup: use currentValue if provided, otherwise use state
+  const getValue = (name: string, fallback: string | undefined) =>
+    field === name && currentValue !== undefined ? currentValue : fallback;
+
+  if (type === 'login') {
+    const emailVal = getValue('email', email) ?? '';
+    if ((!field || field === 'email') && isEmpty(emailVal)) {
+      newErrors.email = 'Email is required';
+    } else if ((!field || field === 'email') && !emailRegex.test(emailVal)) {
+      newErrors.email = 'Enter a valid email';
+    }
+
+    const passwordVal = getValue('password', password) ?? '';
+    if (!field || field === 'password') {
+      const error = validatePassword(passwordVal);
+      if (error) {
+        newErrors.password = error;
+      }
+    }
+  }
+
+  if (type === 'forgotPassword') {
+    const emailVal = getValue('email', email) ?? '';
+    if ((!field || field === 'email') && isEmpty(emailVal)) {
+      newErrors.email = 'Email is required';
+    } else if ((!field || field === 'email') && !emailRegex.test(emailVal)) {
+      newErrors.email = 'Enter a valid email';
+    }
+  }
+
+  if (type === 'signup') {
+    const emailVal = getValue('email', email) ?? '';
+    if ((!field || field === 'email') && isEmpty(emailVal)) {
+      newErrors.email = 'Email is required';
+    } else if ((!field || field === 'email') && !emailRegex.test(emailVal)) {
+      newErrors.email = 'Enter a valid email';
+    }
+
+    const nameVal = getValue('name', name);
+    if ((!field || field === 'name') && isEmpty(nameVal))
+      newErrors.name = 'Name is required';
+
+    const passwordVal = getValue('password', password) ?? '';
+    if (!field || field === 'password') {
+      const error = validatePassword(passwordVal);
+      if (error) {
+        newErrors.password = error;
+      }
+    }
+  }
+
+  if (type === 'resetPassword') {
+    const newPasswordVal = getValue('newPassword', newPassword) ?? '';
+    if (!field || field === 'password') {
+      const error = validatePassword(newPasswordVal);
+      if (error) {
+        newErrors.newPassword = error;
+      }
+    }
+
+    const confirmPasswordVal =
+      getValue('confirmPassword', confirmPassword) ?? '';
+    if (
+      (!field || field === 'confirmPassword') &&
+      isEmpty(confirmPasswordVal)
+    ) {
+      newErrors.confirmPassword = 'Confirm Password is required';
+    } else if (
+      (!field || field === 'confirmPassword') &&
+      confirmPasswordVal !== newPasswordVal
+    ) {
+      newErrors.confirmPassword = 'Passwords do not match';
+    }
+  }
+  return newErrors;
+};
+
+export const numberRegex = /^(0|[1-9][0-9]*)$/;
+
+export const timeAgo = (
+  dateInput: string | Date,
+  type: 'full' | 'relative',
+) => {
+  const date = new Date(dateInput);
+
+  if (!isValid(date)) return 'Invalid date';
+
+  if (type === 'full') {
+    return format(date, 'dd MMM yyyy, HH:mm');
+  }
+
+  return formatDistanceToNow(date, { addSuffix: true });
+};