added some styling and added a change email and mobile functionality

shop/forms.py

@@ -13,7 +13,7 @@ class SignupForm(FlaskForm):
     username = StringField('Username', validators=[input_required(), Length(1, 16)])
     password = PasswordField('Password', validators=[input_required()])
     verifyPassword = PasswordField('Verify password', validators=[input_required(), EqualTo('password', message='Passwords must match')])
-    email = StringField('email', validators=[Regexp(regex="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$", message = 'has to be a valid email'), input_required(), Length(1, 16)])
+    email = StringField('email', validators=[Regexp(regex="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$", message = 'has to be a valid email'), input_required()])
     mobile = StringField('mobile', validators=[Regexp(regex='^[+-]?[0-9]+$', message = 'only integers allowed'), input_required(), Length(11, 11)])
     submit = SubmitField('Submit')
 
@@ -48,4 +48,13 @@ class typeViewForm(FlaskForm):
 
 class reviewForm(FlaskForm):
     review = StringField('Enter a review:', validators=[input_required(), Length(min=1, max=300)])
+    anonymous = BooleanField('Anonymous?')
     submit1 = SubmitField('Submit')
+
+class emailChangeForm(FlaskForm):
+    new_email = StringField('Enter a new email:', validators=[Regexp(regex="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$", message = 'has to be a valid email'), input_required()])
+    submit1 = SubmitField('Submit')
+
+class mobileChangeForm(FlaskForm):
+    new_mobile = StringField('Enter a new mobile:', validators=[Regexp(regex='^[+-]?[0-9]+$', message = 'only integers allowed'), input_required(), Length(11, 11)])
+    submit2 = SubmitField('Submit')
\ No newline at end of file

shop/routes.py

@@ -14,6 +14,8 @@ from .forms import removeFormWishlist
 from .forms import checkoutForm
 from .forms import typeViewForm
 from .forms import reviewForm
+from .forms import emailChangeForm
+from.forms import mobileChangeForm
 
 # renders the login page
 # if the form is validated and submitted it logs the user in
@@ -233,7 +235,13 @@ def item_page():
         if review_form.validate_on_submit():
             review_in = review_form.review.data
             current_user_username = current_user.username
-            review_table.new_review(review_in=review_in, product_id_in=product_in.product_id, author_in = current_user_username)
+            anonymous = review_form.anonymous.data
+            if anonymous:
+                review_table.new_review(review_in=review_in, product_id_in=product_in.product_id,
+                                        author_in='Anonymous')
+            else:
+                review_table.new_review(review_in=review_in, product_id_in=product_in.product_id,
+                                        author_in=current_user_username)
 
         reviews = review_table.query.filter_by(product_id=product_in.product_id)
 
@@ -294,10 +302,26 @@ def get_total_cart_price():
 def thank_you():
     return render_template('thank_you.html')
 
-@app.route('/user_page')
+@app.route('/user_page', methods=['GET', 'POST'])
 @login_required
 def user_page():
-    return render_template('user_page.html')
+    mobile_form = mobileChangeForm()
+    email_form = emailChangeForm()
+    if mobile_form.validate_on_submit() and mobile_form.validate():
+        new_mobile = mobile_form.new_mobile.data
+        for user in db.session.query(User).filter_by(id=current_user.get_id()):
+            user.mobile = new_mobile
+        db.session.commit()
+        return redirect(url_for('user_page'))
+
+    if email_form.validate_on_submit() and email_form.validate():
+        new_email = email_form.new_email.data
+        for user in db.session.query(User).filter_by(id=current_user.get_id()):
+            user.email = new_email
+        db.session.commit()
+        return redirect(url_for('user_page'))
+
+    return render_template('user_page.html', mobile_form = mobile_form, email_form = email_form)
 
 @lm.user_loader
 def load_user(id):

shop/static/styles.css

 .item_page_img {
     height: 500px;
+    max-width: 100%;
     float: right;
     clear: right
 }
