fixbug410

README.md

@@ -11,14 +11,15 @@ Hui Lan <hui.lan@cantab.net>
 
 
 EnglishPal allows the user to build his list of new English words
-picked from articles selected for him to read according his vocabulary level.  EnglishPal will determine a user's vocabulary level based on his picked words.  After that, it will recommend articles for him to read, in order to booster his English vocabulary furthermore.
+picked from articles selected for him according his vocabulary level.
 
 
-## Run on your own laptop
+## Run it on a local machine
+
 
 `python3 main.py`
 
-Make sure you have put the SQLite database file in the path `app/static` (see below).
+Make sure you have the SQLite database file in `app/static` (see below).
 
 
 ## Run it as a Docker container
@@ -28,32 +29,32 @@ Assuming that docker has been installed and that you are a sudo user (i.e., sudo
 
 `sudo ./build.sh`
 
-Open your favourite Internet browser and enter this URL address: `http://ip-address:90`.  Note: you must update the variable `DEPLOYMENT_DIR` in `build.sh`.
+Open your favourite Internet browser and enter this URL address: `http://ip-address:90`.
 
 ### Explanation on the commands in build.sh
 
-My steps for deploying English on a Ubuntu server.
+My steps for deploying English on the server.
 
 - ssh to ubuntu@118.*.*.118
 
-- cd to `/home/lanhui/englishpal2/EnglishPal`
+- cd to /home/lanhui/englishpal2/EnglishPal
 
 - Stop all docker service: `sudo service docker restart`.  If you know the docker container ID, then the above command is an overkill.  Use the following command instead: `sudo docker stop ContainerID`.  You could get all container IDs with the following command: `sudo docker ps`
 
-- Rebuild container. Run the following command to rebuild a docker image each time after the source code gets updated: `sudo docker build -t englishpal .`
+- Rebuild container. Run the following command to rebuild a docker image after the code gets updated: `sudo docker build -t englishpal .`
 
-- Run the application: `sudo docker run -d -p 90:80 -v /home/lanhui/englishpal2/EnglishPal/app/static/frequency:/app/static/frequency -t englishpal`. If you use `sudo docker run -d -p 90:80 -t englishpal`, data will be lost after terminating the program.  If you want to automatically restart the docker image after each system reboot, add the option `--restart=always` after `docker run`.
+- Run the application: `sudo docker run -d -p 90:80 -v /home/lanhui/englishpal2/EnglishPal/app/static/frequency:/app/static/frequency -t englishpal`. If you use `sudo docker run -d -p 90:80 -t englishpal`, data will be lost after terminating the program.
 
-- Save disk space: `sudo docker system prune -a -f`
-
-`build.sh` contains all the above commands.  Run "sudo ./build.sh" to rebuild and start the web application.
+- Save space: `sudo docker system prune -a -f`
 
 
-#### Other useful docker commands
+### Other useful docker commands
 
 - `sudo docker ps -a`
 
-- `sudo docker logs image_name`, where `image_name` could be obtained from `sudo docker ps`.
+- `sudo docker logs image_name`, where image_name could be obtained from `sudo docker ps`.
+
+`build.sh` contains all the above commands.  Run "sudo ./build.sh" to rebuild and run the web application.
 
 
 
@@ -67,10 +68,6 @@ All articles are stored in the `article` table in a SQLite file called
 
 To add articles, open and edit `app/static/wordfreqapp.db` using DB Browser for SQLite (https://sqlitebrowser.org).
 
-### Extending an account's expiry date
-
-By default, an account's expiry is 30 days after first sign-up.  To extend account's expiry date, open and edit `user` table in `app/static/wordfreqapp.db`.  Simply update field `expiry_date`.
-
 ### Exporting the database
 
 Export wordfreqapp.db to wordfreqapp.sql using the following commands:
@@ -95,31 +92,33 @@ sqlite3 wordfreqapp.db`.  Delete wordfreqapp.db first if it exists.
 ### Uploading wordfreqapp.db to the server
 
 
-`pscp wordfreqapp.db lanhui@118.*.*.118:/home/lanhui/englishpal2/EnglishPal/app/static`
+`pscp wordfreqapp.db lanhui@118.*.*.118:/home/lanhui/englishpal/app/static`
 
 
 
 ## Feedback
 
-We welcome feedback on EnglishPal.  Feedback examples:
+We welcome feedback on EnglishPal.
 
-### Feedback 1
-
-- "Need a phone app.  I use phone a lot.  You cannot ask students to use computers."
+### Respondent 1
 
 
-### Feedback 2
+"Need a phone app.  I use phone a lot.  You cannot ask students to use computers."
+
+Can take a picture for text.  Automatic translation.
+
+### Respondent 2
 
 
-- “成为会员”改成“注册”
+“成为会员”改成“注册”
 
-- “登出”改成“退出”
+“登出”改成“退出”
 
-- “收集生词吧”改成“生词收集栏”
+“收集生词吧”改成“生词收集栏”
 
-- 不要自动显示下一篇
+“不要自动显示下一篇”
 
-- 需要有“上一篇”、“下一篇”按钮。
+需要有“上一篇”、“下一篇”
 
 
 
@@ -138,7 +137,7 @@ EnglishPal's bugs and improvement suggestions are recorded in [Bugzilla](http://
 - Usability testing
 
 
-## Improvements made by contributors (incomplete list)
+## Improvements made by contributors
 
 
 ### 朱文绮
@@ -160,6 +159,7 @@ too many words that they already know, on the other hand, it can
 reduce unnecessary memory occupied by the database, in addition, it
 can also improve the simplicity of the page.
 
+More information at: http://118.25.96.118/kanboard/?controller=TaskViewController&action=readonly&task_id=736&token=81a561da57ff7a172da17a480f0d421ff3bc69efbd29437daef90b1b8959
 
 
 ### 占健豪
@@ -181,14 +181,4 @@ Demo video link: https://b23.tv/QuB77m
 Bug report: http://118.25.96.118/bugzilla/show_bug.cgi?id=215
 
 
-
-### 丁锐
-
-修复了以下漏洞
-
-漏洞：新用户在创建账号时，不需要输入确定密码也可以注册成功，并且新账户可以正常使用。
-
-Bug report: http://118.25.96.118/bugzilla/show_bug.cgi?id=489
-
-
-*Last modified on 2023-01-30*
+*Last modified on 2021-10-17*

app/Article.py

@@ -68,7 +68,7 @@ def get_today_article(user_word_list, articleID):
     s += '<div class="p-3 mb-2 bg-light text-dark">'
     article_title = get_article_title(d['text'])
     article_body = get_article_body(d['text'])
-    s += '<p class="display-5">%s</p>' % (article_title)
+    s += '<p class="display-3">%s</p>' % (article_title)
     s += '<p class="lead"><font id="article" size=2>%s</font></p>' % (article_body)
     s += '<p><small class="text-muted">%s</small></p>' % (d['source'])
     s += '<p><b>%s</b></p>' % (get_question_part(d['question']))

app/Login.py

@@ -1,6 +1,5 @@
 import hashlib
-import string
-from datetime import datetime, timedelta
+from datetime import datetime
 from UseSqlite import InsertQuery, RecordQuery
 
 path_prefix = '/var/www/wordfreq/wordfreq/'
@@ -23,7 +22,7 @@ def verify_user(username, password):
 
 def add_user(username, password):
     start_date = datetime.now().strftime('%Y%m%d')
-    expiry_date = (datetime.now() + timedelta(days=30)).strftime('%Y%m%d') # will expire after 30 days
+    expiry_date = '20221230'
     # 将用户名和密码一起加密，以免暴露不同用户的相同密码
     password = md5(username + password)
     rq = InsertQuery(path_prefix + 'static/wordfreqapp.db')
@@ -82,32 +81,3 @@ def md5(s):
     '''
     h = hashlib.md5(s.encode(encoding='utf-8'))
     return h.hexdigest()
-
-
-class UserName:
-    def __init__(self, username):
-        self.username = username
-
-    def validate(self):
-        if len(self.username) > 20:
-            return f'{self.username} is too long.  The user name cannot exceed 20 characters.'
-        if self.username.startswith('.'): # a user name must not start with a dot
-            return 'Period (.) is not allowed as the first letter in the user name.'
-        if ' ' in self.username: # a user name must not include a whitespace
-            return 'Whitespace is not allowed in the user name.'
-        for c in self.username: # a user name must not include special characters, except non-leading periods or underscores
-            if c in string.punctuation and c is not '.' and c is not '_':
-                return f'{c} is not allowed in the user name.'
-        if self.username in ['signup', 'login', 'logout', 'reset', 'mark', 'back', 'unfamiliar', 'familiar', 'del']:
-            return 'You used a restricted word as your user name.  Please come up with a better one.'
-
-        return 'OK'
-
-
-class WarningMessage:
-    def __init__(self, s):
-        self.s = s
-
-    def __str__(self):
-        return UserName(self.s).validate()
-

app/account_service.py

@@ -1,10 +1,10 @@
 from flask import *
-from Login import check_username_availability, verify_user, add_user, get_expiry_date, change_password, WarningMessage
-
+from Login import check_username_availability, verify_user, add_user, get_expiry_date, change_password
 
 # 初始化蓝图
 accountService = Blueprint("accountService", __name__)
 
+
 ### Sign-up, login, logout ###
 @accountService.route("/signup", methods=['GET', 'POST'])
 def signup():
@@ -19,12 +19,6 @@ def signup():
         # POST方法需判断是否注册成功，再根据结果返回不同的内容
         username = escape(request.form['username'])
         password = escape(request.form['password'])
-        password2 = escape(request.form['password2'])
-        
-        #! 添加如下代码为了过滤注册时的非法字符
-        warn = WarningMessage(username)
-        if str(warn) != 'OK':
-            return str(warn)
 
         available = check_username_availability(username)
         if not available: # 用户名不可用
@@ -32,8 +26,6 @@ def signup():
             return render_template('signup.html')
         elif len(password.strip()) < 4: # 密码过短
             return '密码过于简单。'
-        elif password != password2:
-            return '确认密码与输入密码不一致！'
         else: # 添加账户信息
             add_user(username, password)
             verified = verify_user(username, password)
@@ -50,7 +42,6 @@ def signup():
                 return '用户名密码验证失败。'
 
 
-
 @accountService.route("/login", methods=['GET', 'POST'])
 def login():
     '''
@@ -115,13 +106,6 @@ def reset():
         # POST请求用于提交修改后信息
         old_password = escape(request.form['old-password'])
         new_password = escape(request.form['new-password'])
-
-        re_new_password = escape(request.form['re-new-password'])  # 确认新密码
-        if re_new_password != new_password: #验证新密码两次输入是否相同
-            return '新密码不匹配，请重新输入'
-        if len(new_password) < 4: #验证新密码长度，原则参照注册模块
-            return '密码过于简单。(密码长度至少4位)'
-
         flag = change_password(username, old_password, new_password) # flag表示是否修改成功
         if flag:
             session['logged_in'] = False

app/main.py

@@ -6,62 +6,214 @@
 # Written permission must be obtained from the author for commercial uses.
 ###########################################################################
 
-from flask import escape
-from Login import *
-from Article import *
-import Yaml
-from user_service import userService
-from account_service import accountService
+from WordFreq import WordFreq
+from wordfreqCMD import youdao_link, sort_in_descending_order
+from UseSqlite import InsertQuery, RecordQuery
+import pickle_idea, pickle_idea2
+import os
+import random, glob
+from datetime import datetime
+from flask import Flask, request, redirect, render_template, url_for, session, abort, flash, get_flashed_messages
+from difficulty import get_difficulty_level, text_difficulty_level, user_difficulty_level
+
 app = Flask(__name__)
 app.secret_key = 'lunch.time!'
 
-# 将蓝图注册到Lab app
-app.register_blueprint(userService)
-app.register_blueprint(accountService)
-
 path_prefix = '/var/www/wordfreq/wordfreq/'
 path_prefix = './' # comment this line in deployment
 
-
 def get_random_image(path):
-    '''
-    返回随机图
-    :param path: 图片文件(JPEG格式)，不包含后缀名
-    :return:
-    '''
     img_path = random.choice(glob.glob(os.path.join(path, '*.jpg')))
-
     return img_path[img_path.rfind('/static'):]
 
-
 def get_random_ads():
-    '''
-    返回随机广告
-    :return: 一个广告(包含HTML标签)
-    '''
     ads = random.choice(['个性化分析精准提升', '你的专有单词本', '智能捕捉阅读弱点，针对性提高你的阅读水平'])
     return ads + '。 <a href="/signup">试试</a>吧！'
 
+def total_number_of_essays():
+    rq = RecordQuery(path_prefix + 'static/wordfreqapp.db')
+    rq.instructions("SELECT * FROM article")
+    rq.do()
+    result = rq.get_results()
+    return  len(result)
+
+def load_freq_history(path):
+    d = {}
+    if os.path.exists(path):
+        d = pickle_idea.load_record(path)
+    return d
+
+def verify_user(username, password):
+    rq = RecordQuery(path_prefix + 'static/wordfreqapp.db')
+    rq.instructions_with_parameters("SELECT * FROM user WHERE name=? AND password=?", (username, password))
+    rq.do_with_parameters()
+    result = rq.get_results()
+    return result != []
+
+def add_user(username, password):
+    start_date = datetime.now().strftime('%Y%m%d')
+    expiry_date = '20211230'
+    rq = InsertQuery(path_prefix + 'static/wordfreqapp.db')
+    rq.instructions("INSERT INTO user Values ('%s', '%s', '%s', '%s')" % (username, password, start_date, expiry_date))
+    rq.do()
+
+    
+def check_username_availability(username):
+    rq = RecordQuery(path_prefix + 'static/wordfreqapp.db')
+    rq.instructions("SELECT * FROM user WHERE name='%s'" % (username))
+    rq.do()
+    result = rq.get_results()
+    return  result == []
+
+def get_expiry_date(username):
+    rq = RecordQuery(path_prefix + 'static/wordfreqapp.db')
+    rq.instructions("SELECT expiry_date FROM user WHERE name='%s'" % (username))
+    rq.do()
+    result = rq.get_results()
+    if len(result) > 0:
+        return  result[0]['expiry_date']
+    else:
+        return '20191024'
+    
+
+
+def within_range(x, y, r):
+    return x > y and abs(x - y) <= r 
+
+
+def get_article_title(s):
+    return s.split('\n')[0]
+
+
+def get_article_body(s):
+    lst = s.split('\n')
+    lst.pop(0) # remove the first line
+    return '\n'.join(lst) 
+
+def get_today_article(user_word_list, articleID):
+
+    rq = RecordQuery(path_prefix + 'static/wordfreqapp.db')
+    if articleID == None:    
+        rq.instructions("SELECT * FROM article")
+    else:
+        rq.instructions('SELECT * FROM article WHERE article_id=%d' % (articleID))
+    rq.do()
+    result = rq.get_results()
+    random.shuffle(result)
+    
+    # Choose article according to reader's level
+    d1 = load_freq_history(path_prefix + 'static/frequency/frequency.p')
+    d2 = load_freq_history(path_prefix + 'static/words_and_tests.p')
+    d3 = get_difficulty_level(d1, d2)
+
+    d = {}
+    d_user = load_freq_history(user_word_list)
+    user_level = user_difficulty_level(d_user, d3) # more consideration as user's behaviour is dynamic. Time factor should be considered.
+    random.shuffle(result) # shuffle list
+    d = random.choice(result)
+    text_level = text_difficulty_level(d['text'], d3)
+    if articleID == None:
+        for reading in result:
+            text_level = text_difficulty_level(reading['text'], d3)
+            factor = random.gauss(0.8, 0.1) # a number drawn from Gaussian distribution with a mean of 0.8 and a stand deviation of 1
+            if within_range(text_level, user_level, (8.0 - user_level)*factor):
+                d = reading
+                break
+            
+    s = '<div class="alert alert-success" role="alert">According to your word list, your level is <span class="badge bg-success">%4.2f</span>  and we have chosen an article with a difficulty level of <span class="badge bg-success">%4.2f</span> for you.</div>' % (user_level, text_level)
+    s += '<p class="text-muted">Article added on: %s</p>' % (d['date'])
+    s += '<div class="p-3 mb-2 bg-light text-dark">'
+    article_title = get_article_title(d['text'])
+    article_body = get_article_body(d['text'])
+    s += '<p class="display-3">%s</p>' % (article_title)
+    s += '<p class="lead">%s</p>' % (article_body)
+    s += '<p><small class="text-muted">%s</small></p>' % (d['source'])
+    s += '<p><b>%s</b></p>' % (get_question_part(d['question']))
+    s = s.replace('\n', '<br/>')    
+    s += '%s' % (get_answer_part(d['question']))
+    s += '</div>'
+    session['articleID'] = d['article_id']
+    return s
+
 
 def appears_in_test(word, d):
-    '''
-    如果字符串里没有指定的单词，则返回逗号加单词
-    :param word: 指定单词
-    :param d: 字符串
-    :return: 逗号加单词
-    '''
     if not word in d:
         return ''
     else:
         return ','.join(d[word])
 
 
+def get_time():
+    return datetime.now().strftime('%Y%m%d%H%M') # upper to minutes
+
+
+def get_question_part(s):
+    s = s.strip()
+    result = []
+    flag = 0
+    for line in s.split('\n'):
+        line = line.strip()
+        if line == 'QUESTION':
+            result.append(line)
+            flag = 1
+        elif line == 'ANSWER':
+            flag = 0
+        elif flag == 1:
+            result.append(line)
+    return '\n'.join(result)
+
+
+def get_answer_part(s):
+    s = s.strip()
+    result = []
+    flag = 0
+    for line in s.split('\n'):
+        line = line.strip()
+        if line == 'ANSWER':
+            flag = 1
+        elif flag == 1:
+            result.append(line)
+    # https://css-tricks.com/snippets/javascript/showhide-element/
+    js = '''
+<script type="text/javascript">
+
+    function toggle_visibility(id) {
+       var e = document.getElementById(id);
+       if(e.style.display == 'block')
+          e.style.display = 'none';
+       else
+          e.style.display = 'block';
+    }
+</script>   
+    '''
+    html_code = js
+    html_code += '\n'
+    html_code += '<button onclick="toggle_visibility(\'answer\');">ANSWER</button>\n'
+    html_code += '<div id="answer" style="display:none;">%s</div>\n' % ('\n'.join(result))
+    return html_code
+
+
+def get_flashed_messages_if_any():
+    messages = get_flashed_messages()
+    s = ''
+    for message in messages:
+        s += '<div class="alert alert-warning" role="alert">'
+        s += f'Congratulations! {message}'
+        s += '</div>'
+    return s
+
+
+@app.route("/<username>/reset", methods=['GET', 'POST'])
+def user_reset(username):
+    if request.method == 'GET':
+        session['articleID'] = None
+        return redirect(url_for('userpage', username=username))
+    else:
+        return 'Under construction'
+
+
 @app.route("/mark", methods=['GET', 'POST'])
 def mark_word():
-    '''
-    标记单词
-    :return: 重定位到主界面
-    '''
     if request.method == 'POST':
         d = load_freq_history(path_prefix + 'static/frequency/frequency.p')
         lst_history = pickle_idea.dict2lst(d)
@@ -71,45 +223,318 @@ def mark_word():
         d = pickle_idea.merge_frequency(lst, lst_history)
         pickle_idea.save_frequency_to_pickle(d, path_prefix + 'static/frequency/frequency.p')
         return redirect(url_for('mainpage'))
-    else: # 不回应GET请求
+    else:
         return 'Under construction'
 
 
+
 @app.route("/", methods=['GET', 'POST'])
 def mainpage():
-    '''
-    根据GET或POST方法来返回不同的主界面
-    :return: 主界面
-    '''
     if request.method == 'POST':  # when we submit a form
-        content = escape(request.form['content'])
+        content = request.form['content']
         f = WordFreq(content)
         lst = f.get_freq()
+        page = '<form method="post" action="/mark">\n'
+        count = 1
+        for x in lst:
+            page += '<p><font color="grey">%d</font>: <a href="%s">%s</a> (%d)  <input type="checkbox" name="marked" value="%s"></p>\n' % (count, youdao_link(x[0]), x[0], x[1], x[0])
+            count += 1
+        page += ' <input type="submit" value="确定并返回"/>\n'
+        page += '</form>\n'
         # save history 
         d = load_freq_history(path_prefix + 'static/frequency/frequency.p')
         lst_history = pickle_idea.dict2lst(d)
         d = pickle_idea.merge_frequency(lst, lst_history)
         pickle_idea.save_frequency_to_pickle(d, path_prefix + 'static/frequency/frequency.p')
-        return render_template('mainpage_post.html', lst=lst, yml=Yaml.yml)
+        
+        return page
+    elif request.method == 'GET': # when we load a html page
+        page = '''
+             <html lang="zh">
+               <head>
+               <meta charset="utf-8">
+               <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0, user-scalable=yes" />
+               <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+
+                 <title>EnglishPal 英文单词高效记</title>
+
+               </head>
+               <body>
+        '''
+        page += '<div class="container-fluid">'
+        page += '<p><b><font size="+3" color="red">English Pal - Learn English smartly!</font></b></p>'
+        if session.get('logged_in'):
+            page += ' <a href="%s">%s</a></p>\n' % (session['username'], session['username'])
+        else:
+            page += '<p><a href="/login">登录</a>  <a href="/signup">成为会员</a> <a href="/static/usr/instructions.html">使用说明</a></p>\n'
+        #page += '<p><img src="%s" width="400px" alt="advertisement"/></p>' % (get_random_image(path_prefix + 'static/img/'))
+        page += '<p><b>%s</b></p>' % (get_random_ads())
+        page += '<div class="alert alert-success" role="alert">共有文章 <span class="badge bg-success"> %d </span> 篇</div>' % (total_number_of_essays())
+        page += '<p>粘帖1篇文章 (English only)</p>'
+        page += '<form method="post" action="/">'
+        page += ' <textarea name="content" rows="10" cols="120"></textarea><br/>'
+        page += ' <input type="submit" value="get文章中的词频"/>'
+        page += ' <input type="reset" value="清除"/>'
+        page += '</form>'
+        d = load_freq_history(path_prefix + 'static/frequency/frequency.p')
+        if len(d) > 0:
+            page += '<p><b>最常见的词</b></p>'
+            for x in sort_in_descending_order(pickle_idea.dict2lst(d)):
+                if x[1] <= 99:
+                    break
+                page += '<a href="%s">%s</a> %d\n' % (youdao_link(x[0]), x[0], x[1])
+
+        page += ' <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>'
+        page += '</div>'
+        page += '</body></html>'
+        return page
+
+
+@app.route("/<username>/mark", methods=['GET', 'POST'])
+def user_mark_word(username):
+    username = session[username]
+    user_freq_record = path_prefix + 'static/frequency/' +  'frequency_%s.pickle' % (username)
+    if request.method == 'POST':
+        d = load_freq_history(user_freq_record)
+        lst_history = pickle_idea2.dict2lst(d)
+        lst = []
+        for word in request.form.getlist('marked'):
+            lst.append((word, [get_time()]))
+        d = pickle_idea2.merge_frequency(lst, lst_history)
+        pickle_idea2.save_frequency_to_pickle(d, user_freq_record)
+        return redirect(url_for('userpage', username=username))
+    else:
+        return 'Under construction'
+
+
+@app.route("/<username>/<word>/unfamiliar", methods=['GET', 'POST'])
+def unfamiliar(username,word):
+    user_freq_record = path_prefix + 'static/frequency/' + 'frequency_%s.pickle' % (username)
+    pickle_idea.unfamiliar(user_freq_record,word)
+    session['thisWord'] = word  # 1. put a word into session
+    session['time'] = 1
+    return redirect(url_for('userpage', username=username))
+
+@app.route("/<username>/<word>/familiar", methods=['GET', 'POST'])
+def familiar(username,word):
+    user_freq_record = path_prefix + 'static/frequency/' + 'frequency_%s.pickle' % (username)
+    pickle_idea.familiar(user_freq_record,word)
+    session['thisWord'] = word  # 1. put a word into session
+    session['time'] = 1
+    return redirect(url_for('userpage', username=username))
+
+@app.route("/<username>/<word>/del", methods=['GET', 'POST'])
+def deleteword(username,word):
+    user_freq_record = path_prefix + 'static/frequency/' + 'frequency_%s.pickle' % (username)
+    pickle_idea2.deleteRecord(user_freq_record,word)
+    flash(f'<strong>{word}</strong> is no longer in your word list.')
+    return redirect(url_for('userpage', username=username))
+
+@app.route("/<username>", methods=['GET', 'POST'])
+def userpage(username):
+    
+    if not session.get('logged_in'):
+        return '<p>请先<a href="/login">登录</a>。</p>'
+
+    user_expiry_date = session.get('expiry_date')
+    if datetime.now().strftime('%Y%m%d') > user_expiry_date:
+        return '<p>账号 %s 过期。</p><p>为了提高服务质量，English Pal 收取会员费用， 每天0元。</p> <p>请决定你要试用的时间长度，扫描下面支付宝二维码支付。 支付时请注明<i>English Pal Membership Fee</i>。 我们会于12小时内激活账号。</p><p><img src="static/donate-the-author-hidden.jpg" width="120px" alt="支付宝二维码" /></p><p>如果有问题，请加开发者微信 torontohui。</p> <p><a href="/logout">登出</a></p>' % (username)
+
+    
+    username = session.get('username')
+
+    user_freq_record = path_prefix + 'static/frequency/' +  'frequency_%s.pickle' % (username)
+    
+    if request.method == 'POST':  # when we submit a form
+        content = request.form['content']
+        f = WordFreq(content)
+        lst = f.get_freq()
+        page = '<meta charset="UTF8">'        
+        page += '<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0, user-scalable=yes" />'        
+        page += '<p>勾选不认识的单词</p>'
+        page += '<form method="post" action="/%s/mark">\n' % (username)
+        page += ' <input type="submit" name="add-btn" value="加入我的生词簿"/>\n'        
+        count = 1
+        words_tests_dict = pickle_idea.load_record(path_prefix + 'static/words_and_tests.p')        
+        for x in lst:
+            page += '<p><font color="grey">%d</font>: <a href="%s" title="%s">%s</a> (%d)  <input type="checkbox" name="marked" value="%s"></p>\n' % (count, youdao_link(x[0]), appears_in_test(x[0], words_tests_dict), x[0], x[1], x[0])
+            count += 1
+        page += '</form>\n'
+        return page
     
     elif request.method == 'GET': # when we load a html page
-        random_ads = get_random_ads()
-        number_of_essays = total_number_of_essays()
-        d = load_freq_history(path_prefix + 'static/frequency/frequency.p')
-        d_len = len(d)
-        lst = sort_in_descending_order(pickle_idea.dict2lst(d))
-        return render_template('mainpage_get.html', random_ads=random_ads, number_of_essays=number_of_essays,
-                               d_len=d_len, lst=lst, yml=Yaml.yml)
+        page = '<meta charset="UTF8">\n'
+        page += '<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0, user-scalable=yes" />\n'
+        page += '<meta name="format-detection" content="telephone=no" />\n' # forbid treating numbers as cell numbers in smart phones
+        page += '<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">'
+        page += '<title>EnglishPal Study Room for %s</title>' % (username)
+        page += '<div class="container-fluid">'
+        page += '<p><b>English Pal for <font color="red">%s</font></b> <a class="btn btn-secondary" href="/logout" role="button">登出</a></p>' % (username)
+        page += get_flashed_messages_if_any()
+        page += '<p><b>阅读文章并回答问题</b></p>\n'
+        page += '<p><a class="btn btn-success" href="/%s/reset" role="button"> 下一篇 Next Article </a></p>' % (username)
+        page += '<div id="text-content">%s</div>'  % (get_today_article(user_freq_record, session['articleID']))
+        page += '<p><b>收集生词吧</b> （可以在正文中划词，也可以复制黏贴）</p>'
+        page += '<form method="post" action="/%s">' % (username)
+        page += ' <textarea name="content" id="selected-words" rows="10" cols="120"></textarea><br/>'
+        page += ' <input type="submit" value="get 所有词的频率"/>'
+        page += ' <input type="reset" value="清除"/>'
+        page += '</form>\n'
+        page += ''' 
+                 <script>
+                   function getWord(){ 
+                       var word = window.getSelection?window.getSelection():document.selection.createRange().text;
+                       return word;
+                   }
+                   function fillinWord(){
+                       var element = document.getElementById("selected-words");
+                       element.value = element.value + " " + getWord();
+                   }
+                   document.getElementById("text-content").addEventListener("click", fillinWord, false);
+                   document.getElementById("text-content").addEventListener("touchstart", fillinWord, false);
+                 </script>
+                 '''
+        if session.get('thisWord'):
+            page += '''
+                   <script type="text/javascript">
+                        //point to the anchor in the page whose id is aaa if it exists
+                        window.onload = function(){
+                            var element = document.getElementsByName("aaa");
+                            if (element != null)
+                                document.getElementsByName("aaa")[0].scrollIntoView(true);
+                        }
+                   </script> 
+                   '''
 
+        d = load_freq_history(user_freq_record)
+        if len(d) > 0:
+            page += '<p><b>我的生词簿</b></p>'
+            lst = pickle_idea2.dict2lst(d)
+            lst2 = []
+            for t in lst:
+                lst2.append((t[0], len(t[1])))
+            for x in sort_in_descending_order(lst2):
+                word = x[0]
+                freq = x[1]
+                if session.get('thisWord') == x[0] and session.get('time') == 1:
+                    page += '<a name="aaa"></a>'    # 3. anchor
+                    session['time'] = 0   # discard anchor
+                if isinstance(d[word], list): # d[word] is a list of dates
+                    if freq > 1:
+                        page += '<p class="new-word"> <a class="btn btn-light" href="%s" role="button">%s</a>(<a title="%s">%d</a>) <a class="btn btn-success" href="%s/%s/familiar" role="button">熟悉</a> <a class="btn btn-warning" href="%s/%s/unfamiliar" role="button">不熟悉</a>  <a class="btn btn-danger" href="%s/%s/del" role="button">删除</a> </p>\n' % (youdao_link(word), word, '; '.join(d[word]), freq,username, word,username,word, username,word)
+                    else:
+                        page += '<p class="new-word"> <a class="btn btn-light" href="%s" role="button">%s</a>(<a title="%s">%d</a>) <a class="btn btn-success" href="%s/%s/familiar" role="button">熟悉</a> <a class="btn btn-warning" href="%s/%s/unfamiliar" role="button">不熟悉</a>  <a class="btn btn-danger" href="%s/%s/del" role="button">删除</a> </p>\n' % (youdao_link(word), word, '; '.join(d[word]), freq,username, word,username,word, username,word)
+                elif isinstance(d[word], int): # d[word] is a frequency. to migrate from old format.
+                    page += '<a href="%s">%s</a>%d\n' % (youdao_link(word), word, freq)
+        page += '<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>'
+        page += '</div>'
+        return page
+
+### Sign-up, login, logout ###
+@app.route("/signup", methods=['GET', 'POST'])
+def signup():
+    if request.method == 'GET':
+        return render_template('signup.html')
+    elif request.method == 'POST':
+        username = request.form['username']
+        password = request.form['password']
+
+
+
+
+def check_number_exist(password_str):
+    """
+    判断密码是否含有数字
+
+    """
+    for c in password_str:
+        if c.isnumeric():
+            return True
+    return False
+
+def check_letter_exist(password_str):
+    """
+    判断密码是否含有字母
+
+    """
+    for c in password_str:
+        if c.isalpha():
+            return True
+    return False
+#规则1：密码长度大于8
+    if len(password) >= 8:
+        strength_level += 1
+    else:
+        print('密码强度要求至少8位')
+
+    #规则2：密码必须包含数字
+    if check_number_exist(password):
+        strength_level += 1
+    else:
+        print('密码要求包含数字')
+
+    #规则3：密码必须包含字母
+    if check_letter_exist(password):
+        strength_level += 1
+    else:
+        print('密码要求包含字母')
+
+
+
+        available = check_username_availability(username)
+        if not available:
+            flash('用户名 %s 已经被注册。' % (username))
+            return render_template('signup.html')
+        elif len(password.strip()) < 4:
+            return '密码过于简单。'
+        else:
+            add_user(username, password)
+            verified = verify_user(username, password)
+            if verified:
+                session['logged_in'] = True
+                session[username] = username
+                session['username'] = username
+                session['expiry_date'] = get_expiry_date(username)
+                session['articleID'] = None
+                return '<p>恭喜，你已成功注册， 你的用户名是 <a href="%s">%s</a>。</p>\
+                <p><a href="/%s">开始使用</a> <a href="/">返回首页</a><p/>' % (username, username, username)
+            else:
+                return '用户名密码验证失败。'
+
+
+@app.route("/login", methods=['GET', 'POST'])
+def login():
+    if request.method == 'GET':
+        if not session.get('logged_in'):
+            return render_template('login.html')
+        else:
+            return '你已登录 <a href="/%s">%s</a>。 登出点击<a href="/logout">这里</a>。' % (session['username'], session['username'])
+    elif request.method == 'POST':
+        # check database and verify user
+        username = request.form['username']
+        password = request.form['password']
+        verified = verify_user(username, password)
+        if verified:
+            session['logged_in'] = True
+            session[username] = username
+            session['username'] = username
+            user_expiry_date = get_expiry_date(username)
+            session['expiry_date'] = user_expiry_date
+            session['articleID'] = None
+            return redirect(url_for('userpage', username=username))
+        else:
+            return '无法通过验证。'
+
+
+@app.route("/logout", methods=['GET', 'POST'])
+def logout():
+    session['logged_in'] = False
+    return redirect(url_for('mainpage'))
 
 
 if __name__ == '__main__':
-    '''
-    运行程序
-    '''
     #app.secret_key = os.urandom(16)
     #app.run(debug=False, port='6000')
     app.run(debug=True)        
     #app.run(debug=True, port='6000')
     #app.run(host='0.0.0.0', debug=True, port='6000')
-    # print(mod5('123'))

app/static/config.yml

@@ -6,8 +6,8 @@ css:
 # 全局引入的js文件地址
 js:
   head: # 在页面加载之前加载
-    - static/js/jquery.js
-    - static/js/word_operation.js
+    # - static/js/APlayer.js
+    # - static/js/Meting.js
   bottom: # 在页面加载完之后加载
     - static/js/fillword.js
     - static/js/highlight.js

app/static/css/bootstrap.css

@@ -417,7 +417,7 @@ progress {
 }
 
 .lead {
-    font-size: 2rem;
+    font-size: 1.25rem;
     font-weight: 300
 }
 

app/static/css/login_service.css

@@ -1,107 +0,0 @@
-/*样式应用于login、signup、reset三个页面*/
-
-.container {
-    background-color: #FFFFFF;
-    width: 400px;
-    height: 500px;
-    margin: 7em auto;
-    border-radius: 1.5em;
-    box-shadow: 0px 11px 35px 2px rgba(0, 0, 0, 0.14);
-}
-
-/*增加一个类reset-heading*/
-.signin-heading, .reset-heading {
-    padding-top: 5px;
-    color: #8C55AA;
-    font-family: 'Ubuntu', sans-serif;
-    font-weight: bold;
-    font-size: 23px;
-    text-align: center;
-}
-
-/*增加2个类.old-password和.new-password*/
-.username, .email, .password, .re-password, .old-password, .new-password,.re-new-password {
-    width: 76%;
-    color: rgb(38, 50, 56);
-    font-weight: 700;
-    font-size: 14px;
-    letter-spacing: 1px;
-    background: rgba(136, 126, 126, 0.04);
-    padding: 10px 20px;
-    border: none;
-    border-radius: 20px;
-    outline: none;
-    box-sizing: border-box;
-    border: 2px solid rgba(124, 16, 97, 0.02);
-    margin-bottom: 50px;
-    margin-left: 46px;
-    text-align: center;
-    margin-bottom: 27px;
-    font-family: 'Ubuntu', sans-serif;
-}
-
-.btn {
-    width: 50%;
-    border: none;
-    border-radius: 20px;
-    box-sizing: border-box;
-    border: 2px solid #8C55AA;
-    margin-bottom: 50px;
-    margin-left: 90px;
-    padding: 10px 20px;
-
-}
-
-.btn:hover {
-
-    background: #8C55AA;
-    transition: .5s;
-    cursor: pointer;
-    color: #fff;
-}
-
-
-.signup {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-ul {
-    position: absolute;
-    display: flex;
-    left: 65%;
-
-}
-
-li {
-    padding: 10px;
-    margin: 10px;
-}
-
-a {
-    text-decoration: none;
-    list-style: none;
-    font-weight: bold;
-    font-family: 'ink free';
-
-}
-
-.main_menu a {
-    color: #fff;
-    font-size: 300px;
-}
-
-li :hover {
-    color: #8C55AA;
-    transition: .5s;
-}
-
-h1 {
-    font-family: 'ink free';
-
-}
-
-.main_menu h1 {
-    color: #fff;
-}

app/static/frequency/README.txt

@@ -1,5 +0,0 @@
-This folder holds users' vocabulary files.
-Each file ends with .pickle.
-For example, mrlan.pickle is the vocabulary file for user mrlan.
-
-

app/static/js/fillword.js

@@ -1,68 +1,29 @@
-let isRead = true;
-let isChoose = true;
-let reader = window.speechSynthesis; // 全局定义朗读者，以便朗读和暂停
-let current_position = 0; // 朗读文本的当前位置
-let original_position = 0; // 朗读文本的初始位置
-let to_speak = ""; // 朗读的初始内容
+isRead = true;
+isChoose = true;
+var reader = window.speechSynthesis; // 全局定义朗读者，以便朗读和暂停
 
 function getWord(){
-    return window.getSelection ? window.getSelection() : document.selection.createRange().text;
+   var word = window.getSelection?window.getSelection():document.selection.createRange().text;
+   return word;
 }
-
-function fillInWord() {
-    let word = getWord();
+function fillinWord(){
+   var word = getWord();
    if (isRead) read(word);
    if (!isChoose) return;
-    const element = document.getElementById("selected-words");
+   var element = document.getElementById("selected-words");
    element.value = element.value + " " + word;
 }
-
-document.getElementById("text-content").addEventListener("click", fillInWord, false);
-
-function makeUtterance(str, rate) {
-    let msg = new SpeechSynthesisUtterance(str);
-    msg.rate = rate;
-    msg.lang = "en-US"; // TODO: add language options menu
-    msg.onboundary = ev => {
-        if (ev.name == "word") {
-            current_position = ev.charIndex;
-        }
-    }
-    return msg;
-}
-
-const sliderValue = document.getElementById("rangeValue"); // 显示值
-const inputSlider = document.getElementById("rangeComponent"); // 滑块元素
-inputSlider.oninput = () => {
-    let value = inputSlider.value; // 获取滑块的值
-    sliderValue.textContent = value + '×';
-    if (!reader.speaking) return;
-    reader.cancel();
-    let msg = makeUtterance(to_speak.substring(original_position + current_position), value);
-    original_position = original_position + current_position;
-    current_position = 0;
-    reader.speak(msg);
-};
-
+document.getElementById("text-content").addEventListener("click", fillinWord, false);
 function read(s){
-    to_speak = s.toString();
-    original_position = 0;
-    current_position = 0;
-    let msg = makeUtterance(to_speak, inputSlider.value);
+   var msg = new SpeechSynthesisUtterance(s);
    reader.speak(msg);
 }
-
 function onReadClick(){
     isRead = !isRead;
     if(!isRead){
        reader.cancel();
     }
 }
-
 function onChooseClick(){
     isChoose = !isChoose;
 }
-
-function stopRead() {
-    reader.cancel();
-}

app/static/js/highlight.js

@@ -1,91 +1,95 @@
-let isHighlight = true;
+var isHighlight = true;
 
 function cancelBtnHandler() {
-    cancelHighlighting();
-    document.getElementById("text-content").removeEventListener("click", fillInWord, false);
-    document.getElementById("text-content").removeEventListener("touchstart", fillInWord, false);
-    document.getElementById("text-content").addEventListener("click", fillInWord2, false);
-    document.getElementById("text-content").addEventListener("touchstart", fillInWord2, false);
+    cancel_highLight();
+    document.getElementById("text-content").removeEventListener("click", fillinWord, false);
+    document.getElementById("text-content").removeEventListener("touchstart", fillinWord, false);
+    document.getElementById("text-content").addEventListener("click", fillinWord2, false);
+    document.getElementById("text-content").addEventListener("touchstart", fillinWord2, false);
 }
 
 function showBtnHandler() {
-    document.getElementById("text-content").removeEventListener("click", fillInWord2, false);
-    document.getElementById("text-content").removeEventListener("touchstart", fillInWord2, false);
-    document.getElementById("text-content").addEventListener("click", fillInWord, false);
-    document.getElementById("text-content").addEventListener("touchstart", fillInWord, false);
+    document.getElementById("text-content").removeEventListener("click", fillinWord2, false);
+    document.getElementById("text-content").removeEventListener("touchstart", fillinWord2, false);
+    document.getElementById("text-content").addEventListener("click", fillinWord, false);
+    document.getElementById("text-content").addEventListener("touchstart", fillinWord, false);
     highLight();
 }
 
 function getWord() {
-    return window.getSelection ? window.getSelection() : document.selection.createRange().text;
+    var word = window.getSelection ? window.getSelection() : document.selection.createRange().text;
+    return word;
 }
 
 function highLight() {
     if(!isHighlight) return;
-    let articleContent = document.getElementById("article").innerText; //将原来的.innerText改为.innerHtml，使用innerText会把原文章中所包含的<br>标签去除，导致处理后的文章内容失去了原来的格式
-    let pickedWords = document.getElementById("selected-words");  // words picked to the text area
-    let dictionaryWords = document.getElementById("selected-words2"); // words appearing in the user's new words list
-    let allWords = "";  //初始化allWords的值，避免进入判断后编译器认为allWords未初始化的问题
-    if(dictionaryWords != null){//增加一个判断，检查生词本里面是否为空，如果为空，allWords只添加选中的单词
-        allWords = pickedWords.value + " " + dictionaryWords.value;
-    }
-    else{
-        allWords = pickedWords.value + " ";
-    }
-    const list = allWords.split(" ");//将所有的生词放入一个list中，用于后续处理
-    for (let i = 0; i < list.length; ++i) {
-        list[i] = list[i].replace(/(^\s*)|(\s*$)/g, ""); //消除单词两边的空字符
-        list[i] = list[i].replace('|', "");
-        list[i] = list[i].replace('?', "");
-        if (list[i] !== "" && "<mark>".indexOf(list[i]) === -1 && "</mark>".indexOf(list[i]) === -1) {
-	    //将文章中所有出现该单词word的地方改为：" <mark>" + word + "<mark> "。 正则表达式RegExp()中，"\\s"代表单词前后必须要有空格，以防止只对单词中的部分字符高亮的情况出现。
-            articleContent = articleContent.replace(new RegExp("\\s"+list[i]+"\\s", "g"), " <mark>" + list[i] + "</mark> ");
-        }
-    }
-    document.getElementById("article").innerHTML = articleContent;
-}
+    var txt = document.getElementById("article").innerText;
+    var sel_word1 = document.getElementById("selected-words");
+    var sel_word2 = document.getElementById("selected-words2");
+    if (sel_word1 != null) {
+        var list = sel_word1.value.split(" ");
+        for (var i = 0; i < list.length; ++i) {
+            list[i] = list[i].replace(/(^\s*)|(\s*$)/g, "");//消除字符串两边空字符
+            if (list[i] != "" && "<mark>".indexOf(list[i]) == -1 && "</mark>".indexOf(list[i]) == -1) {
 
-function cancelHighlighting() {
-    let articleContent = document.getElementById("article").innerText;//将原来的.innerText改为.innerHtml，原因同上
-    let pickedWords = document.getElementById("selected-words");
-    const dictionaryWords = document.getElementById("selected-words2");    
-    const list = pickedWords.value.split(" ");    
-    if (pickedWords != null) {
-        for (let i = 0; i < list.length; ++i) {
-            list[i] = list[i].replace(/(^\s*)|(\s*$)/g, "");
-            if (list[i] !== "") { //原来判断的代码中，替换的内容为“list[i]”这个字符串，这明显是错误的，我们需要替换的是list[i]里的内容
-                articleContent = articleContent.replace(new RegExp("<mark>"+list[i]+"</mark>", "g"), list[i]);
+                txt = txt.replace(new RegExp("\\s"+list[i]+"\\s", "g"), " <mark>" + list[i] + "</mark> ");
             }
         }
     }
-    if (dictionaryWords != null) {
-        let list2 = pickedWords.value.split(" ");
-        for (let i = 0; i < list2.length; ++i) {
-            list2 = dictionaryWords.value.split(" ");
+    if (sel_word2 != null) {
+        var list2 = sel_word2.value.split(" ");
+        for (var i = 0; i < list2.length; ++i) {
             list2[i] = list2[i].replace(/(^\s*)|(\s*$)/g, "");
-            if (list2[i] !== "") { //原来代码中，替换的内容为“list[i]”这个字符串，这明显是错误的，我们需要替换的是list[i]里的内容
-                articleContent = articleContent.replace(new RegExp("<mark>"+list2[i]+"</mark>", "g"), list2[i]);
+            if (list2[i] != "" && "<mark>".indexOf(list2[i]) == -1 && "</mark>".indexOf(list2[i]) == -1) {
+                txt = txt.replace(new RegExp("\\s"+list2[i]+"\\s", "g"), " <mark>" + list2[i] + "</mark> ");
             }
         }
     }
-    document.getElementById("article").innerHTML = articleContent;
+    document.getElementById("article").innerHTML = txt;
 }
 
-function fillInWord() {
+function cancel_highLight() {
+    var txt = document.getElementById("article").innerText;
+    var sel_word1 = document.getElementById("selected-words");
+    var sel_word2 = document.getElementById("selected-words2");
+    if (sel_word1 != null) {
+        var list = sel_word1.value.split(" ");
+        for (var i = 0; i < list.length; ++i) {
+            list[i] = list[i].replace(/(^\s*)|(\s*$)/g, "");
+            if (list[i] != "") {
+                txt = txt.replace("<mark>" + list[i] + "</mark>", "list[i]");
+            }
+        }
+    }
+    if (sel_word2 != null) {
+        var list2 = sel_word1.value.split(" ");
+        for (var i = 0; i < list2.length; ++i) {
+            var list2 = sel_word2.value.split(" ");
+            list2[i] = list2[i].replace(/(^\s*)|(\s*$)/g, "");
+            if (list2[i] != "") {
+                txt = txt.replace("<mark>" + list[i] + "</mark>", "list[i]");
+            }
+        }
+    }
+    document.getElementById("article").innerHTML = txt;
+}
+
+function fillinWord() {
     highLight();
 }
 
-function fillInWord2() {
-    cancelHighlighting();
+function fillinWord2() {
+    cancel_highLight();
 }
 
-function toggleHighlighting() {
+function ChangeHighlight() {
     if (isHighlight) {
         isHighlight = false;
-        cancelHighlighting();
+        cancel_highLight();
     } else {
         isHighlight = true;
         highLight();
+
     }
 }
 

app/static/js/word_operation.js

@@ -1,173 +0,0 @@
-function familiar(theWord) {
-    let username = $("#username").text();
-    let word = $("#word_" + theWord).text();
-    let freq = $("#freq_" + theWord).text();
-    $.ajax({
-        type:"GET",
-        url:"/" + username + "/" + word + "/familiar",
-        success:function(response){
-            let new_freq = freq - 1;
-            const allow_move = document.getElementById("move_dynamiclly").checked;
-            if (allow_move) {
-
-                if (new_freq <= 0) {
-                    removeWord(theWord);
-                } else {
-                    renderWord({ word: theWord, freq: new_freq });
-                }
-            } else {
-                if(new_freq <1) {
-                    $("#p_" + theWord).remove();
-                } else {
-                    $("#freq_" + theWord).text(new_freq);
-                }
-            }
-        }
-    });
-}
-
-function unfamiliar(theWord) {
-    let username = $("#username").text();
-    let word = $("#word_" + theWord).text();
-    let freq = $("#freq_" + theWord).text();
-    $.ajax({
-        type:"GET",
-        url:"/" + username + "/" + word + "/unfamiliar",
-        success:function(response){
-            let new_freq = parseInt(freq) + 1;
-            const allow_move = document.getElementById("move_dynamiclly").checked;
-            if (allow_move) {
-                renderWord({ word: theWord, freq: new_freq });
-            } else {
-                $("#freq_" + theWord).text(new_freq);
-            }
-        }
-    });
-}
-
-function delete_word(theWord) {
-    let username = $("#username").text();
-    let word = theWord.replace('&amp;', '&');
-    $.ajax({
-        type:"GET",
-        url:"/" + username + "/" + word + "/del",
-        success:function(response){
-            const allow_move = document.getElementById("move_dynamiclly").checked;
-            if (allow_move) {
-                removeWord(theWord);
-            } else {
-                $("#p_" + theWord).remove();
-            }    
-        }
-    });
-}
-
-/* 
- * interface Word {
- *   word: string,
- *   freq: number
- * }
-* */
-
-/**
- * 传入一个词频HTML元素，将其解析为Word类型的对象
- */
-function parseWord(element) {
-    const word = element
-        .querySelector("a.btn.btn-light[role=button]")  // 获取当前词频元素的词汇元素
-        .innerText  // 获取词汇值;
-    const freq = Number.parseInt(element.querySelector(`#freq_${word}`).innerText);   // 获取词汇的数量
-    return {
-        word,
-        freq
-    };
-}
-
-/**
- * 使用模板将传入的单词转换为相应的HTML字符串
-*/
-function wordTemplate(word) {
-    // 这个模板应当与 templates/userpage_get.html 中的 <p id='p_${word.word}' class="new-word" > ... </p> 保持一致
-    return `<p id='p_${word.word}' class="new-word" >
-        <a id="word_${word.word}"  class="btn btn-light" href='http://youdao.com/w/eng/${word.word}/#keyfrom=dict2.index'
-           role="button">${word.word}</a>
-        ( <a id="freq_${word.word}" title="${word.word}">${word.freq}</a> )
-        <a class="btn btn-success" onclick="familiar('${word.word}')" role="button">熟悉</a>
-        <a class="btn btn-warning" onclick="unfamiliar('${word.word}')" role="button">不熟悉</a>
-        <a class="btn btn-danger" onclick="delete_word('${word.word}')" role="button">删除</a>
-    </p>`;
-}
-
-/**
- * 删除某一词频元素
- * 此处word为词频元素对应的单词
- */
-function removeWord(word) {
-    // 根据词频信息删除元素
-    word = word.replace('&amp;', '&');
-    const element_to_remove = document.getElementById(`p_${word}`);
-    if (element_to_remove != null) {
-        element_to_remove.remove();
-    }
-}
-
-function renderWord(word) {
-    const container = document.querySelector(".word-container");
-    // 删除原有元素
-    removeWord(word.word);
-    // 插入新元素
-    let inserted = false;
-    const new_element = elementFromString(wordTemplate(word));
-    for (const current of container.children) {
-        const cur_word = parseWord(current);
-        // 找到第一个词频比它小的元素，插入到这个元素前面
-        if (compareWord(cur_word, word) == -1) {
-            container.insertBefore(new_element, current);
-            inserted = true;
-            break;
-        }
-    }
-    // 当word就是词频最小的词时，把他补回去
-    if (!inserted) {
-        container.appendChild(new_element);
-    }
-    // 让发生变化的元素抖动
-    new_element.classList.add("shaking");
-    // 移动到该元素
-    new_element.scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});
-    // 抖动完毕后删除抖动类
-    setTimeout(() => {
-        new_element.classList.remove("shaking");
-    }, 1600);
-}
-
-/**
- * 从string中创建一个HTML元素并返回
- */
-function elementFromString(string) {
-    const d = document.createElement('div');
-    d.innerHTML = string;
-    return d.children.item(0);
-}
-
-/**
- * 对比两个单词：
- *  当first小于second时返回-1
- *  当first等于second时返回0
- *  当first大于second时返回1
- */
-function compareWord(first, second) {
-    if (first.freq < second.freq) {
-        return -1;
-    }
-    if (first.freq > second.freq) {
-        return 1;
-    }
-    if (first.word < second.word) {
-        return -1;
-    }
-    if (first.word > second.word) {
-        return 1;
-    }
-    return 0;
-}

