[+] Language selection

frontend/src/components/Progress.tsx

@@ -3,12 +3,12 @@ import { Icon } from '@iconify/react';
 
 interface ProgressProps {
   percent: number;
-  disableReturn?: boolean;
+  back: () => void;
 }
 
-export default function Progress({percent, disableReturn}: ProgressProps) {
+export default function Progress({percent, back}: ProgressProps) {
   return <div className="flex gap-2 items-center">
-    {!disableReturn && <Icon icon="mdi:arrow-left" className="text-gray-400 text-2xl" />}
+    {back != null && <Icon icon="mdi:arrow-left" className="text-gray-400 text-2xl" onClick={back}/>}
     <div className="relative bg-gray-200 h-4 rounded-xl flex-1">
       {percent > 0 && <div className="absolute bg-green h-4 rounded-xl" style={{width: `${percent}%`}}></div>}
     </div>

frontend/src/index.sass

@@ -57,7 +57,7 @@ button.green
 
 button.white
   background-color: white
-  color: $c-blue
+  color: $c-default-text
   border: solid $c-white-shadow
   border-width: 2px 2px 4px
   box-shadow: none
@@ -99,5 +99,8 @@ h1
   width: 100%
   height: 100%
 
+  &.non-center
+    justify-content: flex-start
+
 .page-pad
-  padding: 1em
+  padding: 2em 1em

frontend/src/logic/sdk.ts

@@ -1,23 +1,37 @@
 
+import MandarinChinese from '../assets/img/lang/zh.svg'
+import Japanese from '../assets/img/lang/ja.svg'
+
 // db.users: Signup table map<username, password>
 // db.user: Current logged-in user
 const db = localStorage
 
-export function signup(username: string, password: string)
+export interface Lang {
+  name: string
+  code: string
+  icon: string
+}
+
+export const possibleLangs = [
+  {name: 'Mandarin Chinese', code: 'zh', icon: MandarinChinese},
+  {name: 'Japanese', code: 'ja', icon: Japanese},
+]
+
+export function signup(username: string, password: string, language: string)
 {
   if (!db.users)
     db.users = JSON.stringify({})
 
   const users = JSON.parse(db.users)
 
-  users[username] = password
+  users[username] = {password, language}
   db.users = JSON.stringify(users)
 }
 
 export function login(username: string, password: string)
 {
   const users = JSON.parse(db.users)
-  if (users[username] !== password)
+  if (!users[username] || users[username].password !== password)
     throw new Error('Invalid credentials')
 
   db.user = username

frontend/src/pages/Signup.tsx

@@ -1,7 +1,9 @@
 import React, { useState } from 'react';
 import { useNavigate } from "react-router-dom";
-import { signup } from '../logic/sdk';
-import { sign } from 'crypto';
+import {possibleLangs, signup} from '../logic/sdk';
+import Progress from "../components/Progress";
+import DuoWriting from "../assets/img/duo-writing.png";
+import ChatBox from "../components/ChatBox";
 
 export default function Signup() {
   
@@ -11,6 +13,14 @@ export default function Signup() {
     const [confirmPassword, setConfirmPassword] = useState("");
     const [err, setErr] = useState("")
 
+    const [stage, _setStage] = useState(0)
+    const [lang, setLang] = useState(possibleLangs[0].name)
+
+    function setStage(stage: number) {
+        setErr("")
+        _setStage(stage)
+    }
+
     function submitSignup() {
         try {
             if (password !== confirmPassword) {
@@ -21,7 +31,7 @@ export default function Signup() {
                 console.log(confirmPassword)
                 return
             } else {
-                signup(username, password)
+                signup(username, password, "")
                 navigate('/courses')
             }
         }
@@ -31,24 +41,46 @@ export default function Signup() {
         }
     }
 
-    return <div className='v-layout page-pad'>
-        <h1>Login</h1>
-        {err && <label className="text-red-600">{err}</label>}
+    return <div className="v-layout page-pad">
+        <Progress percent={(stage + 1) * 33} back={() => {
+            if (stage === 0) navigate(-1)
+            else setStage(stage - 1)
+        }}/>
 
-        <div>
-            <label>Username</label>
-            <input type='text' placeholder='Username' value={username} onChange={(e) => setUsername(e.target.value)}></input>
-        </div>
-        <div>
-            <label>Password</label>
-            <input type='password' placeholder='Password' value={password} onChange={(e) => setPassword(e.target.value)}></input>
-        </div>
-        <div>
-            <label>Confirm Password</label>
-            <input type='password' placeholder='Confirm Password' value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)}></input>
+        <div className="flex items-center">
+            <img src={DuoWriting} alt="icon" className="max-w-[110px]"/>
+            {/*<h1>Create an Account</h1>*/}
+            <ChatBox msg={['Which language do you want to learn?', 'Great, now create a profile!'][stage]}/>
         </div>
 
-        <button className='green mt-5' onClick={submitSignup}>Signup</button>
-        <button className='white' onClick={() => navigate(-1)}>Back</button>
+        <div className='v-layout non-center'>
+
+            {err && <label className="text-red-600">{err}</label>}
+
+            {stage === 0 && <>
+            {possibleLangs.map((lang, i) => <button className="white flex items-center gap-5" onClick={() => setStage(1)} key={i}>
+                <img src={lang.icon} alt={lang.name} className="max-w-[50px]"/>
+                <span>{lang.name}</span>
+            </button>)}
+            </>}
+
+            {stage === 1 && <>
+                <div>
+                    <label>Username</label>
+                    <input type='text' placeholder='Username' value={username} onChange={(e) => setUsername(e.target.value)}></input>
+                </div>
+                <div>
+                    <label>Password</label>
+                    <input type='password' placeholder='Password' value={password} onChange={(e) => setPassword(e.target.value)}></input>
+                </div>
+                <div>
+                    <label>Confirm Password</label>
+                    <input type='password' placeholder='Confirm Password' value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)}></input>
+                </div>
+
+                <button className='green mt-5' onClick={submitSignup}>Signup</button>
+                <button className='white' onClick={() => setStage(stage - 1)}>Back</button>
+            </>}
+        </div>
     </div>
 }