rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: init user settings

Browse source
This commit is contained in:
swve 2023-12-13 21:30:47 +01:00
parent 6fea7ec1af
commit 838a94eec1
17 changed files with 273 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

2
apps/web/components/Dashboard/EditCourseGeneral/EditCourseGeneral.tsx → apps/web/components/Dashboard/Course/EditCourseGeneral/EditCourseGeneral.tsx
View file

@ -4,7 +4,7 @@ import { AlertTriangle } from 'lucide-react'
import * as Switch from '@radix-ui/react-switch';
import * as Form from '@radix-ui/react-form';
import React from 'react'
import { useCourse, useCourseDispatch } from '../../Contexts/CourseContext';
import { useCourse, useCourseDispatch } from '../../../Contexts/CourseContext';
type EditCourseStructureProps = {

0
apps/web/components/Dashboard/EditCourseStructure/Buttons/NewActivityButton.tsx → apps/web/components/Dashboard/Course/EditCourseStructure/Buttons/NewActivityButton.tsx
View file

0
apps/web/components/Dashboard/EditCourseStructure/DraggableElements/ActivityElement.tsx → apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx
View file

0
apps/web/components/Dashboard/EditCourseStructure/DraggableElements/ChapterElement.tsx → apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ChapterElement.tsx
View file

0
apps/web/components/Dashboard/EditCourseStructure/EditCourseStructure.tsx → apps/web/components/Dashboard/Course/EditCourseStructure/EditCourseStructure.tsx
View file

5
apps/web/components/Dashboard/UI/BreadCrumbs.tsx
View file

@ -4,7 +4,7 @@ import Link from 'next/link'
import React, { use, useEffect } from 'react'
type BreadCrumbsProps = {
type: 'courses' | 'users'
type: 'courses' | 'user' | 'users',
last_breadcrumb?: string
}
@ -17,7 +17,8 @@ function BreadCrumbs(props: BreadCrumbsProps) {
<div className='text-gray-400 tracking-tight font-medium text-sm flex space-x-1'>
<div className='flex items-center space-x-1'>
{props.type == 'courses' ? <div className='flex space-x-2 items-center'> <Book className='text-gray' size={14}></Book><Link href='/dash/courses'>Courses</Link></div> : ''}
{props.type == 'users' ? <div> <User size={14}></User><Link href='/dash/users'>Users</Link></div> : ''}
{props.type == 'user' ? <div className='flex space-x-2 items-center'> <User className='text-gray' size={14}></User><Link href='/dash/user/settings/general'>Account Settings</Link></div> : ''}
<div className='flex items-center space-x-1 first-letter:uppercase'>
{props.last_breadcrumb ? <ChevronRight size={17} /> : ''}
<div className='first-letter:uppercase'> {props.last_breadcrumb}</div>

26
apps/web/components/Dashboard/UI/LeftMenu.tsx
View file

@ -35,12 +35,12 @@ function LeftMenu() {
className='flex flex-col w-24 bg-black h-screen text-white shadow-xl'>
<div className='flex flex-col h-full'>
<div className='flex h-20 mt-6'>
<Link className='mx-auto' href={"/dash"}>
<Link className='flex flex-col items-center mx-auto space-y-1' href={"/dash"}>
<Image alt="Learnhouse logo" width={40} src={LearnHouseDashboardLogo} />
</Link>
</div>
<div className='flex grow flex-col justify-center space-y-5 items-center mx-auto'>
<ToolTip content={"Back to " + org?.name} slateBlack sideOffset={8} side='right' >
<ToolTip content={"Back to " + org?.name + "'s Home"} slateBlack sideOffset={8} side='right' >
<Link className='bg-white text-black hover:text-white rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/`} ><ArrowLeft className='hover:text-white' size={18} /></Link>
</ToolTip>
<ToolTip content={"Home"} slateBlack sideOffset={8} side='right' >
@ -51,15 +51,21 @@ function LeftMenu() {
</ToolTip>
</div>
<div className='flex flex-col mx-auto pb-7 space-y-2'>
<Link href={'/dash/user/settings'} className='py-3'>
<Settings className='mx-auto text-neutral-400 cursor-pointer' size={18} />
</Link>
<div className="flex items-center">
<div className="mx-auto shadow-lg">
<Avvvatars radius={3} border borderColor='white' borderSize={3} size={35} value={auth.user.user_uuid} style="shape" />
</div>
<ToolTip content={auth.user.username+ "'s Settings"} slateBlack sideOffset={8} side='right' >
<Link href={'/dash/user/settings/general'} className='py-3'>
<Settings className='mx-auto text-neutral-400 cursor-pointer' size={18} />
</Link>
</ToolTip>
<div className="flex items-center flex-col space-y-4">
<ToolTip content={auth.user.username} slateBlack sideOffset={8} side='right' >
<div className="mx-auto shadow-lg">
<Avvvatars radius={3} border borderColor='white' borderSize={3} size={35} value={auth.user.user_uuid} style="shape" />
</div>
</ToolTip>
<ToolTip content={'Learnhouse Version'} slateBlack sideOffset={8} side='right' >
<div className='py-1 px-3 bg-white/10 opacity-40 rounded-full text-[10px] uppercase justify-center text-center'>alpha</div>
</ToolTip>
</div>
<div className="text-xs px-4 text-gray-200 ">{auth.user.username}</div>
</div>
</div>

100
apps/web/components/Dashboard/User/UserEditGeneral/UserEditGeneral.tsx Normal file
View file

@ -0,0 +1,100 @@
import { useAuth } from '@components/Security/AuthContext';
import { updateProfile } from '@services/settings/profile';
import React, { useEffect } from 'react'
import { Formik, Form, Field, ErrorMessage } from 'formik';
function UserEditGeneral() {
const auth = useAuth() as any;
useEffect(() => {
}
, [auth, auth.user])
return (
<div className='ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-6 py-5'>
{auth.user && (
<Formik
enableReinitialize
initialValues={{
username: auth.user.username,
first_name: auth.user.first_name,
last_name: auth.user.last_name,
email: auth.user.email,
bio: auth.user.bio,
}}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
setSubmitting(false);
updateProfile(values,auth.user.id)
}, 400);
}}
>
{({ isSubmitting }) => (
<Form className="max-w-md">
<label className="block mb-2 font-bold" htmlFor="email">
Email
</label>
<Field
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
type="email"
name="email"
/>
<label className="block mb-2 font-bold" htmlFor="username">
Username
</label>
<Field
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
type="username"
name="username"
/>
<label className="block mb-2 font-bold" htmlFor="first_name">
First Name
</label>
<Field
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
type="first_name"
name="first_name"
/>
<label className="block mb-2 font-bold" htmlFor="last_name">
Last Name
</label>
<Field
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
type="last_name"
name="last_name"
/>
<label className="block mb-2 font-bold" htmlFor="bio">
Bio
</label>
<Field
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
type="bio"
name="bio"
/>
<button
type="submit"
disabled={isSubmitting}
className="px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-black focus:outline-none focus:ring-2 focus:ring-blue-500"
>
Submit
</button>
</Form>
)}
</Formik>
)}
</div>
)
}
export default UserEditGeneral