app/templates/expiry.html

@@ -5,7 +5,7 @@
     <title>账号过期</title>
 </head>
 <body>
-    <p>您的账号过期（过期日 {{expiry_date}}）。</p>
+    <p>您的账号{{ username }}过期。</p>
     <p>为了提高服务质量，English Pal 收取会员费用， 每天1元。</p>
     <p>请决定你要试用的时间长度，扫描下面支付宝二维码支付。 支付时请注明<i>English Pal Membership Fee</i>。 我们会于12小时内激活账号。</p>
     <p><img src="static/donate-the-author-hidden.jpg" width="120px" alt="支付宝二维码" /></p>

app/templates/login.html

@@ -5,24 +5,17 @@ You're logged in already!
 
 {% else %}
 <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0, user-scalable=yes" />
-<link rel="stylesheet" href="static/css/login_service.css">
-
-<div class="container">
-
-  <section class="signin-heading">
-    <h1>Sign In</h1>
-  </section>
-
 <form action="/login" method="POST">
-    <input type="text" placeholder="用户名" class="username" name="username" required>
-    <input type="password" placeholder="密码" class="password"  name="password" required>
-    <button type="submit" class="btn">登录</button>
+  <p>
+      <input type="username" name="username" placeholder="邮箱地址、电话号码">
+  </p>
+  <p>
+      <input type="password" name="password" placeholder="密码">
+  </p>
+  <p>
+      <input type="submit" value="登录">
+  </p>
 </form>
