From 4d863fb79661209a6df5c2f44d195b535a45389e Mon Sep 17 00:00:00 2001
From: ywang289 <56518323+ywang289@users.noreply.github.com>
Date: Thu, 5 May 2022 20:04:29 -0400
Subject: [PATCH]  add profile and change password frontend

---
 templates/templates/SignUp.html   | 126 +++++++++++++++++++++
 templates/templates/homepage.html | 176 ++++++++++++++++++++++++++++++
 templates/templates/index.html    | 145 ++++++++++++++++++++++++
 templates/templates/profile.html  |  96 ++++++++++++++++
 templates/templates/reset.html    |  70 ++++++++++++
 5 files changed, 613 insertions(+)
 create mode 100644 templates/templates/SignUp.html
 create mode 100644 templates/templates/homepage.html
 create mode 100644 templates/templates/index.html
 create mode 100644 templates/templates/profile.html
 create mode 100644 templates/templates/reset.html
diff --git a/templates/templates/SignUp.html b/templates/templates/SignUp.html
new file mode 100644
index 0000000..930b367
--- /dev/null
+++ b/templates/templates/SignUp.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html">
+<head>
+    <title>UBchating</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <style>
+        /* Remove the navbar's default margin-bottom and rounded borders */
+        .navbar {
+            margin-bottom: 0;
+            border-radius: 0;
+            background-color: #ffe6e6;
+        }
+
+        /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
+        .row.content {
+            color: #FEFAD7;
+
+            height: 450px
+        }
+
+        /* Set gray background color and 100% height */
+        .sidenav {
+            padding-top: 20px;
+            background-color: #321E0F;
+            height: 100%;
+        }
+
+        /* Set black background color, white text and some padding */
+        footer {
+            position: fixed;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            background-color: #321E0F;
+            color: white;
+            text-align: center;
+        }
+
+        /* On small screens, set height to 'auto' for sidenav and grid */
+        @media screen and (max-width: 767px) {
+            .sidenav {
+                height: auto;
+                padding: 15px;
+            }
+            .row.content {height:auto;}
+        }
+        body{
+            background-color: #FEFAD7;
+        }
+        #logo {
+            text-align:center;
+            color: #FEFAD7;
+        }
+        #sign_in {
+
+            text-align:center;
+            color: #F1D5EF;
+            font-size: 20px;
+        }
+        .jumbotron{
+            background-color: #F1D5EF;
+
+        color: #FEFAD7;
+
+        }
+        .text-center{
+            color:  #FEFAD7;
+
+
+        }
+        .container-fluid{
+            background-color: #F1D5EF;
+
+        }
+
+    </style>
+
+
+<body>
+
+<div class="jumbotron text-center">
+    <h1>Welcome to UB Chating！</h1>
+    <!--    <p4>Making communicate easier!</p4>-->
+</div>
+<div class="container">
+    <div class="row">
+        <div class="col-lg-12" id="sign_in" >
+            <h1>User Sign Up </h1>
+            <form action="/Signup" method="post" enctype="multipart/form-data">
+                    <form action="this username is existed" method="post">
+                    <label for="fname">Username:</label>
+                    <input style="color:#F1D5EF" type="text" id="fname" name="Name" minlength="6" maxlength="12" required>
+                    <label id="fname-error" style="display: none">username is existed, pick another one</label>
+                    <br><br>
+                    <label for="lname">Password:</label>
+                    <input style="color:#F1D5EF" type="text" id="lname" name="Password" minlength="6" maxlength="12" required><br><br>
+                    <input type="submit" style="color:#F1D5EF" value="Submit">
+                    <br><br>
+                    <p><a href="/" data-toggle="tooltip" title="Sign In right now!" ><font color="F1D5EF"size = "5px">Sign In</font></a ></p >
+                    </form>
+            </form>
+        </div>
+    </div>
+</div>
+
+<script>
+    let query = new URLSearchParams(window.location.search)
+    if (query.has('error')) {
+        if (query.get('error') === "username") {
+            document.querySelector('#fname-error').style.display = 'block'
+        }
+    }
+</script>
+<footer class="container-fluid text-center">
+    <p>About Us</p >
+
+</footer>
+</body>
+
+
+</html>
+
diff --git a/templates/templates/homepage.html b/templates/templates/homepage.html
new file mode 100644
index 0000000..e5e8b77
--- /dev/null
+++ b/templates/templates/homepage.html
@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>UB chatting</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" type="text/css" href="style.css"/>
+    <style>
+        /* Remove the navbar's default margin-bottom and rounded borders */
+        .navbar {
+            margin-bottom: 1px;
+            border-radius: 1px;
+            color: #050505;
+        }
+
+
+        /* Set black background color, white text and some padding */
+        footer {
+            position: fixed;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            background-color: #321E0F;
+            color: white;
+            text-align: center;
+        }
+
+        /* On small screens, set height to 'auto' for sidenav and grid */
+        @media screen and (max-width: 767px) {
+            .sidenav {
+                height: auto;
+                padding: 15px;
+            }
+            .row.content {height:auto;}
+        }
+        body{
+            background-color: #FEFAD7;
+        }
+        #logo {
+            text-align:center;
+            color: #FEFAD7;
+        }
+        #sign_in {
+
+            text-align:center;
+            color: #FEFAD7;
+        }
+        .jumbotron{
+            background-color: #F1D5EF;
+            color: #FEFAD7;
+
+        }
+        .text-center{
+            color:  #FEFAD7;
+        }
+        .container-fluid{
+            background-color: #F1D5EF;
+            color: #050505;
+        }
+        a {
+            color: #333;
+            text-decoration: none;
+        }
+        .header-image{
+            /*background-image: url("cat.jpg");*/
+            background-position: center;
+            background-repeat: no-repeat;
+            position: relative;
+            background-size: cover;
+        }
+        .my_image {
+            width: 40px;
+            height : 40px;
+            border: 5px solid #F1D5EF;
+        }
+
+
+
+    </style>
+
+</head>
+
+
+
+
+
+<nav class="navbar">
+    <div class="container-fluid">
+        <div class="navbar-header">
+            <a class="navbar-brand" href=" " >UBChatting</a>
+        </div>
+        <ul class="nav navbar-nav">
+            <li class="active" ><a href="#">Home</a></li>
+            <li><a onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Chat</a></li>
+            <li><a href="#"> Profile</a></li>
+            <!--            <li>< a href="#">Page 3</ a></li>-->
+        </ul>
+    </div>
+</nav>
+
+
+
+
+<body>
+
+<div class="container">
+    <div class= “header-image”>
+        <div class="col-lg-12" id="moment_background">
+            <h2 class="text-left">Welcome back ,{{username}}!</h2>
+        </div>
+    </div>
+
+    <hr>
+    <div class="row">
+        <div class="col-sm-12">
+            <img src="/cat.jpg" alt="user_image" class="my_image"/> {{username}}
+        </div>
+
+    </div>
+    <br>
+    <div class="row">
+        <div class ="col-sm-1">
+        </div>
+        <div class="col-sm-8">
+            <p class="text-left">{{content_begin_here}} </p ><br>
+            <button style="font-size:20px;color:red"><i class="fa fa-thumbs-up"></i></button>{{thumbersLst}}
+        </div>
+    </div>
+    <hr>
+
+</div>
+
+<!--    <div class="col-*-*"></div>-->
+<p><strong>1. upload Image</strong></p>
+<form action="/image-upload" id="image-form" method="post" enctype="multipart/form-data">
+    <label for="img">Select image:</label>
+    <input type="file" id="img" name="img" accept="image/*">
+    <input type="submit">
+</form>
+<h3>Styling Flex Container</h3>
+<ul>
+    <li>flex-direction</li>
+    <li>flex-wrap</li>
+    <li>justify-content</li>
+    <li>align-content</li>
+    <li>align-items</li>
+</ul>
+<h3>Designing Flex Items </h3>
+<ul>
+    <li>order</li>
+    <li>align-self</li>
+    <li>flex-grow</li>
+    <li>flex-shrink</li>
+    <li>flex-basis</li>
+</ul>
+
+
+
+
+</body>
+
+
+
+<footer class="container-fluid text-center">
+    <p>About Us</p >
+</footer>
+
+<script>
+
+</script>
+
+</html>
\ No newline at end of file
diff --git a/templates/templates/index.html b/templates/templates/index.html
new file mode 100644
index 0000000..db0456d
--- /dev/null
+++ b/templates/templates/index.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>UB Chating</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <style>
+      /* Remove the navbar's default margin-bottom and rounded borders */
+      .navbar {
+          margin-bottom: 0;
+          border-radius: 0;
+          background-color: #ffe6e6;
+      }
+
+      /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
+      .row.content {height: 450px}
+
+      /* Set gray background color and 100% height */
+      .sidenav {
+          padding-top: 20px;
+          background-color: #321E0F;
+          height: 100%;
+      }
+
+      /* Set black background color, white text and some padding */
+      footer {
+          position: fixed;
+          left: 0;
+          bottom: 0;
+          width: 100%;
+          background-color: #321E0F;
+          color: white;
+          text-align: center;
+      }
+
+      /* On small screens, set height to 'auto' for sidenav and grid */
+      @media screen and (max-width: 767px) {
+          .sidenav {
+              height: auto;
+              padding: 15px;
+          }
+          .row.content {height:auto;}
+      }
+      body{
+          background-color: #FEFAD7;
+      }
+      #logo {
+          text-align:center;
+          color: #FEFAD7;
+      }
+      #sign_in {
+
+          text-align:center;
+          color: #FEFAD7;
+      }
+      .jumbotron{
+        background-color: #F1D5EF;
+
+        color: #FEFAD7;
+
+      }
+      .text-center{
+        color:  #FEFAD7;
+
+
+      }
+      .container-fluid{
+        background-color: #F1D5EF;
+
+      }
+
+
+
+
+
+  </style>
+</head>
+<body>
+
+<!--<nav class="navbar navbar-inverse">-->
+<!--    <div class="container-fluid">-->
+<!--        <h1 id="logo">UB <span style="color:#ff9999">Charting</span></h1>-->
+<!--    </div>-->
+<!--</nav>-->
+
+<div class="jumbotron text-center">
+    <h1>Welcome to UB Chating！</h1>
+<!--    <p4>Making communicate easier!</p4>-->
+</div>
+
+<div class="container">
+    <div class="row">
+        <div class="col-lg-12" id="sign_in" >
+            <h1><font color = "#F1D5EF">User Sign In Here~</font></h1>
+            <form action="/profile" method="post" enctype="multipart/form-data">
+                <br>
+                <form action="?error=user Or password wrong" method="post">
+                    <label for="fname"><font color="#F1D5EF" size = "5px">Username:</font></label>
+                    <input style="color:#050505" type="text" id="fname" name="Name" >
+                    <label id="fname-error" style="display: none"><font color="F1D5EF">Username is not exist</font></label>
+                    <br><br>
+                    <label for="lname"><font color="#F1D5EF" size = "5px">Password:</font></label>
+                    <input style="color:#050505" type="password" id="lname" name="Password" >
+                    <label id="password-error" style="display: none"><font color="F1D5EF">wrong password</font></label>
+                    <br><br>
+                    <button type="submit" class="btn btn-default" ><font color="F1D5EF"> Submit</font></button>
+<!--                    <input type="submit" style="color:#F1D5EF"  value="Submit">-->
+
+<!--                    <button type="button" class="btn btn-default">Default</button>-->
+                    <br><br><br><br>
+                    <h4><font color="#F1D5EF" size = "5px">If you don't have an account...</font></h4>
+                    <br><br>
+                    <p><a href="/Signup" data-toggle="tooltip" title="Sign up right now!"><font color="F1D5EF"size = "5px"> Sign up</font></a ></p >
+
+                </form>
+            </form>
+
+        </div>
+    </div>
+</div>
+
+<footer class="container-fluid text-center">
+    <p>About Us</p >
+</footer>
+
+</body>
+
+<script>
+  let query = new URLSearchParams(window.location.search)
+  if (query.has('error')) {
+    if (query.get('error') === "username") {
+      document.querySelector('#fname-error').style.display = 'block'
+    } else if (query.get('error') === "password") {
+      document.querySelector('#password-error').style.display = 'block'
+    }
+  }
+  $(document).ready(function(){
+  $('[data-toggle="tooltip"]').tooltip();
+});
+</script>
+
+</html>
diff --git a/templates/templates/profile.html b/templates/templates/profile.html
new file mode 100644
index 0000000..b8b2bb1
--- /dev/null
+++ b/templates/templates/profile.html
@@ -0,0 +1,96 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Project Name</title>
+    <style>
+        div {
+            background-color: #FDF6EC;
+            width: 100%;
+            
+            padding: 50px;
+            margin: 20px;
+        }
+
+        .header a{
+            border: 1px solid;
+            display: inline-block;
+            min-width: 150px;
+            text-align: center;
+            line-height: 50px;
+            font-size: 20px;
+            background-color: #B7CADB;
+            color: black;
+            text-decoration: none;
+            border: 1px solid black;
+            margin: 20px 2px;
+        }
+        #select_color {
+    color: white;
+    background-color: #FDF6EC;
+}
+
+       
+        
+    </style>
+    
+</head>
+<body>
+    <h1>Project Name</h1>
+
+    {% if user %}
+    <div class="header">
+        <a href="homepage.html" >Home</a>
+        <a href="about.html" >About</a>
+        <a href="SignUp.html">Register</a>
+        <a href="index.html" class="profile">sign in </a>
+        <a href="/logout">Logout</a>
+    </div>
+    <div class="main">
+        <div class="description">This is User's Profile Page</div>
+        <hr>
+        <h2>Welcome {{user['username']}}.<a href="reset.html">  Change Password</a></h2>
+        <form method="post" enctype="multipart/form-data" class="update_profile">
+           <div class="row">
+               <div class="column side">
+                   <label for="email">Email :</label>
+                   <input id="email" type="text" name="email" value ="{{user['email']}}" required>
+                   <br/>
+                   <label>Gender :</label><br>
+                   <input type="radio" name="gender" value="Male" id="male" {{check_male}} required>
+                   <label for="male">Male</label><br>
+                   <input type="radio" name="gender" value="Female" id="female" {{check_female}} required>
+                   <label for="female">Female</label><br>
+                   <input type="radio" name="gender" value="N/A" id="na" {{check_NA}} required>
+                   <label for="na">N/A</label><br>
+
+                   <br/>
+                   <label for="birth">Date of Birth:</label>
+                   <input id="birth" type="date" name="birth" value="{{user['birth']}}" required>
+                   <br/>
+                   <label for="personal_page">Personal Page:</label>
+                   <input id="personal_page" type="text" name="personal_page" value="{{user['personal_page']}}" required>
+               </div>
+               <div class="column middle">
+                   <label for="icon">User Picture</label><br>
+                   <label for="icon">
+                       <img src="static/images/{{user['icon']}}" id="pic" width=250 /></label><br>
+                   <input id="icon" type="file" name="icon" required>
+               </div>
+           </div>
+           <div class="bot_profile">
+               <label for="introduction">Introduction </label><br/>
+               <textarea id="introduction"  name="introduction" rows="10" required>{{user['introduction']}}</textarea>
+               <input type="submit" value="Submit">
+               <input type="reset">
+           </div>
+        </form>
+    </div>
+    
+{% endif %}
+
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/templates/reset.html b/templates/templates/reset.html
new file mode 100644
index 0000000..eb33995
--- /dev/null
+++ b/templates/templates/reset.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Project Name</title>
+    <style>
+      div {
+          background-color: #FDF6EC;
+          width: 100%;
+          
+          padding: 50px;
+          margin: 20px;
+      }
+
+      .header a{
+          border: 1px solid;
+          display: inline-block;
+          min-width: 150px;
+          text-align: center;
+          line-height: 50px;
+          font-size: 20px;
+          background-color: #B7CADB;
+          color: black;
+          text-decoration: none;
+          border: 1px solid black;
+          margin: 20px 2px;
+      }
+      #select_color {
+  color: white;
+  background-color: #FDF6EC;
+}
+
+     
+      
+  </style>
+</head>
+
+<body>
+    <h1>Project Name</h1>
+
+    <div class="header">
+        <a href="homepage.html" >Home</a>
+        <a href="about.html" >About</a>
+        <a href="SignUp.html">Register</a>
+        <a href="index.html" class="profile">sign in </a>
+        <a href="/logout">Logout</a>
+    </div>
+    <div class="main">
+        <div class="description">This is change password Page, get back into your account </div>
+        <hr>
+        <div class="login">
+            <form method="post">
+                <label for="username">Username:</label>
+                <input type="text" name="username" id="username" required onkeyup="check_user()"><span id="display_exist"></span><br>
+                <label for="old_password">Old password:</label>
+                <input type="password" name="old_password" id="old_password" required><br>
+                <label for="new_password">New password:</label>
+                <input type="password" name="new_password" id="new_password" required onkeyup="password_validation(); check_password_match()">
+                <span id="valid_pw"></span><br><br>
+                <label for="cnew_password">Confirm your new password:</label>
+                <input type="password" name="cnew_password" id="cnew_password" required onkeyup="check_password_match()">
+                <span id="checkpw"></span><br>
+                <input type="submit" id="submit" value="Next">
+            </form>
+        </div>
+        <p class="casualCase"><a href="index.html">Cancel</a></p>
+    </div>
+</body>
+</html>
\ No newline at end of file
