Merge pull request #10 from osamhack2022-v2/web

Pouring web back-end changes into api/backend
osamhack2022 · Oct 18, 2022 · 6df448f · 6df448f
2 parents 8bed63a + 3ceffea
commit 6df448f
Show file tree

Hide file tree

Showing 6 changed files with 165 additions and 31 deletions.
diff --git a/back-end/controllers/userControllers.js b/back-end/controllers/userControllers.js
@@ -119,16 +119,13 @@ const addUser = asyncHandler(async (req, res) => {
 //@access          Public
 const registerUser = asyncHandler(async (req, res) => {
   const {
-    Rank,
-    Name,
     DoDID,
-    email,
     password,
     pic,
     Invcode
   } = req.body;
   //049opo6a
-  if (!Rank || !Name || !email || !password || !DoDID || !Invcode) {
+  if (!password || !DoDID || !Invcode) {
     res.status(400);
     throw new Error("모든 정보를 입력하세요.");
   }
@@ -154,7 +151,6 @@ const registerUser = asyncHandler(async (req, res) => {
 
   const updatedUser = await User.findByIdAndUpdate(
     userDb._id, {
-      email: email,
       password: await bcrypt.hash(password, await bcrypt.genSalt(10)),
       pic: pic,
       is_registered: true
@@ -169,10 +165,7 @@ const registerUser = asyncHandler(async (req, res) => {
   } else {
     res.status(201).json({
       _id: updatedUser._id,
-      Name: updatedUser.Name,
-      Rank: updatedUser.Rank,
       DoDID: updatedUser.DoDID,
-      email: updatedUser.email,
       Type: updatedUser.Type,
       pic: updatedUser.pic,
       token: generateToken(updatedUser._id),

diff --git a/front-end/web-next/pages/home.js b/front-end/web-next/pages/home.js
@@ -107,14 +107,16 @@ const Home = () => {
         </div>
     </>
 }
+const backendroot = process.env.NEXT_PUBLIC_BACKEND_ROOT
+let endpoint = backendroot + 'api/user/login'
 
 //export async function getServerSideProps() {
-// Fetch data from external API
-//const res = await fetch(`https://.../data`)
-//const data = await res.json()
+ //Fetch data from external API
+//    const res = await fetch(`https://.../data`)
+//    const data = await res.json()
 
 // Pass data to the page via props
-// return { props:  'data' }
+     //return { props:  'data' }
 //}
 
 export default Home; 
diff --git a/front-end/web-next/pages/register.js b/front-end/web-next/pages/register.js
@@ -15,13 +15,20 @@ const Register = () => {
     const [Invcode, setInvcode] = useState();
     const [Password, setPassword] = useState(); 
     const [ConfPassword, setConfPassword] = useState(); 
-    const [error, setError] = useState('');
+    const [error, seterror] = useState('');
+    const [success, setsuccess] = useState('');
+
+    const backendroot = process.env.NEXT_PUBLIC_BACKEND_ROOT
+    let endpoint = backendroot + 'api/user/register'
 
     let registeruser = async (event) => {
         console.log("hi")
         const data = {
             DoDID: DoDID,
-            password: Password
+            password: Password,
+            pic: "https://camo.githubusercontent.com/3c2bd3f35721dc332ebf2b11ace89722c37a0f60b94eac42b2a0462fdeb2d420/68747470733a2f2f63646e2d69636f6e732d706e672e666c617469636f6e2e636f6d2f3531322f363134322f363134323232362e706e67",
+            Invcode: Invcode
+
           }
           const JSONdata = JSON.stringify(data)
           const options = {
@@ -37,6 +44,13 @@ const Register = () => {
           const response = await fetch(endpoint, options)
           const result = await response.json()
           console.log(result)
+          if (result['DoDID']) {
+                seterror("")
+                setsuccess("계정이 성공적으로 만들어젔습니다. 가입해주세요!")
+            } else {
+                setsuccess("")
+                seterror(result['message'])
+            }
     }
     return (
         <>
@@ -46,39 +60,41 @@ const Register = () => {
         <NotLoggedinLayout>
             <h1 style = {{textAlign: 'center', marginBottom: '20px', marginTop: '20px'}}>회원가입</h1>
             <Form method="post" style={{ width: '400px', margin: 'auto' }} onFinish = {registeruser}>
-                <Form.Item name="이름" rules={[{ required: true, message: '이름을 입력해 주세요' }]}>
+                <Form.Item className = {styles.inputfield} name="이름" rules={[{ required: true, message: '이름을 입력해 주세요' }]}>
                     <Input placeholder = "이름" onChange={(event) => { setName(event.target.value) }} />
                 </Form.Item>
                 <br></br>
-                <Form.Item name="군번" rules={[{ required: true, message: '군번을 입력해 주세요' }]}>
+                <Form.Item className = {styles.inputfield} name="군번" rules={[{ required: true, message: '군번을 입력해 주세요' }]}>
                     <Input placeholder = "군번" onChange={(event) => { setDoDID(event.target.value) }} />
+                    <span className={styles.inputdesc}>22-xxxxxxxx 양식으로 입력</span>
                 </Form.Item>
-                <span className={styles.inputdesc}>22-xxxxxxxx 양식으로 입력</span>
                 <br></br>
-                <Form.Item name="초대코드" rules={[{ required: true, message: '초대코드를 입력해 주세요' }]}>
+                <Form.Item className = {styles.inputfield} name="초대코드" rules={[{ required: true, message: '초대코드를 입력해 주세요' }]}>
                     <Input placeholder = "초대 코드" onChange={(event) => { setInvcode(event.target.value) }} />
+                    <span className={styles.inputdesc}>부대에서 받은 초대코드 이용</span>
                 </Form.Item>
-                <span className={styles.inputdesc}>부대에서 받은 초대코드 이용</span>
                 <br></br>
-                <Form.Item name="비밀번호" rules={[{ required: true, message: '비밀번호를 입력해 주세요' }]}>
-                    <Input placeholder = "비밀번호" onChange={(event) => { setPassword(event.target.value) }} />
+                <Form.Item className = {styles.inputfield} name="비밀번호" rules={[{ required: true, message: '비밀번호를 입력해 주세요' }]}>
+                    <Input.Password placeholder = "비밀번호" onChange={(event) => { setPassword(event.target.value) }} />
+                    <span className={styles.inputdesc}>8자리 이상 비밀번호 사용</span>
                 </Form.Item>
-                <span className={styles.inputdesc}>8자리 이상 비밀번호 사용</span>
                 <br></br>
-                <Form.Item name="확인비밀번호" rules={[{ required: true, message: '비밀번호 확인 입력해 주세요'}, ({ getFieldValue }) => ({
+                <Form.Item className = {styles.inputfield} name="확인비밀번호" rules={[{ required: true, message: '비밀번호 확인 입력해 주세요'}, ({ getFieldValue }) => ({
             validator(_, value) {
               if (!value || getFieldValue('비밀번호') === value) {
                 return Promise.resolve();
               }
               return Promise.reject(new Error('비밀번호가 일치하지 않습니다!'));
             },
           }),] }>
-                    <Input placeholder = "비밀번호 확인" onChange={(event) => { setConfPassword(event.target.value) }} />
+                    <Input.Password placeholder = "비밀번호 확인" onChange={(event) => { setConfPassword(event.target.value) }} />
                 </Form.Item>
                 <br></br>
                 <div style = {{display: 'flex'}}>
                   <button className={styles.buttonfield} type="primary">가입하기</button>
                   <p id = {styles.error}>{error}</p>
+                  <p id = {styles.success}>{success}</p>
+
                 </div>            
             </Form>
             <div id={styles.loginfooter}>

diff --git a/front-end/web-next/pages/settings.js b/front-end/web-next/pages/settings.js
@@ -33,6 +33,15 @@ let submitnewuser = async (event) => {
   console.log('hi')
 }
 
+let submituserimg = async (event) => {
+    console.log('hi')
+}
+
+let submitnewpassword = async (event) => {
+    console.log('pass')
+}
+
+
 
 const Settings = () => {
   //TreeData1
@@ -42,9 +51,19 @@ const Settings = () => {
     const [Armymail, setArmymail] = useState();
     const [Armyphone, setArmyphone] = useState();
     const [Phone, setPhone] = useState();
+
+    const [uploadedprofilelogo, setuploadedprofilelogo] = useState("none")
+
+    const [currpassword, setcurrpassword] = useState("none")
+    const [newpassword1, setnewpassword1] = useState("none")
+    const [newpassword2, setnewpassword2] = useState("none")
+
     const [error1, seterror1] = useState();
     const [success1, setsuccess1] = useState();
-
+    const [error2, seterror2] = useState();
+    const [success2, setsuccess2] = useState();
+    const [error3, seterror3] = useState();
+    const [success3, setsuccess3] = useState();
     const onChange1 = (newValue) => {
         if (newValue == 'title1' || newValue == 'title2' || newValue == 'title3' || newValue == 'title4') {
             setRank();
@@ -57,6 +76,7 @@ const Settings = () => {
     <Head>
       <title>유저 설정</title>
     </Head>
+    <div className={styles.background}>
       <PageHeader className="site-page-header" title="계정설정"
       breadcrumb={  
       <Breadcrumb>
@@ -111,7 +131,7 @@ const Settings = () => {
               <Form.Item>
                   <div style = {{display:'flex'}}>
                       <button className={styles.submitbutton} type="primary">군인정보 수정</button>
-                      <p id = {styles.error1}>{error1}fds</p>
+                      <p id = {styles.error1}>{error1}fd</p>
                       <p id = {styles.success1}>{success1}</p>
 
                   </div>
@@ -120,13 +140,66 @@ const Settings = () => {
           </div>
 
           <div className =  {styles.userimagechange}>
+            <Form className={styles.userimagechangeform} onFinish={submituserimg}>
+                <h1 style = {{textAlign: 'center', marginTop: '15px', fontWeight: 'bold'}}>프로필 사진 번경</h1>
+                <div>
+                    <div className={styles.unitlogo}>
+                        <Image width={170} src="https://camo.githubusercontent.com/3c2bd3f35721dc332ebf2b11ace89722c37a0f60b94eac42b2a0462fdeb2d420/68747470733a2f2f63646e2d69636f6e732d706e672e666c617469636f6e2e636f6d2f3531322f363134322f363134323232362e706e67" fallback="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg==" />
+                    </div>
+                    <div className={styles.uploadcontainer}>
+                        <Upload.Dragger name="Logo" className={styles.changeunitlogoupload} multiple={false} maxCount="1" onChange={(image) => setuploadedprofilelogo(image)}>
+                            사진을 드레그 해주세요
+                            <br></br>
+                            <Button>Upload</Button>
+                        </Upload.Dragger>
+                        <Form.Item>
+                            <button className={styles.submitbutton} style = {{margin: 'auto', marginTop: '10px'}} type="primary">프로필사진 변경</button>
+                            <p id = {styles.error2}>error</p>
+                            <p id = {styles.success2}></p>
+
+                        </Form.Item>
+                    </div>
 
+                </div>
+            </Form>
 
           </div>
 
 
         </div>
+        <div className = {styles.resetpassword}>
+            <Form className={styles.resetpasswordform} onFinish = {submitnewpassword} style = {{width: '600px', marginTop: '20px'}}>
+                <h1 style = {{marginTop: '15px', fontWeight: 'bold'}}>비밀번호 변경</h1>
+                <h3 className = {styles.userheader}>현재 비밀번호</h3>
+                <Form.Item name="현재 비밀번호" rules={[{ required: true }]}>
+                    <Input placeholder="현재 비밀번호" className={styles.input} onChange={(event) => { setcurrpassword(event.target.value) }} />
+                </Form.Item>
+                <h3 className = {styles.userheader}>새 비밀번호</h3>
+                <Form.Item name="새 비밀번호" rules={[{ required: true }]}>
+                    <Input placeholder="새 비밀번호" className={styles.input} onChange={(event) => { setnewpassword1(event.target.value) }} />
+                </Form.Item>
+                <h3 className = {styles.userheader}>새 비밀번호 확인</h3>
+                <Form.Item name="새 비밀번호 확인" rules={[{ required: true,  },  ({ getFieldValue }) => ({
+                        validator(_, value) {
+                        if (!value || getFieldValue('새 비밀번호') === value) {
+                            return Promise.resolve();
+                        }
+                        return Promise.reject(new Error('비밀번호가 일치하지 않습니다!'));
+                        },
+                    })]}>
+                    <Input placeholder="새 비밀번호" className={styles.input} onChange={(event) => { setnewpassword2(event.target.value) }} />
+                </Form.Item>
+                <Form.Item>
+                  <div style = {{display:'flex'}}>
+                      <button className={styles.submitbutton} type="primary">비밀번호 변경</button>
+                      <p id = {styles.error1}>{error3}fd</p>
+                      <p id = {styles.success1}>{success3}</p>
 
+                  </div>
+              </Form.Item>
+            </Form>
+        </div>
+    </div>
 
 
 

diff --git a/front-end/web-next/styles/register.module.css b/front-end/web-next/styles/register.module.css
@@ -60,4 +60,16 @@
   line-height: 33px; 
   margin-top: 4px;
   margin-bottom: 0px;
+}
+
+#success {
+  color: green; 
+  font-size: 14px; 
+  line-height: 33px; 
+  margin-top: 4px;
+  margin-bottom: 0px;
+}
+
+.inputfield {
+  margin-bottom: 7px;
 }
diff --git a/front-end/web-next/styles/usersettings.module.css b/front-end/web-next/styles/usersettings.module.css
@@ -1,28 +1,37 @@
+.background {
+    height: 100%; 
+    display: block; 
+    min-width: 1100px;
+    overflow-x: scroll; 
+}
+
+
 .lastitem {
     color: grey; 
 }
 
 .userdatachange {
     width: 700px;
     min-width: 650px;
-    height: 570px; 
+    height: 563px; 
     background-color: white;
     border-radius: 10px;
     margin-left: 30px;
     margin-top: 40px;
     display: flex; 
     justify-content: center;
+    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
 }
 .userimagechange {
-
     width: 300px; 
-    height: 300px; 
+    height: 400px; 
     background-color: white; 
     border-radius: 10px;
     margin-top: 40px;
     margin-left: 20px;
     display: flex; 
     justify-content: center;
+    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
 }
 
 .userheader {
@@ -33,7 +42,17 @@
     margin-bottom: 10px;
 }
 
-
+.resetpassword {
+    width: 700px; 
+    height: 350px; 
+    background-color: white; 
+    border-radius: 10px; 
+    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
+    margin-left: 30px;
+    margin-top: 20px;
+    display: flex; 
+    justify-content: center;
+}
 
 #error1 {
     color: red; 
@@ -46,7 +65,6 @@
     color: green; 
     font-size: 14px; 
     line-height: 30px;
-    margin-left: 15px;
     margin-top: 3px;
 }
 .submitbutton {
@@ -58,4 +76,24 @@
     color: white; 
     height: 30px; 
     margin-top: 3px;
+}
+
+.submitbutton:hover {
+    cursor: pointer; 
+    background-color: #005c51;
+}
+
+#error2 {
+    color: red; 
+    font-size: 14px; 
+    text-align: center;
+    margin-top: 0px;
+    margin-bottom: 0px;
+    line-height: 30px;
+}
+#success2 {
+    color: green; 
+    font-size: 14px; 
+    text-align: center;
+    line-height: 30px;
 }