-
-</div>
-
-<a href="/signup" class="signup">注册</a>
-
 {% endif %}
 {% endblock %}
 

app/templates/reset.html

@@ -1,22 +1,14 @@
-{% block body %}
-    <meta charset="utf-8" name="viewport"
-          content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0, user-scalable=yes"/>
-    <link rel="stylesheet" href="static/css/login_service.css">
-
-    <div class="container">
-
-        <section class="reset-heading">
-            <h1>Reset Password</h1>
-        </section>
-
-        <form action="/reset" method="POST">
-            <input type="password" placeholder="原密码" class="old-password" name="old-password" required>
-            <input type="password" placeholder="新密码" class="new-password" name="new-password" required>
-            <input type="password" placeholder="确认新密码" class="re-new-password" name="re-new-password" required>
-            <input type="submit" name="submit" class="btn" value="提交"/>
-            <input type="button" name="submit" class="btn" value="放弃修改"
-                   onclick="window.location.href='/{{ username }}'"/>
+<html>
+    <body>
+    <form action="/reset" method='POST'>
+        旧密码:
+        <input type="password" name="old-password" />
+        <br/>
+        新密码:
+        <input type="password" name="new-password" />
+        <br/>
+        <input type="submit" name="submit" value="提交" />
+        <input type="button" name="submit" value="放弃修改" onclick="window.location.href='/{{ username }}'"/>
     </form>
