auth flows with appropriate messages completed

src/assets/icons/eye-outline.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-i</title><path d="M255.66,112c-77.94,0-157.89,45.11-220.83,135.33a16,16,0,0,0-.27,17.77C82.92,340.8,161.8,400,255.66,400,348.5,400,429,340.62,477.45,264.75a16.14,16.14,0,0,0,0-17.47C428.89,172.28,347.8,112,255.66,112Z" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><circle cx="256" cy="256" r="80" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-i</title><path d="M255.66,112c-77.94,0-157.89,45.11-220.83,135.33a16,16,0,0,0-.27,17.77C82.92,340.8,161.8,400,255.66,400,348.5,400,429,340.62,477.45,264.75a16.14,16.14,0,0,0,0-17.47C428.89,172.28,347.8,112,255.66,112Z" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><circle cx="256" cy="256" r="80" style="stroke-miterlimit:10;stroke-width:32px"/></svg>

src/components/auth/Auth.module.scss

@@ -50,6 +50,7 @@
 
         svg {
             fill: var(--light-grey);
+            stroke: var(--light-grey);
             width: 20px;
             height: 20px;
         }

src/components/auth/Login.tsx

@@ -7,7 +7,7 @@ import { NavLink } from "react-router-dom";
 import axios from 'axios';
 import { SERVER_URL } from "../../App";
 
-const authenticateCredentials = async (username: string, password: string) => {
+export const authenticateCredentials = async (username: string, password: string) => {
     return await axios.post(SERVER_URL + '/auth/api-auth/', {
         email: username,
         password: password

src/components/auth/Signup.tsx

@@ -6,6 +6,7 @@ import { ReactComponent as EyeIcon } from '../../assets/icons/eye-outline.svg';
 import { NavLink } from "react-router-dom";
 import axios from 'axios';
 import { SERVER_URL } from "../../App";
+import { authenticateCredentials } from "./Login";
 
 
 const registerUser = async (name: string, username: string, password: string) => {
@@ -40,6 +41,7 @@ export const Signup: React.FC = () => {
 
     function register() {
         registerUser(fullName, userName, password).then(() => {
+            window.alert("Registered your email, please wait while we redirect you to verify...");
 
             setTimeout(() => {
                 requestVerification(userName).then(() => {
@@ -56,8 +58,15 @@ export const Signup: React.FC = () => {
 
     function verify() {
         verifyUser(userName, otp).then(() => {
-            window.alert("Verified user!");
-            window.location.assign("/login");
+            window.alert("Verified user!, Logging you in....");
+
+            authenticateCredentials(userName, password).then((response: any) => {
+                localStorage.anamnesisToken = response.data.token;
+                window.location.assign('/home');
+            }, () => {
+                window.alert("Please check your credentials");
+            });
+
         }, () => window.alert("Failed Verification, please try again"))
     }
 
@@ -87,10 +96,10 @@ export const Signup: React.FC = () => {
             </div>
 
             <button className={styles.submitButton} onClick={() => register()}>
-                Next Step
+                Next Step (Verification)
             </button>
 
-            <NavLink className={styles.otherLinks} to="/Login"> Login? </NavLink>
+            <NavLink className={styles.otherLinks} to="/login"> Login? </NavLink>
 
         </section> }
 

src/components/loader/Toast.module.scss

@@ -0,0 +1,14 @@
+.toast {
+    position: fixed;
+    bottom: 5vh;
+    left: 5vw;
+    width: 90vw;
+    border-radius: 10px;
+    background-color: var(--red);
+    color: white;
+    padding: 10px 15px;
+    font-size: 16px;
+    font-weight: 500;
+    letter-spacing: 0.5px;
+    opacity: 0.8;
+}

src/components/loader/Toast.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import styles from './Toast.module.scss';
+
+
+type OwnProps = {
+    type: 'success' | 'warning' | 'error',
+    message: string,
+}
+
+export const Toast: React.FC<OwnProps> = (props) => {
+    let toastStyle = '';
+
+    switch(props.type) {
+        case 'success' : toastStyle = styles.success; break;
+        case 'warning': toastStyle = styles.warning; break;
+        case 'error': toastStyle = styles.error; break;
+    }
+
+    return <section className={styles.toast + ' ' + toastStyle}>
+        { props.message }
+    </section>
+}