Merge pull request #306 from STEM-C/feature/forget-password

Feature/forget password
STEM-C · Oct 13, 2021 · 06eff6b · 06eff6b
2 parents 1c90db2 + 0b10fad
commit 06eff6b
Show file tree

Hide file tree

Showing 17 changed files with 904 additions and 393 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -17,6 +17,8 @@ import TeacherLogin from './views/TeacherLogin/TeacherLogin';
 import ContentCreator from './views/ContentCreator/ContentCreator';
 import UnitCreator from './views/ContentCreator/UnitCreator/UnitCreator';
 import UploadBlocks from './views/UploadBlocks/UploadBlocks';
+import ForgetPassword from './views/TeacherLogin/ForgetPassword';
+import ResetPassword from './views/TeacherLogin/ResetPassword';
 
 const App = () => {
   let history = useHistory();
@@ -37,6 +39,12 @@ const App = () => {
         <Route exact path='/teacherlogin'>
           <TeacherLogin history={history} />
         </Route>
+        <Route exact path='/forgot-password'>
+          <ForgetPassword />
+        </Route>
+        <Route exact path='/reset-password'>
+          <ResetPassword />
+        </Route>
         <Route exact path='/login'>
           <StudentLogin history={history} />
         </Route>

diff --git a/client/src/Utils/requests.js b/client/src/Utils/requests.js
@@ -432,3 +432,26 @@ export const getDay = async (id) =>
     auth: true,
     error: 'Day cannot be retrived',
   });