-
-    </div>
-{% endblock %}
+    </body>
+</html>

app/templates/signup.html

@@ -5,25 +5,15 @@ You're logged in already! <a href="/logout">Logout</a>.
 
 {% else %}
 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0, user-scalable=yes" />
-<link rel="stylesheet" href="static/css/login_service.css">
 <p>{{ get_flashed_messages()[0] | safe }}</p>
 
-
-<div class="container">
-
-  <section class="signin-heading">
-    <h1>Sign Up</h1>
-  </section>
+<p>Sign up here.</p>
 
 <form action="/signup" method="POST">
-    <p><input type="username" name="username" placeholder="输入用户名" required="required" class="username"></p>
-    <p><input type="password" name="password" placeholder="输入密码" required="required" class="password"></p>
-    <p><input type="password" name="password2" placeholder="确认密码" required="required" class="password" ></p>
-    <button type="submit" class="btn">注册</button>
+  <p><input type="username" name="username" placeholder="邮箱地址、电话号码" required="required"></p>
+  <p><input type="password" name="password" placeholder="密码"></p>
+  <p><input type="submit" value="注册"></p>
 </form>
-
-</div>
-  
 {% endif %}
 {% endblock %}
 

app/templates/userpage_get.html

@@ -19,50 +19,23 @@
     {% endif %}
 
     <title>EnglishPal Study Room for {{ username }}</title>
