admin info

web/src/i18n/en/index.ts

@@ -37,6 +37,11 @@ const en = {
       submit: 'Submit',
     },
   },
+  components: {
+    adminInfo: {
+      title: 'Your admin',
+    },
+  },
   pages: {
     enrollment: {
       sideBar: {
@@ -66,7 +71,7 @@ In order to gain access to the company infrastructure, we require you to complet
 3. Configurate VPN device
 
 You have a time limit of **{time: string} minutes** to complete this process.
-If you have any questions, please consult your assigned admin.All necessary information can also be found at the bottom of the sidebar.`,
+If you have any questions, please consult your assigned admin.All necessary information can be found at the bottom of the sidebar.`,
         },
         dataVerification: {
           title: 'Data verification',
@@ -258,7 +263,7 @@ If you want to disengage your VPN connection, simply press "deactivate".
           'Sorry, you have exceeded the time limit to complete the process. Please try again. If you need assistance, please watch our guide or contact your administrator.',
       },
       controls: {
-        back: 'Return to services menu',
+        back: 'Enter new token',
         contact: 'Contact admin',
       },
     },

web/src/i18n/i18n-types.ts

@@ -103,6 +103,14 @@ type RootTranslation = {
 			submit: string
 		}
 	}
+	components: {
+		adminInfo: {
+			/**
+			 * Y​o​u​r​ ​a​d​m​i​n
+			 */
+			title: string
+		}
+	}
 	pages: {
 		enrollment: {
 			sideBar: {
@@ -167,7 +175,7 @@ type RootTranslation = {
 				​3​.​ ​C​o​n​f​i​g​u​r​a​t​e​ ​V​P​N​ ​d​e​v​i​c​e​
 				​
 				​Y​o​u​ ​h​a​v​e​ ​a​ ​t​i​m​e​ ​l​i​m​i​t​ ​o​f​ ​*​*​{​t​i​m​e​}​ ​m​i​n​u​t​e​s​*​*​ ​t​o​ ​c​o​m​p​l​e​t​e​ ​t​h​i​s​ ​p​r​o​c​e​s​s​.​
-				​I​f​ ​y​o​u​ ​h​a​v​e​ ​a​n​y​ ​q​u​e​s​t​i​o​n​s​,​ ​p​l​e​a​s​e​ ​c​o​n​s​u​l​t​ ​y​o​u​r​ ​a​s​s​i​g​n​e​d​ ​a​d​m​i​n​.​A​l​l​ ​n​e​c​e​s​s​a​r​y​ ​i​n​f​o​r​m​a​t​i​o​n​ ​c​a​n​ ​a​l​s​o​ ​b​e​ ​f​o​u​n​d​ ​a​t​ ​t​h​e​ ​b​o​t​t​o​m​ ​o​f​ ​t​h​e​ ​s​i​d​e​b​a​r​.
+				​I​f​ ​y​o​u​ ​h​a​v​e​ ​a​n​y​ ​q​u​e​s​t​i​o​n​s​,​ ​p​l​e​a​s​e​ ​c​o​n​s​u​l​t​ ​y​o​u​r​ ​a​s​s​i​g​n​e​d​ ​a​d​m​i​n​.​A​l​l​ ​n​e​c​e​s​s​a​r​y​ ​i​n​f​o​r​m​a​t​i​o​n​ ​c​a​n​ ​b​e​ ​f​o​u​n​d​ ​a​t​ ​t​h​e​ ​b​o​t​t​o​m​ ​o​f​ ​t​h​e​ ​s​i​d​e​b​a​r​.
 					 * @param {string} time
 					 */
 					explanation: RequiredParams<'time'>
@@ -512,7 +520,7 @@ type RootTranslation = {
 			}
 			controls: {
 				/**
-				 * R​e​t​u​r​n​ ​t​o​ ​s​e​r​v​i​c​e​s​ ​m​e​n​u
+				 * E​n​t​e​r​ ​n​e​w​ ​t​o​k​e​n
 				 */
 				back: string
 				/**
@@ -651,6 +659,14 @@ export type TranslationFunctions = {
 			submit: () => LocalizedString
 		}
 	}
+	components: {
+		adminInfo: {
+			/**
+			 * Your admin
+			 */
+			title: () => LocalizedString
+		}
+	}
 	pages: {
 		enrollment: {
 			sideBar: {
@@ -714,7 +730,7 @@ export type TranslationFunctions = {
 				3. Configurate VPN device
 			
 				You have a time limit of **{time} minutes** to complete this process.
-				If you have any questions, please consult your assigned admin.All necessary information can also be found at the bottom of the sidebar.
+				If you have any questions, please consult your assigned admin.All necessary information can be found at the bottom of the sidebar.
 					 */
 					explanation: (arg: { time: string }) => LocalizedString
 				}
@@ -1057,7 +1073,7 @@ export type TranslationFunctions = {
 			}
 			controls: {
 				/**
-				 * Return to services menu
+				 * Enter new token
 				 */
 				back: () => LocalizedString
 				/**

web/src/pages/enrollment/EnrollmentPage.tsx

@@ -59,7 +59,6 @@ export const EnrollmentPage = () => {
       const diff = endDay.diff(dayjs(), 'millisecond');
       if (diff > 0) {
         const timeout = setTimeout(() => {
-          reset();
           navigate(routes.timeout, { replace: true });
         }, diff);
         return () => {

web/src/pages/enrollment/components/AdminInfo/AdminInfo.tsx

@@ -0,0 +1,20 @@
+import './style.scss';
+
+import { useI18nContext } from '../../../../i18n/i18n-react';
+import { useEnrollmentStore } from '../../hooks/store/useEnrollmentStore';
+
+export const AdminInfo = () => {
+  const { LL } = useI18nContext();
+  const adminInfo = useEnrollmentStore((state) => state.adminInfo);
+
+  if (!adminInfo) return null;
+
+  return (
+    <div className="admin-info">
+      <p className="title">{LL.components.adminInfo.title()}:</p>
+      <p>{adminInfo.name}</p>
+      {adminInfo.phone_number && <p>{adminInfo.phone_number}</p>}
+      <p>{adminInfo.email}</p>
+    </div>
+  );
+};

web/src/pages/enrollment/components/AdminInfo/style.scss

@@ -0,0 +1,11 @@
+@use '@scssutils' as *;
+
+.admin-info {
+  width: 100%;
+
+  & > p {
+    @include typography(app-welcome-2);
+
+    color: var(--text-body-primary);
+  }
+}

web/src/pages/enrollment/components/EnrollmentSideBar/EnrollmentSideBar.tsx

@@ -7,6 +7,7 @@ import { LocalizedString } from 'typesafe-i18n';
 import { useI18nContext } from '../../../../i18n/i18n-react';
 import { Divider } from '../../../../shared/components/layout/Divider/Divider';
 import { useEnrollmentStore } from '../../hooks/store/useEnrollmentStore';
+import { AdminInfo } from '../AdminInfo/AdminInfo';
 import { TimeLeft } from '../TimeLeft/TimeLeft';
 
 export const EnrollmentSideBar = () => {
@@ -36,8 +37,15 @@ export const EnrollmentSideBar = () => {
       </div>
       <TimeLeft />
       <Divider />
+      <AdminInfo />
+      <Divider />
       <div className="copyright">
-        <p>Copyright © 2023 teonite</p>
+        <p>
+          Copyright © 2023{' '}
+          <a href="https://teonite.com" target="_blank" rel="noopener noreferrer">
+            teonite
+          </a>
+        </p>
         <p>{LL.pages.enrollment.sideBar.appVersion()}: 0.4.1</p>
       </div>
     </div>

web/src/pages/enrollment/components/EnrollmentSideBar/style.scss

@@ -50,6 +50,24 @@
     }
   }
 
+  & > .admin-info {
+    box-sizing: border-box;
+    padding: 20px 10px 20px 40px;
+    & > p {
+      @include typography(app-body-2);
+      @include text-overflow-dots;
+
+      max-width: 100%;
+      color: var(--text-body-tertiary);
+      user-select: text;
+    }
+
+    & > .title {
+      color: var(--text-body-primary);
+      user-select: none;
+    }
+  }
+
   & > .steps {
     display: flex;
     flex-flow: column;
@@ -77,8 +95,7 @@
       transition-timing-function: ease-in-out;
       transition-duration: 250ms;
 
-      &.active,
-      &:hover {
+      &.active {
         color: var(--text-body-primary);
       }
 
@@ -129,6 +146,13 @@
       text-align: center;
       color: var(--text-body-tertiary);
       width: 100%;
+
+      a {
+        @include typography(app-copyright);
+
+        color: var(--text-body-tertiary);
+        text-decoration-color: var(--text-body-tertiary);
+      }
     }
   }
 }

web/src/pages/enrollment/steps/WelcomeStep/WelcomeStep.tsx

@@ -8,6 +8,7 @@ import { shallow } from 'zustand/shallow';
 
 import { useI18nContext } from '../../../../i18n/i18n-react';
 import { Card } from '../../../../shared/components/layout/Card/Card';
+import { AdminInfo } from '../../components/AdminInfo/AdminInfo';
 import { EnrollmentStepIndicator } from '../../components/EnrollmentStepIndicator/EnrollmentStepIndicator';
 import { useEnrollmentStore } from '../../hooks/store/useEnrollmentStore';
 
@@ -54,6 +55,7 @@ export const WelcomeStep = () => {
         <div className="explenation">
           <ReactMarkdown rehypePlugins={[rehypeSanitaze]}>{markdown}</ReactMarkdown>
         </div>
+        <AdminInfo />
       </Card>
     </>
   );

web/src/pages/enrollment/steps/WelcomeStep/style.scss

@@ -8,10 +8,13 @@
     max-width: 650px;
 
     & > h3 {
+      user-select: none;
       margin-bottom: 30px;
     }
 
     & > .explenation {
+      user-select: none;
+      margin-bottom: 30px;
       p,
       ul,
       ol,
@@ -25,5 +28,17 @@
         color: var(--text-body-primary);
       }
     }
+
+    & > .admin-info {
+      user-select: text;
+      & > p {
+        &:not(.title) {
+          font-weight: 700;
+        }
+      }
+      & > .title {
+        user-select: none;
+      }
+    }
   }
 }

web/src/pages/enrollment/style.scss

@@ -18,6 +18,7 @@
         color: var(--text-body-primary);
         width: 100%;
         text-align: left;
+        user-select: none;
       }
     }
 

web/src/pages/sessionTimeout/SessionTimeoutPage.tsx

@@ -1,5 +1,6 @@
 import './style.scss';
 
+import { isUndefined } from 'lodash-es';
 import { useNavigate } from 'react-router-dom';
 import { useBreakpoint } from 'use-breakpoint';
 
@@ -19,8 +20,10 @@ import { Card } from '../../shared/components/layout/Card/Card';
 import { PageContainer } from '../../shared/components/layout/PageContainer/PageContainer';
 import { deviceBreakpoints } from '../../shared/constants';
 import { routes } from '../../shared/routes';
+import { useEnrollmentStore } from '../enrollment/hooks/store/useEnrollmentStore';
 
 export const SessionTimeoutPage = () => {
+  const adminInfo = useEnrollmentStore((state) => state.adminInfo);
   const { breakpoint } = useBreakpoint(deviceBreakpoints);
   const { LL } = useI18nContext();
   const navigate = useNavigate();
@@ -49,6 +52,12 @@ export const SessionTimeoutPage = () => {
           size={ButtonSize.LARGE}
           styleVariant={ButtonStyleVariant.PRIMARY}
           text={LL.pages.sessionTimeout.controls.contact()}
+          disabled={isUndefined(adminInfo?.email)}
+          onClick={() => {
+            if (adminInfo?.email) {
+              window.location.href = `mailto:${adminInfo.email}`;
+            }
+          }}
         />
       </div>
     </PageContainer>