+
+export const forgetPassword = async (email) =>
+  makeRequest({
+    method: POST,
+    path: `${server}/auth/forgot-password`,
+    data: {
+      email,
+    },
+    error: 'cannot retrive data from the provided email',
+  });
+
+export const resetPassword = async (code, password, passwordConfirmation) =>
+  makeRequest({
+    method: POST,
+    path: `${server}/auth/reset-password`,
+    data: {
+      code,
+      password,
+      passwordConfirmation,
+    },
+    error:
+      'Cannot update new password. Please try again or get a new link from the forgot password page.',
+  });
diff --git a/client/src/components/DayPanels/BlocklyCanvasPanel/ArduinoLogo.js b/client/src/components/DayPanels/BlocklyCanvasPanel/ArduinoLogo.js
@@ -0,0 +1,97 @@
+import React from 'react';
+
+const ArduinoLogo = ({ setHoverCompile, handleCompile }) => {
+  return (
+    <div>
+      <svg
+        version='1.0'
+        xmlns='http://www.w3.org/2000/svg'
+        width='450.000000pt'
+        height='450.000000pt'
+        viewBox='0 0 450.000000 450.000000'
+        preserveAspectRatio='xMidYMid meet'
+        onMouseEnter={() => setHoverCompile(true)}
+        onMouseLeave={() => setHoverCompile(false)}
+        onClick={handleCompile}
+      >
+        <metadata>
+          Created by potrace 1.10, written by Peter Selinger 2001-2011
+        </metadata>
+        <g
+          transform='translate(0.000000,512.000000) scale(0.100000,-0.100000)'
+          fill='#000000'
+          stroke='#3D5C82'
+        >
+          <path
+            d='M448 4552 c-15 -2 -37 -15 -48 -29 -19 -24 -20 -40 -20 -250 l0 -224
+25 -25 c14 -14 25 -27 25 -29 0 -3 -84 -5 -186 -5 l-186 0 -29 -29 -29 -29 0
+-312 0 -312 29 -29 29 -29 192 0 192 0 -31 -29 -31 -29 0 -414 c0 -403 1 -415
+20 -436 12 -12 26 -22 32 -22 6 0 8 -3 5 -7 -4 -3 -46 -8 -93 -9 -161 -6 -154
+12 -154 -379 l0 -307 29 -29 c28 -28 33 -29 124 -29 l95 0 -29 -29 -29 -29 0
+-131 c0 -122 1 -132 24 -157 l23 -28 1864 0 c1025 -1 1890 1 1922 5 58 5 59 6
+158 105 55 54 107 111 115 126 12 23 14 175 14 995 -1 741 -4 973 -13 989 -7
+11 -49 53 -94 93 l-83 72 0 465 0 465 -25 24 c-13 14 -34 25 -47 26 -73 2
+-3768 3 -3790 1z m3682 -632 c3 -245 7 -445 8 -446 1 -1 40 -34 87 -75 l85
+-74 0 -915 0 -914 -62 -63 -62 -63 -1813 0 -1813 0 0 66 c0 61 -2 68 -31 95
+l-31 29 284 0 284 0 27 28 27 28 0 313 c0 194 -4 320 -10 331 -21 39 -46 43
+-275 42 -121 -1 -245 1 -276 4 l-56 6 29 28 28 28 0 402 c0 418 -1 428 -44
+462 -20 17 -13 18 171 18 188 0 192 0 220 24 l28 24 0 322 0 322 -28 24 c-28
+23 -32 24 -213 24 -173 0 -207 5 -170 27 30 18 36 53 36 202 l0 151 1783 -2
+1782 -3 5 -445z m-3380 -300 l0 -190 -280 0 -280 0 0 190 0 190 280 0 280 0 0
+-190z m188 -1687 l-3 -188 -280 0 -280 0 -3 175 c-1 96 0 180 2 187 4 10 67
+13 286 13 l280 0 -2 -187z'
+            stroke-width='100'
+          />
+          <path
+            d='M1698 3979 c-124 -29 -237 -124 -296 -247 -36 -76 -37 -79 -37 -197
+0 -116 1 -123 33 -187 87 -177 264 -281 450 -264 155 14 260 70 398 212 l100
+104 69 -80 c116 -136 212 -196 362 -227 328 -67 621 240 538 562 -33 125 -133
+242 -255 298 -84 39 -202 48 -300 22 -118 -31 -195 -78 -309 -193 l-103 -104
+-112 110 c-123 121 -176 156 -275 184 -70 19 -197 23 -263 7z m265 -207 c47
+-23 88 -57 155 -126 51 -52 92 -101 92 -108 0 -7 -42 -56 -93 -109 -115 -118
+-174 -150 -289 -157 -69 -4 -84 -2 -133 22 -169 83 -206 303 -72 434 90 89
+216 105 340 44z m996 21 c152 -49 227 -224 156 -368 -71 -147 -238 -196 -398
+-117 -52 26 -85 53 -149 123 -46 49 -83 96 -83 103 0 23 134 165 191 203 57
+38 151 72 200 72 18 1 55 -7 83 -16z'
+          />
+          <path
+            d='M1744 3610 c-31 -12 -54 -49 -54 -88 0 -43 37 -82 82 -83 28 -2 207
+-1 231 1 4 0 19 11 32 25 36 35 34 88 -4 126 -29 29 -30 29 -148 28 -65 0
+-128 -4 -139 -9z'
+            stroke-width='100'
+          />
+          <path
+            d='M2749 3681 c-16 -16 -29 -37 -29 -45 0 -9 -7 -16 -16 -16 -30 0 -74
+-56 -74 -93 0 -41 30 -82 65 -91 14 -4 25 -13 25 -22 0 -27 56 -74 88 -74 36
+0 89 41 94 72 2 15 13 24 35 30 32 8 63 49 63 82 0 32 -26 68 -62 87 -21 11
+-38 26 -38 35 0 8 -11 26 -25 39 -35 36 -88 34 -126 -4z'
+            stroke-width='100'
+          />
+          <path
+            d='M2107 2669 c-26 -15 -46 -68 -40 -102 3 -15 19 -38 35 -52 l30 -25
+-102 0 c-94 0 -103 -2 -125 -25 l-25 -24 0 -225 c0 -223 0 -225 24 -253 23
+-26 30 -28 123 -33 56 -3 90 -8 80 -12 -24 -10 -47 -69 -40 -99 17 -72 100
+-94 154 -40 20 20 29 39 29 61 0 22 -9 41 -29 61 l-29 29 153 0 153 0 -29 -29
+c-32 -33 -37 -67 -14 -110 16 -33 33 -41 81 -41 78 0 115 102 58 155 l-27 25
+151 0 151 0 -24 -25 c-36 -35 -35 -105 1 -134 41 -33 96 -28 128 10 35 41 34
+83 -3 120 l-29 29 153 0 153 0 -29 -29 c-59 -60 -22 -151 63 -151 82 0 119 92
+61 152 l-27 28 154 0 c140 0 152 -1 133 -15 -12 -8 -26 -30 -33 -49 -20 -63
+21 -116 91 -116 52 0 93 48 85 99 -3 21 -16 45 -30 58 l-25 21 94 4 c87 3 97
+5 122 30 l27 27 0 227 0 227 -28 23 c-24 22 -37 24 -126 24 l-98 0 35 35 c32
+32 35 40 30 73 -16 99 -145 113 -177 18 -13 -42 -2 -76 37 -104 l28 -21 -164
+-1 -163 0 31 29 c23 22 31 38 31 64 0 49 -8 65 -41 82 -43 23 -77 18 -110 -14
+-40 -41 -40 -89 2 -130 l31 -31 -160 0 -160 0 35 35 c32 32 35 40 30 73 -11
+69 -74 100 -136 67 -33 -17 -41 -33 -41 -85 0 -32 6 -43 33 -64 l32 -26 -164
+0 -163 0 31 29 c23 22 31 38 31 64 0 49 -8 65 -41 82 -43 23 -77 18 -110 -14
+-43 -43 -37 -102 15 -143 20 -17 14 -18 -140 -18 l-162 0 34 34 c44 44 46 86
+5 127 -31 31 -79 38 -114 18z m1643 -454 l0 -95 -845 0 -845 0 0 95 0 95 845
+0 845 0 0 -95z'
+            stroke-width='75'
+          />
+        </g>
+      </svg>
+    </div>
+  );
+};
+
+export default ArduinoLogo;
diff --git a/client/src/components/DayPanels/BlocklyCanvasPanel/BlocklyCanvasPanel.js b/client/src/components/DayPanels/BlocklyCanvasPanel/BlocklyCanvasPanel.js
@@ -26,6 +26,7 @@ import {
   handleCloseConnection,
   handleOpenConnection,
 } from '../consoleHelpers';