-
-    <style>
-        .shaking {
-            animation: shakes 1600ms ease-in-out;
-        }
-
-        @keyframes shakes {
-            10%, 90% { transform: translate3d(-1px, 0, 0); }
-            20%, 50% { transform: translate3d(+2px, 0, 0); }
-            30%, 70% { transform: translate3d(-4px, 0, 0); }
-            40%, 60% { transform: translate3d(+4px, 0, 0); }
-            50% { transform: translate3d(-4px, 0, 0); }
-        }
-    </style>
 </head>
 <body>
 <div class="container-fluid">
-    <p><b>English Pal for <font id="username" color="red">{{ username }}</font></b>
+    <p><b>English Pal for <font color="red">{{ username }}</font></b>
         <a class="btn btn-secondary" href="/logout" role="button">退出</a>
         <a class="btn btn-secondary" href="/reset" role="button">重设密码</a>
     </p>
     {{ flashed_messages|safe }}
 
-    <a class="btn btn-success" href="/{{ username }}/reset" role="button"> 下一篇 Next Article </a>    
-    {% if session.get('articleID') != session.get('old_articleID') %}
-        {% if session.get('old_articleID') != None %}
-            <a class="btn btn-success" href="/{{ username }}/back" role="button"> 上一篇 Previous Article </a>
-        {% endif%}
-    {% endif %}
-
+    <p><a class="btn btn-success" href="/{{ username }}/reset" role="button"> 下一篇 Next Article </a></p>
     <p><b>阅读文章并回答问题</b></p>
     <div id="text-content">{{ today_article|safe }}</div>
 