@@ -239,12 +240,12 @@ li {
 .cart_welcome {
     padding-left: 2%;
     font-family: Andale Mono, monospace;
-    font-size: 300%;
+    font-size: 3vw;
 }
 
 .empty_cart {
     padding-left: 2%;
-    font-size: 200%;
+    font-size: 2vw;
 }
 
 .item_remove_select {
@@ -317,7 +318,7 @@ li {
 }
 
 .login_field {
-    font-size: 150%;
+    font-size: 1.5vw;
 }
 
 .thank_you_tick {
@@ -392,6 +393,7 @@ li {
 
 #content-wrap {
     padding-bottom: 120px;
+    overflow: auto;
 }
 
 #footer {
@@ -562,8 +564,39 @@ li {
 
 }
 
-.user_page_username {
+.user_page_info {
     text-align: center;
     font-family: Andale Mono, monospace;
-    font-size: 300%;
+    font-size: 2vw;
+}
+
+.hiden1 {
+  display: none;
+}
+.hiden2 {
+  display: none;
+}
+.hiden3 {
+  display: none;
+}
+.checkout_line1:hover + .hiden1 {
+  display: block;
+}
+.checkout_line2:hover + .hiden2 {
+  display: block;
+}
+.checkout_line3:hover + .hiden3 {
+  display: block;
+}
+
+.new_mobile {
+    float: right;
+    clear: right;
+    margin-right: 10%
+}
+
+.new_email {
+    float: left;
+    clear: left;
+    margin-left: 10%
 }
\ No newline at end of file

shop/templates/item_page.html

@@ -46,7 +46,7 @@
               <div class = "review_form">
                 {{ reviewForm.csrf_token }}
                 <p>
-                  {{ reviewForm.review.label }} {{ reviewForm.review(class = "field_order_by") }} {{ reviewForm.submit1(class = "field_order_by") }}
+                  {{ reviewForm.review.label }} {{ reviewForm.review(class = "field_order_by") }}  Anonymous: {{ reviewForm.anonymous }} {{ reviewForm.submit1(class = "field_order_by") }}
                 </p>
               </div>
             </form>

shop/templates/layout.html

@@ -4,26 +4,6 @@
 
 <head>
     <link rel=stylesheet type=text/css href="{{ url_for('static', filename='styles.css') }}">
-    <style>
-        .hiden1 {
-          display: none;
-        }
-        .hiden2 {
-          display: none;
-        }
-        .hiden3 {
-          display: none;
-        }
-        .checkout_line1:hover + .hiden1 {
-          display: block;
-        }
-        .checkout_line2:hover + .hiden2 {
-          display: block;
-        }
-        .checkout_line3:hover + .hiden3 {
-          display: block;
-        }
-    </style>
 </head>
 
 

shop/templates/user_page.html

@@ -7,9 +7,37 @@
 <div id="content-wrap">
 
     <h1 class = "home_title" >User Page</h1>
-    <h1 class = "user_page_username"> Current User: {{current_user.username}}</h1>
-    <h1 class = "user_page_username"> e-mail: {{current_user.email}}</h1>
-    <h1 class = "user_page_username"> mobile: {{current_user.mobile}}</h1>
+    <h1 class = "user_page_info"> Current User: {{current_user.username}}</h1>
+    <h1 class = "user_page_info"> e-mail: {{current_user.email}}</h1>
+    <h1 class = "user_page_info"> mobile: {{current_user.mobile}}</h1>
+
+    <div class = "new_email">
+        <form action="" method="POST">
+            <div class = "checkout_login_form">
+                {{ email_form.csrf_token }}
+                <p class="login_field">
+                    Want to change your email?
+                </p>
+                <p class="login_field">
+                    {{ email_form.new_email.label }} {{ email_form.new_email(class = "input_field") }} {{ email_form.submit1(class = "input_field") }}
+                </p>
+            </div>
+        </form>
+    </div>
+
+    <div class = "new_mobile">
+        <form action="" method="POST">
+            <div class = "checkout_login_form">
+                {{ mobile_form.csrf_token }}
+                <p class="login_field">
+                    Want to change your mobile?
+                </p>
+                <p class="login_field">
+                    {{ mobile_form.new_mobile.label }} {{ mobile_form.new_mobile(class = "input_field") }} {{ mobile_form.submit2(class = "input_field") }}
+                </p>
+            </div>
+        </form>
+    </div>
 
 </div>