From c816234d4cdfc4aad36254de66c722fb8f895046 Mon Sep 17 00:00:00 2001
From: s2545411 <d.mysliwiec@student.utwente.nl>
Date: Tue, 19 Oct 2021 17:36:35 +0200
Subject: [PATCH] Create change password page
---
pages/Change-Password.vue | 55 ++++++++++++++++++++++++++++++++-------
1 file changed, 45 insertions(+), 10 deletions(-)
diff --git a/pages/Change-Password.vue b/pages/Change-Password.vue
index 43eca34..7c47718 100644
--- a/pages/Change-Password.vue
+++ b/pages/Change-Password.vue
@@ -1,18 +1,53 @@
<template>
- <div class="container">
- <label for="old-password">Old password</label>
- <input id="old-password" type="text">
- <label for="new-password">New password</label>
- <input id="new-password" type="text">
- <label for="repeat-password">Repeat new password</label>
- <input id="repeat-password" type="text">
- </div>
+ <section class="password-section">
+ <div class="container">
+ <NuxtLink to="/" class="link-back">Change password</NuxtLink>
+ <label for="old-password">Old password</label>
+ <input id="old-password" type="password">
+ <label for="new-password">New password</label>
+ <input id="new-password" type="password">
+ <label for="repeat-password">Repeat new password</label>
+ <input id="repeat-password" type="password">
+ <button class="button">confirm</button>
+ </div>
+ </section>
</template>
<script>
-
+export default {
+ layout: 'settingLayout'
+}
</script>
-<style scoped>
+<style lang="scss" scoped>
+.password-section {
+ width: auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-shadow: 0 4px 7px #333;
+ input {
+ font-size: 1.2rem;
+ border: .5vh solid white;
+ border-radius: 3.5vh;
+ box-shadow: 0 5px 7px rgba(0, 0, 0, .4) inset,
+ 0 3px 5px #555;
+ padding: .2vh 1.5vh .2vh 1.5vh;
+ background: transparent;
+ color: #004377;
+ width: min(300px, 75vw);
+ }
+ label {
+ width: min(270px, 66vw);
+ font-size: 1rem;
+ margin-top: 6%;
+ text-align: left;
+ }
+ button{
+ width: min(300px, 75vw);
+ height: 39px;
+ margin-top:10vh;
+ }
+}
</style>
--
GitLab