-    <input type="checkbox" onclick="toggleHighlighting()" checked/>生词高亮
+    <input type="checkbox" onclick="ChangeHighlight()" checked/>生词高亮
     <input type="checkbox" onclick="onReadClick()" checked/>大声朗读
     <input type="checkbox" onclick="onChooseClick()" checked/>划词入库
-    <div class="range">
-        <div class="field">
-            <div class="sliderValue">
-                <span id="rangeValue">1×</span>
-            </div>
-        <input type="range" id="rangeComponent" min="0.5" max="2" value="1" step="0.25" "/>
-        </div>
-    </div>    
+
     <p><b>收集生词吧</b> （可以在正文中划词，也可以复制黏贴）</p>
     <form method="post" action="/{{ username }}">
         <textarea name="content" id="selected-words" rows="10" cols="120"></textarea><br/>
@@ -81,30 +54,41 @@
     {% endif %}
 
     {% if d_len > 0 %}
-        <p>
-            <b>我的生词簿</b> 
-            <label for="move_dynamiclly">
-                <input type="checkbox" name="move_dynamiclly" id="move_dynamiclly" checked>
-                允许动态调整顺序
-            </label>
-        </p>
-        <a name="aaa"></a>
-        <div class="word-container">
+        <p><b>我的生词簿</b></p>
         {% for x in lst3 %}
             {% set word = x[0] %}