+import ArduinoLogo from './ArduinoLogo';
 
 export default function BlocklyCanvasPanel(props) {
   const [hoverXml, setHoverXml] = useState(false);
@@ -149,7 +150,7 @@ export default function BlocklyCanvasPanel(props) {
       clearInterval(autosaveInterval);
       clearInterval(replaySaveInterval);
       if (isStudent && dayRef.current && workspaceRef.current)
-        await handleSave(dayRef.current.id, workspaceRef,replayRef.current);
+        await handleSave(dayRef.current.id, workspaceRef, replayRef.current);
       if (workspaceRef.current) workspaceRef.current.dispose();
       dayRef.current = null;
     };
@@ -382,7 +383,7 @@ export default function BlocklyCanvasPanel(props) {
     if (connectionOpen) {
       message.error('Close Serial Monitor before uploading your code');
     } else {
-      if(typeof  window['port'] === 'undefined'){
+      if (typeof window['port'] === 'undefined') {
         await connectToPort();
       }
       if (typeof window['port'] === 'undefined') {
@@ -582,11 +583,10 @@ export default function BlocklyCanvasPanel(props) {
                         setHover={setHoverArduino}
                         hover={hoverArduino}
                       />
-                      <i
-                        onClick={handleCompile}
-                        className='fas fa-upload hvr-info'
-                        onMouseEnter={() => setHoverCompile(true)}
-                        onMouseLeave={() => setHoverCompile(false)}
+
+                      <ArduinoLogo
+                        setHoverCompile={setHoverCompile}
+                        handleCompile={handleCompile}
                       />
                       {hoverCompile && (
                         <div className='popup ModalCompile'>

diff --git a/client/src/views/Home/Home.less b/client/src/views/Home/Home.less
@@ -1,87 +1,91 @@
-@import "../../assets/style.less";
+@import '../../assets/style.less';
 
 .container {
-    background-color: #colors[primary];
-    height: 100%;
-    min-height: 100vh;
-    width: 100%;
-    min-width: 100vw;
-    text-align: center;
+  background-color: #colors[primary];
+  height: 100%;
+  min-height: 100vh;
+  width: 100%;
+  min-width: 100vw;
+  text-align: center;
 }
 
 #join-wrapper {
-    margin: 1vh auto 8vh auto;
-    display: inline-block;
+  margin: 1vh auto 8vh auto;
+  display: inline-block;
 }
 
-#box{
-    width: 300px;
-    padding: 40px 20px;
-    background-color: #colors[tertiary];
-    text-align: center;
-    border-radius: 15px;
-    border: 4px solid;
-    border-color: #colors[secondary];
+#box {
+  width: 300px;
+  padding: 40px 20px;
+  background-color: #colors[tertiary];
+  text-align: center;
+  border-radius: 15px;
+  border: 4px solid;
+  border-color: #colors[secondary];
 }
 
 #box-title {
-    background-color: #colors[secondary];
-    border-radius: 80px;
-    width: 80%;
-    min-height: 8%;
-    color: #colors[text-secondary];
-    font-size: 1.5em;
-    font-weight: bold;
-    position: relative;
-    top: -60px;
-    left: -40px;
-    line-height: 50px;
-    text-align: center;
+  background-color: #colors[secondary];
+  border-radius: 80px;
+  width: 80%;
+  min-height: 8%;
+  color: #colors[text-secondary];
+  font-size: 1.5em;
+  font-weight: bold;
+  position: relative;
+  top: -60px;
+  left: -40px;
+  line-height: 50px;
+  text-align: center;
 }
 
-#box input[type = "text"], input[type = "email"], input[type = "password"]{
-    display: block;
-    background: none;
-    margin: 20px auto 0px;
-    border: 2px solid;
-    border-color: #colors[secondary];
-    padding: 14px 10px;
-    width: 200px;
-    outline: none;
-    color: #colors[text-primary];
-    border-radius: 24px;
-    transition: 0.25s;
+#box input[type='text'],
+#box input[type='email'],
+#box input[type='password'] {
+  display: block;
+  background: none;
+  margin: 20px auto 0px;
+  border: 2px solid;
+  border-color: #colors[secondary];
+  padding: 14px 10px;
+  width: 200px;
+  outline: none;
+  color: #colors[text-primary];
+  border-radius: 24px;
+  transition: 0.25s;
 }
 
-#box input[type = "text"]:focus, input[type = "email"]:focus, input[type = "password"]:focus{
-    width: 220px;
+#box input[type='text']:focus,
+#box input[type='email']:focus,
+#box input[type='password']:focus {
+  width: 220px;
 }
 
-#box input[type = "button"]{
-    background: darken(#colors[tertiary], 30%);
-    width: 80%;
-    display: block;
-    margin: 0 auto;
-    border: 2px solid;
-    border-color: #colors[secondary];
-    padding: 14px 40px;
-    outline: none;
-    color: #colors[text-secondary];
-    font-size: 1.5em;
-    font-weight: 550;
-    border-radius: 30px;
-    cursor: pointer;
-    transition: 0.25s;
-    &:hover {
-        color: lighten(#colors[secondary], 20%);
-    }
-    position: relative;
-    bottom: -65px;
+#box input[type='button'] {
+  background: darken(#colors[tertiary], 30%);
+  width: 80%;
+  display: block;
+  margin: 0 auto;
+  border: 2px solid;
+  border-color: #colors[secondary];
+  padding: 14px 40px;
+  outline: none;
+  color: #colors[text-secondary];
+  font-size: 1.5em;
+  font-weight: 550;
+  border-radius: 30px;
+  cursor: pointer;
+  transition: 0.25s;
+  &:hover {
+    color: lighten(#colors[secondary], 20%);
+  }
+  position: relative;
+  bottom: -65px;
 }
 
 #casmm-logo {
-    width: 300px;
-    height: auto;
-    position: relative;
-    bottom: -37.5px;
-}
+  width: 300px;
+  height: auto;
+  position: relative;
+  bottom: -37.5px;
+}
diff --git a/client/src/views/StudentLogin/StudentLogin.less b/client/src/views/StudentLogin/StudentLogin.less
@@ -54,7 +54,7 @@
   width: 200px;
   outline: none;
   color: #colors[text-primary];
-  border-radius: 24px;
+  border-radius: 8px;
   transition: 0.25s;
 }
 
@@ -119,7 +119,7 @@
 
   margin: 0 15px;
   display: inline-block;
-  font-size: 4vh;
+  font-size: 3vh;
 }
 
 #login-button {