keystroke authentication ui front end

package.json

@@ -10,11 +10,16 @@
     "@types/node": "^16.18.8",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
+    "axios": "^1.3.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^8.0.5",
     "react-router-dom": "^6.4.5",
     "react-scripts": "5.0.1",
     "recharts": "^2.2.0",
+    "redux": "^4.2.1",
+    "redux-persist": "^6.0.0",
+    "redux-saga": "^1.2.2",
     "typescript": "^4.9.4",
     "web-vitals": "^2.1.4"
   },
@@ -44,5 +49,6 @@
   },
   "devDependencies": {
     "sass": "^1.56.2"
-  }
+  },
+  "proxy": "http://localhost:5000"
 }

src/App.tsx

 import React from "react";
 import { Routes, BrowserRouter as Router, Route } from "react-router-dom";
 
-import SignUp from "./components/SignUp";
-import Login from "./components/Login";
+import Landing from "./views/Landing.view";
+import Home from "./views/Home.view";
+import Settings from "./views/Settings.view";
+
+import AppState from "./components/AppState";
 
 import "./app.scss";
+import "./components.scss";
+import ProtectedRoutes from "./components/ProtectedRoute";
 
 function App() {
   return (
     <Router>
       <Routes>
-        <Route path="/" element={<SignUp />} />
-        <Route path="/login" element={<Login />} />
+        <Route path="/" element={<Landing />} />
+        <Route element={<ProtectedRoutes />}>
+          <Route path="/home" element={<Home />} />
+          <Route path="/settings" element={<Settings />} />
+        </Route>
       </Routes>
+      <AppState />
     </Router>
   );
 }

src/app.scss