+
             {% set freq = x[1] %}
             {% if session.get('thisWord') == x[0] and session.get('time') == 1 %}
+                <a name="aaa"></a>
             {% endif %}
-                <p id='p_{{ word }}' class="new-word" >
-                    <a id="word_{{ word }}"  class="btn btn-light" href='http://youdao.com/w/eng/{{ word }}/#keyfrom=dict2.index'
+            {% if freq > 1 %}
+                <p class="new-word">
+                    <a class="btn btn-light" href='http://youdao.com/w/eng/{{ word }}/#keyfrom=dict2.index'
                        role="button">{{ word }}</a>
-                    ( <a id="freq_{{ word }}" title="{{ word }}">{{ freq }}</a> )
-                    <a class="btn btn-success" onclick="familiar('{{ word }}')" role="button">熟悉</a>
-                    <a class="btn btn-warning" onclick="unfamiliar('{{ word }}')" role="button">不熟悉</a>
-                    <a class="btn btn-danger" onclick="delete_word('{{ word }}')" role="button">删除</a>
+                    (
+                    <a title="{{ word }}">{{ freq }}</a>
+                    )
+
+                    <a class="btn btn-success" href={{ username }}/{{ word }}/familiar role="button">熟悉</a>
+                    <a class="btn btn-warning" href={{ username }}/{{ word }}/unfamiliar role="button">不熟悉</a>
+                    <a class="btn btn-danger" href={{ username }}/{{ word }}/del role="button">删除</a>
                 </p>
+            {% else %}
+                <p class="new-word">
+                    <a class="btn btn-light" href='http://youdao.com/w/eng/{{ word }}/#keyfrom=dict2.index'
+                       role="button">{{ word }}</a>
+                    (
+                    <a title="{{ word }}">{{ freq }}</a>
+                    )
+                    <a class="btn btn-success" href={{ username }}/{{ word }}/familiar role="button">熟悉</a>
+                    <a class="btn btn-warning" href={{ username }}/{{ word }}/unfamiliar role="button">不熟悉</a>
+                    <a class="btn btn-danger" href={{ username }}/{{ word }}/del role="button">删除</a>
+                </p>
+            {% endif %}
+        {% else %}
+            <a href='http://youdao.com/w/eng/{{ word }}/#keyfrom=dict2.index'>{{ word }}</a>{{ freq }}
         {% endfor %}
-        </div>
         <input id="selected-words2" type="hidden" value="{{ words }}">
     {% endif %}
 </div>

app/templates/userpage_post.html

@@ -20,7 +20,7 @@
     <title>EnglishPal Study Room for {{username}}</title>
 </head>
 <body>
-     <p>取消勾选认识的单词</p>
+     <p>勾选不认识的单词</p>
       <form method="post" action="/{{username}}/mark">
        <input type="submit" name="add-btn" value="加入我的生词簿"/>
        {% for x in lst %}
@@ -30,7 +30,7 @@
             :
             <a href='http://youdao.com/w/eng/{{word}}/#keyfrom=dict2.index' title={{word}}>{{word}}</a>
             ({{x[1]}})
-            <input type="checkbox" name="marked" value="{{word}}" checked>
+            <input type="checkbox" name="marked" value={{word}}>
         </p>
 
        {% endfor %}

app/test/test_word_operation.py

@@ -1,91 +0,0 @@
-from time import sleep
-from selenium import webdriver
-
-# 获取浏览器驱动，并且打开响应的网址
-driver = webdriver.Chrome(executable_path="C:\Program Files (x86)\Google\ChromeDriver\chromedriver.exe")
-
-HOME_PAGE = "http://127.0.0.1:5000/"
-
-
-def test_word_operation():
-    try:
-        login()
-        unfamiliar()
-        familiar()
-        delete()
-    finally:
-        driver.quit()
-
-
-def login():
-    driver.get(HOME_PAGE)
-
-    assert 'English Pal -' in driver.page_source
-
-    # login
-    elem = driver.find_element_by_link_text('登录')
-    elem.click()
-    sleep(2)
-    uname = 'peter'
-    password = 'peter'
-
-    elem = driver.find_element_by_name('username')
-    elem.send_keys(uname)
-
-    elem = driver.find_element_by_name('password')
-    elem.send_keys(password)
-
-    # find the login button
-    elem = driver.find_element_by_xpath('/html/body/form/p[3]/input')
-    elem.click()
-
-    assert 'EnglishPal Study Room for ' + uname in driver.title
-
-
-def familiar():
-    sleep(5)
-
-    elem = driver.find_element_by_xpath('//*[@id="p_0"]/a[3]')
-
-    count = int(elem.find_element_by_xpath('//*[@id="freq_0"]').text)
-
-    loop = 3
-
-    for i in range(loop):
-        elem.click()
-        sleep(1)
-
-    new_count = int(driver.find_element_by_xpath('//*[@id="freq_0"]').text)
-
-    assert count - loop == new_count
-
-
-def unfamiliar():
-    sleep(5)
-
-    elem = driver.find_element_by_xpath('//*[@id="p_0"]/a[4]')
-
-    count = int(elem.find_element_by_xpath('//*[@id="freq_0"]').text)
-
-    loop = 2
-
-    for i in range(loop):
-        elem.click()
-        sleep(1)
-
-    new_count = int(driver.find_element_by_xpath('//*[@id="freq_0"]').text)
-
-    assert count + loop == new_count
-
-
-def delete():
-    sleep(3)
-    word = driver.find_element_by_xpath('//*[@id="word_0"]').text
-    elem = driver.find_element_by_xpath('//*[@id="p_0"]/a[5]')
-    elem.click()
-    sleep(5)
-    driver.refresh()
-    driver.refresh()
-    driver.refresh()
-    find_word = word in driver.page_source
-    assert find_word is False

app/user_service.py

@@ -29,25 +29,12 @@ def user_reset(username):
     :param username: 用户名
     :return: 返回页面内容
     '''
-    session['old_articleID'] = session.get('articleID')
     if request.method == 'GET':
         session['articleID'] = None
         return redirect(url_for('user_bp.userpage', username=username))
     else:
         return 'Under construction'
 
-@userService.route("/<username>/back", methods=['GET'])
-def user_back(username):
-    '''
-    用户界面
-    :param username: 用户名
-    :return: 返回页面内容
-    '''
-    if request.method == 'GET':
-        session['articleID'] = session.get('old_articleID')
-        return redirect(url_for('user_bp.userpage', username=username))
-
-
 
 @userService.route("/<username>/<word>/unfamiliar", methods=['GET', 'POST'])
 def unfamiliar(username, word):
@@ -61,7 +48,7 @@ def unfamiliar(username, word):
     pickle_idea.unfamiliar(user_freq_record, word)
     session['thisWord'] = word  # 1. put a word into session
     session['time'] = 1
-    return "success"
+    return redirect(url_for('user_bp.userpage', username=username))
 
 
 @userService.route("/<username>/<word>/familiar", methods=['GET', 'POST'])
@@ -76,7 +63,7 @@ def familiar(username, word):
     pickle_idea.familiar(user_freq_record, word)
     session['thisWord'] = word  # 1. put a word into session
     session['time'] = 1
-    return "success"
+    return redirect(url_for('user_bp.userpage', username=username))
 
 
 @userService.route("/<username>/<word>/del", methods=['GET', 'POST'])
@@ -90,7 +77,7 @@ def deleteword(username, word):
     user_freq_record = path_prefix + 'static/frequency/' + 'frequency_%s.pickle' % (username)
     pickle_idea2.deleteRecord(user_freq_record, word)
     flash(f'<strong>{word}</strong> is no longer in your word list.')
-    return "success"
+    return redirect(url_for('user_bp.userpage', username=username))
 
 
 @userService.route("/<username>", methods=['GET', 'POST'])
@@ -107,7 +94,7 @@ def userpage(username):
     # 用户过期
     user_expiry_date = session.get('expiry_date')
     if datetime.now().strftime('%Y%m%d') > user_expiry_date:
-        return render_template('expiry.html', expiry_date=user_expiry_date)
+        return render_template('expiry.html')
 
     # 获取session里的用户名
     username = session.get('username')
@@ -115,7 +102,7 @@ def userpage(username):
     user_freq_record = path_prefix + 'static/frequency/' + 'frequency_%s.pickle' % (username)
 
     if request.method == 'POST':  # when we submit a form
-        content = escape(request.form['content'])
+        content = request.form['content']
         f = WordFreq(content)
         lst = f.get_freq()
         return render_template('userpage_post.html',username=username,lst = lst, yml=Yaml.yml)

app/wordfreqCMD.py

@@ -39,7 +39,7 @@ def file2str(fname):#文件转字符
 
 
 def remove_punctuation(s): # 这里是s是形参 (parameter)。函数被调用时才给s赋值。
-    special_characters = '\_©~<=>+-/[]*&$%^@.,?!:;#()"“”—‘’{}|' # 把里面的字符都去掉
+    special_characters = '_©~=+[]*&$%^@.,?!:;#()"“”—‘’' # 把里面的字符都去掉
     for c in special_characters:
         s = s.replace(c, ' ') # 防止出现把 apple,apple 移掉逗号后变成 appleapple 情况
     s = s.replace('--', ' ')

build.sh

@@ -1,6 +1,6 @@
 #!/bin/sh
 
-DEPLOYMENT_DIR=/home/lanhui/englishpal2/EnglishPal
+DEPLOYMENT_DIR=/home/lanhui/EnglishPal
 cd $DEPLOYMENT_DIR
 
 # Stop service
@@ -11,7 +11,7 @@ sudo docker rm EnglishPal
 sudo docker build -t englishpal .
 
 # Run the application
-sudo docker run --restart=always -d --name EnglishPal -p 90:80 -v ${DEPLOYMENT_DIR}/app/static/frequency:/app/static/frequency -v ${DEPLOYMENT_DIR}/app/static/:/app/static/ -t englishpal  # for permanently saving data
+sudo docker run -d --name EnglishPal -p 90:80 -v ${DEPLOYMENT_DIR}/app/static/frequency:/app/static/frequency -v ${DEPLOYMENT_DIR}/app/static/:/app/static/ -t englishpal  # for permanently saving data
 
 # Save space.  Run it after sudo docker run
 sudo docker system prune -a -f