66
apps/web/components/Dashboard/User/UserEditPassword/UserEditPassword.tsx Normal file
View file

@ -0,0 +1,66 @@
import { useAuth } from '@components/Security/AuthContext';
import { updatePassword } from '@services/settings/password';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import React, { useEffect } from 'react'
function UserEditPassword() {
const auth = useAuth() as any;
const updatePasswordUI = async (values: any) => {
let user_id = auth.userInfo.user_object.user_id;
await updatePassword(user_id, values)
}
useEffect(() => {
}
, [auth])
return (
<div className='ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-6 py-5'>
<Formik
initialValues={{ old_password: '', new_password: '' }}
enableReinitialize
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
setSubmitting(false);
updatePasswordUI(values)
}, 400);
}}
>
{({ isSubmitting }) => (
<Form className="max-w-md">
<label className="block mb-2 font-bold" htmlFor="old_password">
Old Password
</label>
<Field
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
type="password"
name="old_password"
/>
<label className="block mb-2 font-bold" htmlFor="new_password">
New Password
</label>
<Field
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
type="password"
name="new_password"
/>
<button
type="submit"
disabled={isSubmitting}
className="px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-black focus:outline-none focus:ring-2 focus:ring-blue-500"
>
Submit
</button>
</Form>
)}
</Formik>
</div>
)
}
export default UserEditPassword

20
apps/web/components/Objects/Menu/ProfileArea.tsx
View file

@ -8,6 +8,7 @@ import { getNewAccessTokenUsingRefreshToken, getUserInfo } from "@services/auth/
import { usePathname } from "next/navigation";
import { useRouter } from "next/router";
import path from "path";
import { Settings } from "lucide-react";
export interface Auth {
access_token: string;
@ -92,7 +93,7 @@ function ProfileArea() {
<div>
<Avvvatars value={auth.userInfo.user_object.user_id} style="shape" />
</div>
<Link href={"/settings"}><GearIcon /></Link>
<Link href={"/dash"}><Settings /></Link>
</AccountArea>
)}
</ProfileAreaStyled>
@ -104,22 +105,7 @@ const AccountArea = styled.div`
display: flex;
place-items: center;
a{
// center the gear icon
display: flex;
place-items: center;
place-content: center;
width: 29px;
height: 29px;
border-radius: 19px;
background: #F5F5F5;
// hover effect
&:hover{
background: #E5E5E5;
}
}
div {
margin-right: 10px;

4
apps/web/components/Security/HeaderProfileBox.tsx
View file

@ -30,11 +30,11 @@ export const HeaderProfileBox = () => {
{auth.isAuthenticated && (
<AccountArea className="-space-x-2">
<div className="text-xs px-4 text-gray-600 p-1.5 rounded-full bg-gray-50">{auth.userInfo.username}</div>
<div className="flex -space-x-2 items-center">
<div className="flex items-center">
<div className="py-4">
<Avvvatars size={26} value={auth.userInfo.user_uuid} style="shape" />
</div>
<Link className="bg-gray-50 p-1.5 rounded-full" href={"/settings"}><GearIcon fontSize={26} /></Link>
<Link className="" href={"/dash"}><GearIcon fontSize={26} /></Link>
</div>
</AccountArea>
)}