@@ -5,3 +5,28 @@ body {
 p {
   margin: 0;
 }
+
+.landing {
+  background: rgb(131, 58, 180);
+  background: linear-gradient(
+    160deg,
+    rgba(131, 58, 180, 1) 0%,
+    rgba(143, 244, 241, 1) 0%,
+    rgba(119, 122, 255, 1) 100%
+  );
+}
+
+.navbar {
+  background-color: #5b8ddf;
+  .collapse {
+    img {
+      height: 35px;
+      width: 35px;
+      border-radius: 35px;
+    }
+
+    .dropdown-toggle::after {
+      display: none;
+    }
+  }
+}

src/common/actions/auth.ts

+import { ACTIONS } from ".";
+import { ControlsType, Reducers, UpdatePasswordPayload } from "../types";
+
+export const setAppState = (payload: Reducers["auth"]["appState"]) => ({
+  type: ACTIONS.SET_APP_STATE,
+  payload,
+});
+
+export const updateKeystrokeSettings = (payload: ControlsType) => ({
+  type: ACTIONS.UPDATE_KEYSTROKE_SETTINGS,
+  payload,
+});
+
+export const changePassword = (payload: UpdatePasswordPayload) => ({
+  type: ACTIONS.CHANGE_PASSWORD,
+  payload,
+});

src/common/actions/index.ts

+export enum ACTIONS {
+  SET_AUTH = "SET_AUTH",
+  SIGN_OUT_USER = "SIGN_OUT_USER",
+  UPDATE_KEYSTROKE_SETTINGS = "UPDATE_KEYSTROKE_SETTINGS",
+  CHANGE_PASSWORD = "CHANGE_PASSWORD",
+
+  SET_APP_STATE = "SET_APP_STATE",
+}

src/common/apis/auth.ts

+import { request } from "../lib/api";
+import {
+  SignUpPayload,
+  SignInPayload,
+  ControlsType,
+  UpdatePasswordPayload,
+} from "../types";
+
+export default class AuthAPI {
+  static signup = (payload: SignUpPayload) =>
+    request("<BASE_URL>/auth/signup", "POST", payload, true);
+
+  static signin = (payload: SignInPayload) =>
+    request("<BASE_URL>/auth/login", "POST", payload, true);
+
+  static updateControls = (payload: ControlsType) =>
+    request("<BASE_URL>/auth/update", "POST", payload);
+
+  static updatePassword = (payload: UpdatePasswordPayload) =>
+    request("<BASE_URL>/auth/change-pwd", "POST", payload);
+}

src/common/config.ts

+export const BASE_URL = "http://localhost:5000";
+export const DEFAULT_CONTROLS = {
+  standard: {
+    sd: 1.5,
+    threshold: 65,
+    use: true,
+  },
+  fullStandard: {
+    threshold: 1,
+    use: true,
+  },
+};

src/common/lib/api.ts

+import axios, { AxiosError, AxiosResponse, AxiosRequestConfig } from "axios";
+
+import { BASE_URL } from "../config";
+import { logger } from "./util";
+import { store } from "../../store";
+
+const getToken = () => {
+  const token = store.getState().auth.token;
+  return token;
+};
+
+axios.interceptors.response.use(
+  (response) => response,
+  (error: AxiosError) => {
+    return Promise.reject(error);
+  }
+);
+
+export const request = (
+  url: AxiosRequestConfig["url"],
+  method: AxiosRequestConfig["method"],
+  requestData?: AxiosRequestConfig["data"] | AxiosRequestConfig["params"],
+  isGuest?: boolean,
+  contentType?: string
+) =>
+  new Promise(async (resolve, reject) => {
+    const endpoint = url?.replace?.("<BASE_URL>", BASE_URL);
+
+    const params = method === "GET" ? requestData : null;
+    const data = method === "GET" ? null : requestData;
+
+    const auth_token = !isGuest ? await getToken() : null;
+    const headers = {
+      auth_token,
+      "Content-Type": contentType || "application/json",
+    };
+
+    logger("REQUEST: ", method, endpoint, headers, requestData);
+
+    axios({
+      url: endpoint,
+      method,
+      data,
+      params,
+      headers,
+      timeout: 30000,
+    })
+      .then(async (response: AxiosResponse) => {
+        logger("RESPONSE: ", response);
+        resolve(response.data);
+      })
+      .catch(async (error: AxiosError) => {
+        if (error?.response) {
+          logger("ERROR RESPONSE: ", error?.response);
+          return reject(error?.response?.data);
+        } else if (error?.request) {
+          logger("NO RESPONSE: ", error?.request);
+        } else {
+          logger("SETUP ISSUE: ", error?.message);
+        }
+        reject(error);
+      });
+  });

src/util/keystrokeLogger.ts → src/common/lib/util.ts

+export const logger = (log: any, ...optionalparams: any[]) => {
+  console.log(log, ...optionalparams);
+};
+
 // 16 - Shift
 // 17 - Ctrl
 // 18 - Alt

src/common/reducers/auth.ts

+import { ACTIONS } from "../actions/index";
+import { AuthReducer, USER_TYPE } from "../types";
+
+const INITIAL_STATE: AuthReducer = {
+  token: null,
+  candidate: {},
+  organization: {},
+  userType: USER_TYPE.CANDIDATE,
+  userId: "",
+  appState: null,
+};
+
+const authReducer = (
+  state = INITIAL_STATE,
+  { type, payload }: { type: ACTIONS; payload: any }
+): AuthReducer => {
+  switch (type) {
+    case ACTIONS.SET_AUTH:
+      return { ...state, ...(payload as AuthReducer) };
+
+    case ACTIONS.SET_APP_STATE:
+      return { ...state, appState: payload };
+
+    case ACTIONS.SIGN_OUT_USER:
+      return { ...state, token: null };
+
+    default:
+      return state;
+  }
+};
+
+export default authReducer;

src/common/reducers/root.ts

+import { combineReducers } from "redux";
+import { persistReducer } from "redux-persist";
+import storage from "redux-persist/lib/storage";
+
+import authReducer from "../reducers/auth";
+
+const AuthPersistConfig = {
+  storage,
+  key: "auth",
+};
+
+export default combineReducers({
+  auth: persistReducer(AuthPersistConfig, authReducer),
+});

src/common/saga/auth.ts

+import { takeLeading, call, put, select } from "redux-saga/effects";
+import { ACTIONS } from "../actions";
+import AuthAPI from "../apis/auth";
+import {
+  APP_STATE,
+  ControlsType,
+  KeystrokeResultType,
+  Reducers,
+  UpdatePasswordPayload,
+} from "../types";
+
+function* updateKeystrokeSettings({
+  payload,
+}: {
+  type: typeof ACTIONS.UPDATE_KEYSTROKE_SETTINGS;
+  payload: ControlsType;
+}) {
+  try {
+    yield put({
+      type: ACTIONS.SET_APP_STATE,
+      payload: { state: APP_STATE.LOADING },
+    });
+    yield call(AuthAPI.updateControls, payload);
+    const keystrokeResult: KeystrokeResultType = yield select(
+      (state: Reducers) => state.auth.keystrokeResult
+    );
+    yield put({
+      type: ACTIONS.SET_AUTH,
+      payload: { keystrokeResult: { ...keystrokeResult, controls: payload } },
+    });
+    yield put({
+      type: ACTIONS.SET_APP_STATE,
+      payload: { state: APP_STATE.SUCCESS },
+    });
+  } catch (error) {
+    yield put({
+      type: ACTIONS.SET_APP_STATE,
+      payload: { state: APP_STATE.FAILED, msg: error },
+    });
+  }
+}
+
+function* changePassword({
+  payload,
+}: {
+  type: typeof ACTIONS.CHANGE_PASSWORD;
+  payload: UpdatePasswordPayload;
+}) {
+  try {
+    yield put({
+      type: ACTIONS.SET_APP_STATE,
+      payload: { state: APP_STATE.LOADING },
+    });
+    yield call(AuthAPI.updatePassword, payload);
+    yield put({
+      type: ACTIONS.SET_APP_STATE,
+      payload: { state: APP_STATE.SUCCESS },
+    });
+  } catch (error) {
+    yield put({
+      type: ACTIONS.SET_APP_STATE,
+      payload: { state: APP_STATE.FAILED, msg: error },
+    });
+  }
+}
+
+export default function* authSaga() {
+  yield takeLeading(ACTIONS.UPDATE_KEYSTROKE_SETTINGS, updateKeystrokeSettings);
+  yield takeLeading(ACTIONS.CHANGE_PASSWORD, changePassword);
+}

src/common/saga/root.ts

+import { all } from "redux-saga/effects";
+
+import Auth from "./auth";
+
+export default function* rootSaga() {
+  yield all([Auth()]);
+}

src/util/types.ts → src/common/types.ts

+export enum USER_TYPE {
+  ORGANIZATION = "ORGANIZATION",
+  CANDIDATE = "CANDIDATE",
+}
+
+export enum APP_STATE {
+  LOADING = "loading",
+  FAILED = "failed",
+  SUCCESS = "success",
+}
+
 export type KeyDetails = {
   key: any;
   code: any;
@@ -55,9 +66,100 @@ export type KeystrokeType = {
   full: number[];
 };
 
-export type Result = {
+export type KeystrokeResultType = {
   attempt: KeystrokeType;
   db: KeystrokeType;
   filteredDb: KeystrokeType;
   result: Stat | null;
+  controls: ControlsType;
+};
+
+export type AddressType = {
+  addressLine: string;
+  city: string;
+  country: string;
+};
+
+export type CandidateType = {
+  _id?: string;
+  name: string;
+  bio: string;
+  contacts: {
+    email: string;
+    phone: string;
+    address: AddressType;
+    residentialAddress?: AddressType;
+  };
+  dateOfBirth: string;
+  jobIds: string[];
+  profilePicture: string;
+};
+
+export type OrganizationType = {
+  _id?: string;
+  name: string;
+  description: string;
+  contacts: {
+    email: string;
+    phone: string[];
+    address: AddressType;
+    website: string;
+  };
+  profilePicture: string;
+};
+
+export type ControlsType = {
+  standard: {
+    sd: number;
+    threshold: number;
+    use: boolean;
+  };
+  fullStandard: {
+    threshold: number;
+    use: boolean;
+  };
+};
+
+//PAYLOADS
+export type SignUpPayload = {
+  passwords: string[];
+  keydown: KeyDetails[][];
+  keyup: KeyDetails[][];
+  email: string;
+  userType: USER_TYPE;
+  candidate?: CandidateType | {};
+  organization?: OrganizationType | {};
+};
+
+export type SignInPayload = {
+  password: string;
+  keydown: KeyDetails[];
+  keyup: KeyDetails[];
+  email: string;
+  userType: USER_TYPE;
+};
+
+export type UpdatePasswordPayload = {
+  passwords: string[];
+  keydown: KeyDetails[][];
+  keyup: KeyDetails[][];
+  oldPassword: string;
+};
+
+//REDUCERS
+export type AuthReducer = {
+  token: string | null;
+  candidate: CandidateType | {};
+  organization: OrganizationType | {};
+  userType: USER_TYPE;
+  userId: string;
+  keystrokeResult?: KeystrokeResultType;
+  appState?: {
+    state: APP_STATE;
+    msg?: string;
+  } | null;
+};
+
+export type Reducers = {
+  auth: AuthReducer;
 };

src/components.scss

+.card {
+  border: none;
+  box-shadow: 0 0 20px 0 rgb(86 153 196 / 15%);
+  border-radius: 15px;
+}
+
+.onboard {
+  width: 400px;
+  float: right;
+  margin-top: 100px;
+
+  .usertype-selector {
+    margin-top: -10px;
+    margin-bottom: 15px;
+    .btn {
+      border-radius: 0;
+      border-width: 0 0 2px 0;
+      background-color: white;
+      font-weight: 500;
+      color: #0d6efd;
+      border-bottom-color: #0d6efd;
+
+      &.deactive {
+        color: #d9d9d9;
+        border-bottom-color: #d9d9d9;
+      }
+    }
+  }
+
+  section {
+    margin-top: 10px;
+    .btn {
+      padding: 0;
+      margin-left: 10px;
+      font-size: 16px;
+      margin-bottom: 4px;
+    }
+  }
+}
+
+.avatar {
+  background-color: #8eb4f2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  margin: auto;
+
+  &.lg {
+    height: 100px;
+    width: 100px;
+    border-radius: 100px;
+    font-size: 60px;
+  }
+
+  &.sm {
+    height: 35px;
+    width: 35px;
+    border-radius: 35px;
+    font-size: 20px;
+  }
+}
+
+.alert {
+  button {
+    &:active,
+    &:focus {
+      border: none;
+      outline: none;
+      box-shadow: none;
+    }
+  }
+}
+
+.keystrokes {
+  .keystrokes-settings {
+    margin-bottom: 10px;
+    .form-switch {
+      margin-top: 5px;
+      margin-bottom: 5px;
+      .form-check-label {
+        font-weight: 500;
+      }
+    }
+  }
+}
+
+.appstate {
+  padding: 10px 20px;
+  background-color: red;
+  max-width: 350px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(83, 83, 83, 0.662);
+  position: fixed;
+  width: 350px;
+  bottom: 30px;
+  right: 30px;
+
+  section {
+    p {
+      font-weight: bold;
+    }
+  }
+
+  &.failed {
+    background: rgb(131, 58, 180);
+    background: linear-gradient(
+      153deg,
+      rgba(131, 58, 180, 1) 0%,
+      rgba(255, 71, 71, 1) 0%,
+      rgba(255, 155, 119, 1) 100%
+    );
+  }
+
+  &.success {
+    background: rgb(131, 58, 180);
+    background: linear-gradient(
+      153deg,
+      rgba(131, 58, 180, 1) 0%,
+      rgba(46, 197, 198, 1) 0%,
+      rgba(216, 255, 134, 1) 100%
+    );
+  }
+
+  &.loading {
+    background: rgb(131, 58, 180);
+    background: linear-gradient(
+      153deg,
+      rgba(131, 58, 180, 1) 0%,
+      rgba(189, 189, 189, 1) 0%,
+      rgba(134, 188, 255, 1) 100%
+    );
+  }
+}

src/components/Alert.tsx

+import React from "react";
+
+type OwnProps = {
+  alert?: string | null;
+  setAlert: (value: string | null) => void;
+};
+
+const Alert = ({ alert, setAlert }: OwnProps) => {
+  const onClose = () => setAlert(null);
+  if (!alert) return null;
+  return (
+    <div className="alert alert-warning alert-dismissible fade show mt-3">
+      {alert}
+      <button type="button" className="btn-close" onClick={onClose}></button>
+    </div>
+  );
+};
+
+export default Alert;

src/components/AppState.tsx

+import React, { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { setAppState } from "../common/actions/auth";
+import { APP_STATE, Reducers } from "../common/types";
+
+const AppState = () => {
+  const dispatch = useDispatch();
+  const appState = useSelector((state: Reducers) => state.auth.appState);
+
+  useEffect(() => {
+    if (appState?.state !== APP_STATE.LOADING) {
+      setTimeout(() => {
+        dispatch(setAppState(null));
+      }, 5000);
+    }
+  }, [appState?.state, dispatch]);
+
+  if (!appState) return null;
+
+  const state =
+    appState.state === APP_STATE.LOADING
+      ? "Loading..."
+      : appState.state === APP_STATE.FAILED
+      ? "Failed"
+      : "Success";
+
+  return (
+    <div className={`appstate ${appState?.state}`}>
+      <section>
+        <p>{state}</p>
+      </section>
+      <p>{appState?.msg}</p>
+    </div>
+  );
+};
+
+export default AppState;

src/components/Avatar.tsx

+import React from "react";
+
+const Avatar = ({
+  url,
+  name,
+  size = "sm",
+}: {
+  url?: string;
+  name: string;
+  size?: "sm" | "md" | "lg";
+}) => {
+  if (url) return <img src={url} alt={name} className={`avatar img ${size}`} />;
+  return <div className={`avatar ${size}`}>{name[0]}</div>;
+};
+
+export default Avatar;

src/components/ChangePassword.tsx

+import React, { useRef, useEffect, useState } from "react";
+import { KeyDetails, UpdatePasswordPayload } from "../common/types";
+import Alert from "../components/Alert";
+import { keyEvent } from "../common/lib/util";
+import { useDispatch } from "react-redux";
+import { changePassword } from "../common/actions/auth";
+
+const ChangePassword = () => {
+  const dispatch = useDispatch();
+  const keydownArray = useRef<KeyDetails[][]>([]);
+  const keyupArray = useRef<KeyDetails[][]>([]);
+  const keyCount = useRef<number[]>([]);
+  const [alert, setAlert] = useState<string | null>(null);
+  const [credentials, setCredentials] = useState({
+    oldPassword: "",
+    password: "",
+    confrimPassword: "",
+    twoFAPassword: "",
+  });
+
+  useEffect(() => {
+    resetData();
+  }, []);
+
+  const resetData = () => {
+    for (let i = 0; i < 3; i++) {
+      keydownArray.current.push([]);
+      keyupArray.current.push([]);
+      keyCount.current.push(0);
+    }
+  };
+
+  const onChangeCredentials = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setCredentials({ ...credentials, [e.target.name]: e.target.value });
+  };
+
+  const clearField = (index: number) => {
+    if (index === 0) {
+      setCredentials({ ...credentials, password: "" });
+    } else if (index === 1) {
+      setCredentials({ ...credentials, confrimPassword: "" });
+    } else {
+      setCredentials({ ...credentials, twoFAPassword: "" });
+    }
+
+    keydownArray.current[index] = [];
+    keyupArray.current[index] = [];
+    keyCount.current[index] = 0;
+  };
+
+  const onKeyDown = (e: any) => {
+    const field = e.target.id;
+    const index = Number(field.substr(field.length - 1));
+
+    let details = keyEvent(e);
+    if (!details) return;
+
+    if (
+      ["Backspace"].includes(details.code) ||
+      ["Backspace"].includes(details.code)
+    ) {
+      return clearField(index);
+    }
+
+    if (
+      ["Tab", "NumpadEnter"].includes(details.code) ||
+      ["Tab"].includes(details.key)
+    ) {
+      details = {
+        ...details,
+        code: "Enter",
+        key: "Enter",
+      };
+    }
+
+    keydownArray.current[index].push(details);
+    keyupArray.current[index].push({ ...details, time: null });
+    keyCount.current[index]++;
+  };
+
+  const onKeyUp = (e: any) => {
+    const field = e.target.id;
+    const index = Number(field.substr(field.length - 1));
+
+    let details = keyEvent(e);
+    if (!details) return;
+    if (!details.time) details.time = Date.now();
+
+    if (
+      ["Backspace"].includes(details.code) ||
+      ["Backspace"].includes(details.code)
+    ) {
+      return clearField(index);
+    }
+
+    if (
+      ["Tab", "NumpadEnter"].includes(details.code) ||
+      ["Tab"].includes(details.key)
+    ) {
+      details = {
+        ...details,
+        code: "Enter",
+        key: "Enter",
+      };
+    }
+
+    let reqdUpKeystroke = keyupArray.current[index].find(
+      (element) => element.code === details?.code && !element.time
+    );
+
+    if (reqdUpKeystroke) reqdUpKeystroke.time = details.time;
+  };
+
+  const onSumit = () => {
+    setAlert(null);
+    if (credentials.password !== credentials.confrimPassword) {
+      return setAlert("Passwords do not match");
+    }
+
+    const payload: UpdatePasswordPayload = {
+      oldPassword: credentials.oldPassword,
+      passwords: [
+        credentials.password,
+        credentials.confrimPassword,
+        credentials.twoFAPassword,
+      ],
+      keydown: keydownArray.current,
+      keyup: keyupArray.current,
+    };
+
+    resetData();
+
+    dispatch(changePassword(payload));
+  };
+
+  return (
+    <div className="card p-4">
+      <h5>Change password</h5>
+      <div className="mb-3 row">
+        <label className="col-sm-3 col-form-label">Old password</label>
+        <div className="col-sm-5">
+          <input
+            type="password"
+            className="form-control"
+            name="oldPassword"
+            onChange={onChangeCredentials}
+            onKeyDown={onKeyDown}
+            onKeyUp={onKeyUp}
+          />
+        </div>
+      </div>
+      <div className="mb-3 row">
+        <label className="col-sm-3 col-form-label">New password</label>
+        <div className="col-sm-5">
+          <input
+            type="password"
+            className="form-control"
+            name="password"
+            onChange={onChangeCredentials}
+            onKeyDown={onKeyDown}
+            onKeyUp={onKeyUp}
+          />
+        </div>
+      </div>
+      <div className="mb-3 row">
+        <label className="col-sm-3 col-form-label">Confirm new password</label>
+        <div className="col-sm-5">
+          <input
+            type="password"
+            className="form-control"
+            name="confrimPassword"
+            onChange={onChangeCredentials}
+            onKeyDown={onKeyDown}
+            onKeyUp={onKeyUp}
+          />
+        </div>
+      </div>
+      <div className="mb-3 row">
+        <label className="col-sm-3 col-form-label">2FA confirm password</label>
+        <div className="col-sm-5">
+          <input
+            type="password"
+            className="form-control"
+            name="twoFAPassword"
+            onChange={onChangeCredentials}
+            onKeyDown={onKeyDown}
+            onKeyUp={onKeyUp}
+          />
+        </div>
+      </div>
+
+      <button
+        type="button"
+        className="btn btn-primary"
+        style={{ margin: "auto", width: "300px" }}
+        onClick={onSumit}
+      >
+        Save Password
+      </button>
+      <Alert alert={alert} setAlert={setAlert} />
+    </div>
+  );
+};
+
+export default ChangePassword;

src/components/Charts.tsx

@@ -16,8 +16,8 @@ const Charts = ({ real, attempts, title }: DataType) => {
   }));
 
   return (
-    <div className="mt-5">
-      <h4>{title}</h4>
+    <div className="mt-2">
+      <h6>{title}</h6>
       <ResponsiveContainer height={280} width="100%">
         <AreaChart data={data}>
           <Tooltip />

src/components/Keystrokeresults.tsx

+import React from "react";
+import { useSelector } from "react-redux";
+import { Reducers } from "../common/types";
+import Charts from "./Charts";
+import ResultTable from "./ResultTable";
+
+const KeystrokeResults = () => {
+  const keystrokeResult = useSelector(
+    (state: Reducers) => state.auth.keystrokeResult
+  );
+
+  return (
+    <div className="container">
+      <div className="row mt-5">
+        <div className="col-lg">
+          <ResultTable data={keystrokeResult?.result} />
+        </div>
+      </div>
+      <div className="row  mt-5 ">
+        <Charts
+          title="Overall keystroke"
+          real={keystrokeResult?.db.full}
+          attempts={keystrokeResult?.attempt.full}
+        />
+      </div>
+      <div className="row">
+        <Charts
+          title="DD keystroke"
+          real={keystrokeResult?.db.dd}
+          attempts={keystrokeResult?.attempt.dd}
+        />
+        <Charts
+          title="Hold keystroke"
+          real={keystrokeResult?.db.hold}
+          attempts={keystrokeResult?.attempt.hold}
+        />
+        <Charts
+          title="Flight keystroke"
+          real={keystrokeResult?.db.flight}
+          attempts={keystrokeResult?.attempt.flight}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default KeystrokeResults;

src/components/Layout.tsx

+import React from "react";
+
+import NavBar from "./NavBar";
+
+type OwnProps = {
+  title: string;
+  children?: JSX.Element | JSX.Element[];
+};
+
+const Layout = ({ title, children }: OwnProps) => {
+  return (
+    <>
+      <NavBar />
+      <div className="container pb-5">
+        <h4 className="mb-3">{title}</h4>
+        {children}
+      </div>
+    </>
+  );
+};
+
+export default Layout;

src/components/Login.tsx

-import React, { useState, useRef, useEffect } from "react";
-import { initialiseControls } from "../util/controls";
-import { keyEvent } from "../util/keystrokeLogger";
-import { KeyDetails, Result } from "../util/types";
-import Charts from "./Charts";
-import ResultTable from "./ResultTable";
-
-const controls = {
-  standard: {
-    sd: 1.5,
-    threshold: 65,
-    use: true,
-  },
-  fullStandard: {
-    threshold: 1,
-    use: true,
-  },
+import React, { useState, useRef } from "react";
+import { useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import { ACTIONS } from "../common/actions";
+import AuthAPI from "../common/apis/auth";
+import { keyEvent } from "../common/lib/util";
+import { KeyDetails, SignInPayload, USER_TYPE } from "../common/types";
+
+type OwnProps = {
+  setAlert: (alert: string) => void;
+  userType: USER_TYPE;
 };
 
-const Login = () => {
+const Login = ({ userType, setAlert }: OwnProps) => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
   const [credentials, setCredentials] = useState({
-    userName: "",
+    email: "",
     password: "",
   });
 
-  const [result, setResult] = useState<Result | null>(null);
-
   const keyCount = useRef<number>(0);
   const keydownArray = useRef<KeyDetails[]>([]);
   const keyupArray = useRef<KeyDetails[]>([]);
@@ -33,10 +27,6 @@ const Login = () => {
     setCredentials({ ...credentials, [e.target.name]: e.target.value });
   };
 
-  useEffect(() => {
-    initialiseControls(controls);
-  }, []);
-
   const clearData = () => {
     setCredentials({ ...credentials, password: "" });
     keyCount.current = 0;
@@ -45,29 +35,29 @@ const Login = () => {
   };
 
   const submit = () => {
-    const data = {
-      username: credentials.userName,
+    const data: SignInPayload = {
+      email: credentials.email,
       password: credentials.password,
       keydown: keydownArray.current,
       keyup: keyupArray.current,
-      controls,
+      userType,
     };
     clearData();
 
-    fetch("http://localhost:3001/user/login", {
-      method: "POST",
-      mode: "cors",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(data),
-    }).then(async (res) => {
-      let response: Result = await res.json();
-      if (res.ok) {
-        setResult(response);
-      } else {
-        console.log(response);
+    AuthAPI.signin(data)
+      .then((res: any) => {
+        if (res.success) {
+          const payload = {
+            ...res,
+            organization: userType === USER_TYPE.ORGANIZATION ? res.user : {},
+            candidate: userType === USER_TYPE.CANDIDATE ? res.user : {},
+          };
+          dispatch({ type: ACTIONS.SET_AUTH, payload });
+          navigate("/home");
         }
+      })
+      .catch((_) => {
+        setAlert("Attempt failed! Try again");
       });
   };
 
@@ -108,23 +98,20 @@ const Login = () => {
     if (details.code === "Enter") submit();
   };
 
-  const disable = credentials.userName === "" || credentials.password === "";
+  const disable = credentials.email === "" || credentials.password === "";
 
   return (
-    <div className="container">
-      <div className="row mt-5">
-        <div className="col-lg-4">
-          <div className="card card-body pt-4 pb-4">
-            <h5 className="card-title">Login</h5>
+    <>
+      <h5 className="card-title">Sign in</h5>
       <div className="mb-3">
         <label htmlFor="exampleFormControlInput1" className="form-label">
-                User name
+          Email
         </label>
         <input
           className="form-control"
-                type="text"
+          type="email"
           aria-label=".form-control-lg example"
-                name="userName"
+          name="email"
           onChange={onChangeCredentials}
         />
       </div>
@@ -152,37 +139,7 @@ const Login = () => {
       >
         Login
       </button>
-          </div>
-        </div>
-        <div className="col-lg">
-          <ResultTable data={result?.result} />
-        </div>
-      </div>
-      <div className="row  mt-5 ">
-        <Charts
-          title="Overall keystroke"
-          real={result?.db.full}
-          attempts={result?.attempt.full}
-        />
-      </div>
-      <div className="row">
-        <Charts
-          title="DD keystroke"
-          real={result?.db.dd}
-          attempts={result?.attempt.dd}
-        />
-        <Charts
-          title="Hold keystroke"
-          real={result?.db.hold}
-          attempts={result?.attempt.hold}
-        />
-        <Charts
-          title="Flight keystroke"
-          real={result?.db.flight}
-          attempts={result?.attempt.flight}
-        />
-      </div>
-    </div>
+    </>
   );
 };
 

src/components/NavBar.tsx

+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from "react";
+import { useDispatch } from "react-redux";
+import { ACTIONS } from "../common/actions";
+import Avatar from "./Avatar";
+
+const NavBar = () => {
+  const dispatch = useDispatch();
+
+  const onClickLogout = () => dispatch({ type: ACTIONS.SIGN_OUT_USER });
+
+  return (
+    <nav className="navbar navbar-expand-lg navbar-dark mb-3">
+      <div className="container">
+        <a className="navbar-brand" href="/home">
+          Smart Recruite
+        </a>
+        <button
+          className="navbar-toggler"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#navbarSupportedContent"
+          aria-controls="navbarSupportedContent"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+        >
+          <span className="navbar-toggler-icon"></span>
+        </button>
+        <div className="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul className="navbar-nav me-auto mb-2 mb-lg-0">
+            <li className="nav-item">
+              <a className="nav-link" href="/">
+                Link
+              </a>
+            </li>
+          </ul>
+          <nav className="nav-item dropdown">
+            <a
+              className="nav-link dropdown-toggle"
+              href="/"
+              role="button"
+              data-bs-toggle="dropdown"
+              aria-expanded="false"
+            >
+              <Avatar name="Hashan" size="sm" />
+            </a>
+            <ul className="dropdown-menu">
+              <li>
+                <a className="dropdown-item" href="/">
+                  Action
+                </a>
+              </li>
+              <li>
+                <a className="dropdown-item" href="/settings">
+                  Settings
+                </a>
+              </li>
+              <li>
+                <hr className="dropdown-divider" />
+              </li>
+              <li>
+                <a className="dropdown-item" onClick={onClickLogout}>
+                  Logout
+                </a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default NavBar;

src/components/ProtectedRoute.tsx

+import { useSelector } from "react-redux";
+import { Navigate, Outlet } from "react-router-dom";
+
+import { Reducers } from "../common/types";
+
+export default function ProtectedRoutes() {
+  const auth = useSelector((state: Reducers) => state.auth?.token);
+  if (auth) return <Outlet />;
+  return <Navigate to="/" />;
+}

src/components/ResultTable.tsx

 import React from "react";
-import { Stat } from "../util/types";
+import { Stat } from "../common/types";
 
 const ResultTable = ({ data }: { data?: Stat | null }) => {
   if (!data) return null;
@@ -9,7 +9,7 @@ const ResultTable = ({ data }: { data?: Stat | null }) => {
         <tr>
           <th></th>
           <th>Standard</th>
-          <th>Standard (Full)</th>
+          <th>Advance (Full)</th>
         </tr>
       </thead>
       <tbody>

src/components/SignUp.tsx

 import React, { useState, useRef, useEffect } from "react";
-import { keyEvent } from "../util/keystrokeLogger";
-import { KeyDetails } from "../util/types";
+import AuthAPI from "../common/apis/auth";
+import { keyEvent } from "../common/lib/util";
+import { KeyDetails, SignUpPayload, USER_TYPE } from "../common/types";
 
-const SignUp = () => {
-  const [alert, setAlert] = useState<string | null>(null);
+type OwnProps = {
+  setAlert: (alert: string) => void;
+  userType: USER_TYPE;
+  setForm: (form: "sign-in" | "sign-up") => void;
+};
+
+const SignUp = ({ userType, setAlert, setForm }: OwnProps) => {
   const [is2FAenabled, setis2FAenabled] = useState<boolean>(false);
   const [credentials, setCredentials] = useState({
-    userName: "",
+    name: "",
+    email: "",
     password: "",
     confrimPassword: "",
     twoFAPassword: "",
@@ -38,8 +45,12 @@ const SignUp = () => {
       return setAlert("Passwords do not match");
     }
 
-    const data = {
-      username: credentials.userName,
+    if (!/^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/.test(credentials.email)) {
+      return setAlert("Invalid email address");
+    }
+
+    const payload: SignUpPayload = {
+      email: credentials.email,
       passwords: [
         credentials.password,
         credentials.confrimPassword,
@@ -47,27 +58,28 @@ const SignUp = () => {
       ],
       keydown: keydownArray.current,
       keyup: keyupArray.current,
+      userType,
+      candidate:
+        userType === USER_TYPE.CANDIDATE
+          ? { name: credentials.name, contacts: { email: credentials.email } }
+          : undefined,
+      organization:
+        userType === USER_TYPE.ORGANIZATION
+          ? { name: credentials.name, contacts: { email: credentials.email } }
+          : undefined,
     };
 
-    console.log("DATA ", data);
-
     resetData();
 
-    fetch("http://localhost:3001/user/signup", {
-      method: "POST",
-      mode: "cors",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(data),
-    }).then(async (res) => {
-      const response = await res.json();
-
-      if (response.success) {
-        setAlert(`${response.username} signed up successfully`);
-      } else {
-        setAlert(response.msg);
+    AuthAPI.signup(payload)
+      .then((res: any) => {
+        if (res.success) {
+          setForm("sign-in");
+          setAlert("Successfully signed up. Please login");
         }
+      })
+      .catch((error) => {
+        setAlert(error.msg);
       });
   };
 
@@ -146,48 +158,43 @@ const SignUp = () => {
     );
 
     if (reqdUpKeystroke) reqdUpKeystroke.time = details.time;
-
-    if (index === 2) {
-      onSumit();
-    }
   };
 
   const disableSubmit =
-    credentials.userName === "" || credentials.password === "" || !is2FAenabled;
+    credentials.email === "" ||
+    credentials.password === "" ||
+    !is2FAenabled ||
+    credentials.name === "";
 
-  const renderAlert = alert && (
-    <div
-      className="alert alert-warning alert-dismissible fade show mt-3"
-      role="alert"
-    >
-      {alert}
-      <button
-        type="button"
-        className="btn-close"
-        data-bs-dismiss="alert"
-        aria-label="Close"
-        onClick={() => setAlert(null)}
-      ></button>
-    </div>
-  );
+  const nameLabel =
+    userType === USER_TYPE.CANDIDATE ? "User name" : "Organization name";
 
   return (
-    <div className="container">
-      <div className=" row">
-        <div className="col-lg"></div>
-        <div className="col-lg">
-          <div className="card card-body mt-5 pt-4 pb-4">
-            <h5 className="card-title">SignUp</h5>
+    <>
+      <h5 className="card-title">Sign up</h5>
       <div className="mb-3">
         <label htmlFor="exampleFormControlInput1" className="form-label">
-                User name
+          {nameLabel}
         </label>
         <input
           className="form-control"
           type="text"
           aria-label=".form-control-lg example"
           onChange={onChangeCredentials}
-                name="userName"
+          name="name"
+        />
+      </div>
+
+      <div className="mb-3">
+        <label htmlFor="exampleFormControlInput1" className="form-label">
+          Email
+        </label>
+        <input
+          className="form-control"
+          type="email"
+          aria-label=".form-control-lg example"
+          onChange={onChangeCredentials}
+          name="email"
         />
       </div>
 
@@ -239,10 +246,7 @@ const SignUp = () => {
       </div>
       {is2FAenabled && (
         <div className="mb-3">
-                <label
-                  htmlFor="exampleFormControlInput1"
-                  className="form-label"
-                >
+          <label htmlFor="exampleFormControlInput1" className="form-label">
             Enter your password again
           </label>
           <input
@@ -266,12 +270,7 @@ const SignUp = () => {
       >
         Sign up
       </button>
-            {renderAlert}
-          </div>
-        </div>
-        <div className="col-lg"></div>
-      </div>
-    </div>
+    </>
   );
 };
 

src/index.tsx

 import React from "react";
+import { Provider } from "react-redux";
+import { PersistGate } from "redux-persist/integration/react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
+import { store, persistor } from "./store";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
 root.render(
   <React.StrictMode>
+    <Provider store={store}>
+      <PersistGate persistor={persistor}>
         <App />
+      </PersistGate>
+    </Provider>
   </React.StrictMode>
 );

src/react-app-env.d.ts

 /// <reference types="react-scripts" />
+/// <reference types="redux-persist" />

src/store.ts

+import { createStore, applyMiddleware, Store } from "redux";
+import { persistStore } from "redux-persist";
+
+import createSagaMiddleware from "redux-saga";
+import rootReducer from "./common/reducers/root";
+import rootSaga from "./common/saga/root";
+
+const sagaMiddleware = createSagaMiddleware();
+
+const store: Store = createStore(
+  rootReducer,
+  {},
+  applyMiddleware(sagaMiddleware)
+);
+
+sagaMiddleware.run(rootSaga);
+
+const persistor = persistStore(store);
+
+export { store, persistor };

src/util/controls.ts

-/* eslint-disable array-callback-return */
-export function initialiseControls(controls: any) {
-  Object.keys(controls).map((detector) => {
-    if (!(detector in controls)) return null;
-
-    Object.keys(controls[detector]).map((controlType) => {
-      if (!(controlType in controls[detector])) return;
-
-      if (controlType === "checkbox") {
-        const controlId = `${detector}_${controlType}`;
-        const labelId = `${detector}_${controlType}_label`;
-        controls[detector][controlType] = document.getElementById(controlId);
-        controls[detector].label[controlType] =
-          document.getElementById(labelId);
-        return;
-      }
-
-      if (controlType === "slider") {
-        Object.keys(controls[detector][controlType]).map((sliderType) => {
-          if (!(sliderType in controls[detector][controlType])) return;
-
-          const controlId = `${detector}_${controlType}_${sliderType}`;
-          const labelId = `${controlId}_label`;
-
-          const slider: any = document.getElementById(controlId);
-          const label = document.getElementById(labelId);
-          if (label && slider) {
-            label.innerHTML = slider.value;
-            slider.oninput = () => {
-              label.innerHTML = slider.value;
-            };
-          }
-
-          controls[detector][controlType][sliderType] = slider;
-          controls[detector].label[sliderType] = label;
-        });
-        return;
-      }
-    });
-  });
-}

src/views/Home.view.tsx

+import React from "react";
+import NavBar from "../components/NavBar";
+
+const Home = () => {
+  return (
+    <div>
+      <NavBar />
+    </div>
+  );
+};
+
+export default Home;

src/views/Landing.view.tsx

+import React, { useState } from "react";
+import Login from "../components/Login";
+
+import SignUp from "../components/SignUp";
+import COVER from "../res/cover.svg";
+import { USER_TYPE } from "../common/types";
+import Alert from "../components/Alert";
+
+const Landing = () => {
+  const [alert, setAlert] = useState<string | null>(null);
+  const [userType, setUserType] = useState<USER_TYPE>(USER_TYPE.CANDIDATE);
+  const [form, setForm] = useState<"sign-in" | "sign-up">("sign-up");
+
+  const setCandidate = () => setUserType(USER_TYPE.CANDIDATE);
+  const setOrganization = () => setUserType(USER_TYPE.ORGANIZATION);
+
+  const candidateClassName =
+    userType === USER_TYPE.CANDIDATE ? "btn" : "btn deactive";
+
+  const organizationClassName =
+    userType === USER_TYPE.ORGANIZATION ? "btn active" : "btn deactive";
+
+  const renderForm =
+    form === "sign-up" ? (
+      <>
+        <SignUp userType={userType} setAlert={setAlert} setForm={setForm} />
+        <section>
+          <p>
+            Already have an account?
+            <button
+              type="button"
+              className="btn btn-link"
+              onClick={() => setForm("sign-in")}
+            >
+              Sing in
+            </button>
+          </p>
+        </section>
+      </>
+    ) : (
+      <>
+        <Login userType={userType} setAlert={setAlert} />
+        <section>
+          <p>
+            New to Smart Recruiter?
+            <button
+              type="button"
+              className="btn btn-link"
+              onClick={() => setForm("sign-up")}
+            >
+              Sing up
+            </button>
+          </p>
+        </section>
+      </>
+    );
+
+  return (
+    <div className="landing">
+      <div className="container">
+        <div className="row">
+          <div className="col-6  mt-5">
+            <img src={COVER} alt="cover" />
+          </div>
+          <div className="col-6">
+            <div className="card card-body onboard p-4">
+              <div className="usertype-selector btn-group" role="group">
+                <button
+                  type="button"
+                  className={candidateClassName}
+                  onClick={setCandidate}
+                >
+                  Candidate
+                </button>
+                <button
+                  type="button"
+                  className={organizationClassName}
+                  onClick={setOrganization}
+                >
+                  Organization
+                </button>
+              </div>
+
+              {renderForm}
+              <Alert alert={alert} setAlert={setAlert} />
+            </div>
+          </div>
+        </div>
+        <div className="row" style={{ paddingBottom: "100px" }}>
+          <h1 className="display-6">Smart Recruiter </h1>
+          <p className="lead">
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. At quae
+            saepe temporibus recusandae illo ex in voluptatibus assumenda
+            delectus sunt autem culpa ratione, ipsa totam magni ducimus eaque
+            quisquam. Harum!
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Landing;

src/views/Settings.view.tsx

+import React, { ChangeEvent, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { updateKeystrokeSettings } from "../common/actions/auth";
+import { DEFAULT_CONTROLS } from "../common/config";
+import { ControlsType, Reducers } from "../common/types";
+import Avatar from "../components/Avatar";
+import ChangePassword from "../components/ChangePassword";
+import Charts from "../components/Charts";
+import Layout from "../components/Layout";
+import ResultTable from "../components/ResultTable";
+
+const Settings = () => {
+  const dispatch = useDispatch();
+  const keystrokeResult = useSelector(
+    (state: Reducers) => state.auth.keystrokeResult
+  );
+  const [controls, setControls] = useState(
+    keystrokeResult?.controls || DEFAULT_CONTROLS
+  );
+
+  const onToggleStandard = () =>
+    setControls({
+      ...controls,
+      standard: { ...controls.standard, use: !controls.standard.use },
+    });
+
+  const onToggleAdvance = () =>
+    setControls({
+      ...controls,
+      fullStandard: {
+        ...controls.fullStandard,
+        use: !controls.fullStandard.use,
+      },
+    });
+
+  const onChangeKeystroke = (e: ChangeEvent<HTMLInputElement>) => {
+    const [level, key] = e.target.name.split(".");
+    const attr = controls[level as keyof ControlsType];
+
+    setControls({
+      ...controls,
+      [level]: {
+        ...attr,
+        [key]: Number(e.target.value),
+      },
+    });
+  };
+
+  const onClickUpdateControls = () => {
+    dispatch(updateKeystrokeSettings(controls));
+  };
+
+  return (
+    <Layout title="Profile and Settings">
+      <div className="row">
+        <div className="col-8">
+          <div className="card p-4 mb-3">
+            <div className="mb-3 row">
+              <div className="col-sm-3">
+                <Avatar name="Hashan" size="lg" />
+              </div>
+              <div className="col-sm-9 ">
+                <input
+                  className="form-control"
+                  type="text"
+                  placeholder="Default input"
+                  aria-label="default input example"
+                />
+              </div>
+            </div>
+          </div>
+          <ChangePassword />
+        </div>
+        <div className="col-4">
+          <div className="card p-4 keystrokes">
+            <h5>Keystroke-dynamics Settings</h5>
+            <div className="keystrokes-settings">
+              <div className="form-check form-switch">
+                <label className="form-check-label">Standard Settings</label>
+                <input
+                  className="form-check-input"
+                  type="checkbox"
+                  role="switch"
+                  checked={controls.standard.use}
+                  onChange={onToggleStandard}
+                />
+              </div>
+              <label htmlFor="customRange2" className="form-label">
+                SD Multiplier : {controls.standard.sd}
+              </label>
+              <input
+                type="range"
+                className="form-range"
+                min="0"
+                max="2.5"
+                step="0.1"
+                value={controls.standard.sd}
+                name="standard.sd"
+                onChange={onChangeKeystroke}
+              />
+              <label htmlFor="customRange2" className="form-label">
+                Threshold : {controls.standard.threshold}
+              </label>
+              <input
+                type="range"
+                className="form-range"
+                min="1"
+                max="100"
+                value={controls.standard.threshold}
+                name="standard.threshold"
+                onChange={onChangeKeystroke}
+              />
+            </div>
+
+            <div className="keystrokes-settings">
+              <div className="form-check form-switch">
+                <label className="form-check-label">Advance Settings</label>
+                <input
+                  className="form-check-input"
+                  type="checkbox"
+                  role="switch"
+                  checked={controls.fullStandard.use}
+                  onChange={onToggleAdvance}
+                />
+              </div>
+              <label htmlFor="customRange2" className="form-label">
+                Threshold : {controls.fullStandard.threshold}
+              </label>
+              <input
+                type="range"
+                className="form-range"
+                min="0"
+                max="2"
+                step="0.1"
+                value={controls.fullStandard.threshold}
+                name="fullStandard.threshold"
+                onChange={onChangeKeystroke}
+              />
+            </div>
+
+            <button
+              type="button"
+              className="btn btn-primary"
+              onClick={onClickUpdateControls}
+            >
+              Update
+            </button>
+
+            <hr />
+            <h5>Last Login</h5>
+            <ResultTable data={keystrokeResult?.result} />
+            <Charts
+              title="Overall keystroke"
+              real={keystrokeResult?.db.full}
+              attempts={keystrokeResult?.attempt.full}
+            />
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default Settings;

tsconfig.json

 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -20,7 +16,5 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }