Commit 6c897a12 authored by liujiangnan's avatar liujiangnan

登录整改,集成课件联调

parent bc56e5d1
...@@ -5,6 +5,7 @@ import { AgoraElectronStream, StreamType, nativeRTCClient as nativeClient } from ...@@ -5,6 +5,7 @@ import { AgoraElectronStream, StreamType, nativeRTCClient as nativeClient } from
import { useRoomState } from '../containers/root-container'; import { useRoomState } from '../containers/root-container';
import { platform } from '../utils/platform'; import { platform } from '../utils/platform';
import {makeStyles} from "@material-ui/core/styles"; import {makeStyles} from "@material-ui/core/styles";
import { endPoint } from '../services/agora-end-points';
const contentMode = 0; const contentMode = 0;
...@@ -36,19 +37,10 @@ const useStyles = makeStyles({ ...@@ -36,19 +37,10 @@ const useStyles = makeStyles({
}); });
const CourseWareFrame: React.FC = () => { const CourseWareFrame: React.FC = () => {
const classes = useStyles(); const classes = useStyles();
const ref = useRef<any>('');
const [src, setSrc] = useState('')
const changSrc = (evt: any) => {
setSrc(ref.current.value);
}
const src = endPoint.getCourseUrl();
return ( return (
<div className={classes.style1}> <div className={classes.style1}>
<div className={classes.style2}>
<input type="text" ref={ref} className={classes.style3} />
<button onClick={changSrc} className={classes.style4}>GO</button>
</div>
<iframe src={src} className={classes.frm}></iframe> <iframe src={src} className={classes.frm}></iframe>
</div> </div>
) )
......
...@@ -29,7 +29,7 @@ export default function (props: any) { ...@@ -29,7 +29,7 @@ export default function (props: any) {
return ( return (
<> <>
<InputLabel>{props.Label}</InputLabel> <InputLabel>{props.Label}</InputLabel>
<Input className={classes.formInput} value={props.value} <Input className={classes.formInput} type={props.type} value={props.value}
onChange={onChange}> onChange={onChange}>
</Input> </Input>
{props.requiredText ? <Typography className={classes.required}>{props.requiredText}</Typography> : null} {props.requiredText ? <Typography className={classes.required}>{props.requiredText}</Typography> : null}
......
...@@ -13,6 +13,7 @@ import { roomStore } from '../stores/room'; ...@@ -13,6 +13,7 @@ import { roomStore } from '../stores/room';
import { genUid } from '../utils/helper'; import { genUid } from '../utils/helper';
import MD5 from 'js-md5'; import MD5 from 'js-md5';
import { globalStore } from '../stores/global'; import { globalStore } from '../stores/global';
import { endPoint } from '../services/agora-end-points';
export const roomTypes = [ export const roomTypes = [
{value: 0, text: 'One-to-One', path: 'one-to-one'}, {value: 0, text: 'One-to-One', path: 'one-to-one'},
...@@ -31,6 +32,7 @@ type SessionInfo = { ...@@ -31,6 +32,7 @@ type SessionInfo = {
roomName: string roomName: string
roomType: number roomType: number
yourName: string yourName: string
yourPass: string
role: string role: string
} }
...@@ -39,6 +41,7 @@ const defaultState: SessionInfo = { ...@@ -39,6 +41,7 @@ const defaultState: SessionInfo = {
roomType: 1, roomType: 1,
role: '', role: '',
yourName: '', yourName: '',
yourPass: ''
} }
function HomePage() { function HomePage() {
...@@ -67,25 +70,26 @@ function HomePage() { ...@@ -67,25 +70,26 @@ function HomePage() {
const [required, setRequired] = useState<any>({} as any); const [required, setRequired] = useState<any>({} as any);
const handleSubmit = () => { const handleSubmit = () => {
if (!session.roomName) {
setRequired({...required, roomName: 'missing room name'});
return;
}
if (!session.yourName) { if (!session.yourName) {
setRequired({...required, yourName: 'missing your name'}); setRequired({...required, yourName: 'missing your name'});
return; return;
} }
if (!session.role) { if (!session.yourPass) {
setRequired({...required, role: 'missing role'}); setRequired({...required, yourPass: 'missing your password'});
return; return;
} }
endPoint.login({username: session.yourName, password: session.yourPass}).then((userInfo: any) => {
console.log(userInfo);
session.roomName = userInfo["class_id"];
session.yourName = userInfo["nick_name"];
session.role = userInfo["classRole"]==="tea"?"teacher":"student";
session.roomType = 1;
if (!roomTypes[session.roomType]) return; if (!roomTypes[session.roomType]) return;
const path = roomTypes[session.roomType].path const path = roomTypes[session.roomType].path
const payload = { const payload = {
uid: session.yourName, // genUid(), uid: userInfo["uuid"], // genUid(),
rid: session.roomName, // `${session.roomType}${MD5(session.roomName)}`, rid: session.roomName, // `${session.roomType}${MD5(session.roomName)}`,
role: session.role, role: session.role,
roomName: session.roomName, roomName: session.roomName,
...@@ -123,6 +127,7 @@ function HomePage() { ...@@ -123,6 +127,7 @@ function HomePage() {
ref.current = false; ref.current = false;
globalStore.stopLoading(); globalStore.stopLoading();
}) })
});
} }
return ( return (
...@@ -157,18 +162,7 @@ function HomePage() { ...@@ -157,18 +162,7 @@ function HomePage() {
</div> </div>
<div className="position-content flex-direction-column"> <div className="position-content flex-direction-column">
<FormControl className={classes.formControl}> <FormControl className={classes.formControl}>
<FormInput Label={"Room Name"} value={session.roomName} onChange={ <FormInput Label={"User Name"} value={session.yourName} onChange={
(val: string) => {
setSessionInfo({
...session,
roomName: val
});
}}
requiredText={required.roomName}
/>
</FormControl>
<FormControl className={classes.formControl}>
<FormInput Label={"Your Name"} value={session.yourName} onChange={
(val: string) => { (val: string) => {
setSessionInfo({ setSessionInfo({
...session, ...session,
...@@ -179,26 +173,16 @@ function HomePage() { ...@@ -179,26 +173,16 @@ function HomePage() {
/> />
</FormControl> </FormControl>
<FormControl className={classes.formControl}> <FormControl className={classes.formControl}>
<FormSelect <FormInput Label={"Password"} type="password" value={session.yourPass} onChange={
Label={"Room Type"} (val: string) => {
value={session.roomType}
onChange={(evt: any) => {
setSessionInfo({ setSessionInfo({
...session, ...session,
roomType: evt.target.value yourPass: val
}); });
}} }}
items={roomTypes} requiredText={required.yourPass}
/> />
</FormControl> </FormControl>
<FormControl className={classes.formControl}>
<RoleRadio value={session.role} onChange={(evt: any) => {
setSessionInfo({
...session,
role: evt.target.value
});
}} requiredText={required.role}></RoleRadio>
</FormControl>
<Button name={"Join"} onClick={handleSubmit}/> <Button name={"Join"} onClick={handleSubmit}/>
</div> </div>
</div> </div>
......
import { AgoraFetch } from "../utils/fetch"; import { AgoraFetch } from "../utils/fetch";
import jwt_decode from 'jwt-decode';
const ENDPOINT: string = process.env.REACT_APP_AGORA_ENDPOINT as string; const ENDPOINT: string = process.env.REACT_APP_AGORA_ENDPOINT as string;
...@@ -48,6 +49,35 @@ export class EndPoint { ...@@ -48,6 +49,35 @@ export class EndPoint {
userToken: string = ''; userToken: string = '';
recordId: string = ''; recordId: string = '';
async login(data: any) {
let json = await AgoraFetchJson({
url: `${ENDPOINT}/api/login`,
method: 'POST',
data: data
});
let token = json.data;
this.userToken = token;
try {
let userInfo = jwt_decode(token);
return userInfo;
} catch (Error) {
return null;
}
}
getUserInfo(){
try {
let userInfo = jwt_decode(this.userToken);
return userInfo;
} catch (Error) {
return null;
}
}
getCourseUrl(){
return `${ENDPOINT}/airclass_ol?token=${this.userToken}`;
}
async config() { async config() {
let json = await AgoraFetchJson({ let json = await AgoraFetchJson({
url: `${ENDPOINT}/v1/room/config`, url: `${ENDPOINT}/v1/room/config`,
...@@ -179,3 +209,5 @@ export class EndPoint { ...@@ -179,3 +209,5 @@ export class EndPoint {
} }
} }
export const endPoint = new EndPoint();
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment